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

<input
  {...props}
  bind:value
  class="
    px-3 py-px font-base bg-slate-950/7
    border-s-slate-950 rounded-md
    border-l-4 border-t-4 border-r border-b
    shadow-[inset_-1px_-1px_3px_rgba(15,23,42,0.85)]
    focus-visible:outline-none focus-visible:border-blue-700
    focus-visible:shadow-[inset_-1px_-1px_3px_rgb(15,23,42)]
    transition-all motion-reduce:transition-none duration-60
    {className}
  "
/>
