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

@layer components {
  hw-combobox {
    @apply block w-full;
  }

  hw-combobox input[type="text"] {
    @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6;
  }

  .hw-combobox__chip {
    @apply inline-flex items-center gap-1 rounded-md bg-gray-400 px-2 py-0.5 text-xs font-medium text-gray-600;
  }

  /* .hw-combobox__chip__remover {
    @apply cursor-pointer text-gray-400 hover:text-gray-600 focus:outline-none;
  }

  .hw-combobox__chip__remover::after {
    content: "×";
  } */

  /* Ransack sort arrows */
  a.sort_link::after,
  a.sort_link span.indicator {
    @apply ml-1 text-gray-500 font-bold;
    font-size: 0.85em;
  }

  a.sort_link.asc::after {
    content: " ▲";
    @apply text-indigo-600;
  }

  a.sort_link.desc::after {
    content: " ▼";
    @apply text-indigo-600;
  }
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/