<script lang="ts">
  import type { HTMLButtonAttributes } from "svelte/elements";
  let {
    children,
    class: className = "",
    ...props
  }: HTMLButtonAttributes = $props();
</script>

<button
  {...props}
  class="
    px-4 py-px font-base
    bg-transparent hover:bg-slate-950/7 active:bg-slate-950/15
    border-s-slate-950 rounded-md
    shadow-[1px_1px_3px_rgba(15,23,42,0.75)]
    border-l border-t border-r-4 border-b-4
    active:border-l-4 active:border-t-4 active:border-r active:border-b
    active:shadow-[inset_-1px_-1px_3px_rgba(15,23,42,0.75)]
    focus-visible:outline-none focus-visible:border-blue-700
    transition-all motion-reduce:transition-none duration-60
    {className}
  "
>
  {@render children?.()}
</button>
