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

@layer components {
  .ts-wrapper .ts-control {
    @apply px-2 py-1 bg-white border border-gray-300 rounded text-gray-900;
  }
  .ts-wrapper.focus .ts-control,
  .ts-wrapper.dropdown-active .ts-control {
    @apply ring-2 ring-blue-500 border-transparent;
  }
  .ts-wrapper .ts-control input {
    @apply text-gray-900;
  }
  .ts-wrapper.multi .ts-control .item {
    @apply bg-blue-100 text-blue-800 rounded px-2 py-0.5 mr-1;
  }
  .ts-wrapper.multi .ts-control .item.active {
    @apply bg-blue-200;
  }
  .ts-wrapper .ts-control .item .remove {
    @apply ml-1 text-gray-500 hover:text-gray-700;
  }
  .ts-dropdown {
    @apply mt-1 bg-white border border-gray-200 rounded shadow-lg;
  }
  .ts-dropdown .ts-option {
    @apply px-3 py-2 text-gray-900;
  }
  .ts-dropdown .ts-option.active {
    @apply bg-blue-50;
  }
  .ts-dropdown .no-results,
  .ts-dropdown .create {
    @apply px-3 py-2 text-gray-500;
  }
}

@media (prefers-color-scheme: dark) {
  .ts-wrapper .ts-control {
    @apply bg-gray-900 border-gray-600 text-gray-100;
  }
  .ts-wrapper .ts-control input {
    @apply text-gray-100;
  }
  .ts-wrapper.multi .ts-control .item {
    @apply bg-blue-900 text-blue-100;
  }
  .ts-wrapper.multi .ts-control .item.active {
    @apply bg-blue-800;
  }
  .ts-wrapper .ts-control .item .remove {
    @apply text-gray-400 hover:text-gray-200;
  }
  .ts-dropdown {
    @apply bg-gray-800 border-gray-700;
  }
  .ts-dropdown .ts-option {
    @apply text-gray-100;
  }
  .ts-dropdown .ts-option.active {
    @apply bg-gray-700;
  }
  .ts-dropdown .no-results,
  .ts-dropdown .create {
    @apply text-gray-300;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */