@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .fieldset-select {
    @apply m-0 border-0 p-0;
  }

  .fieldset-select__container {
    @apply rounded-md border border-gray-300 bg-white;
  }

  .fieldset-select__search {
    @apply border-b border-gray-200 px-3 py-2;
  }

  .fieldset-select__list {
    @apply max-h-60 overflow-y-auto p-1;
  }

  .fieldset-select__option {
    @apply flex cursor-pointer items-center gap-2 rounded px-3 py-2 text-sm text-gray-700 select-none hover:bg-gray-50;
  }

  .fieldset-select__option:has(input:checked) {
    @apply bg-blue-50 text-blue-800;
  }
}