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

@layer components {
  .form__button--cancel {
    @apply text-sm font-semibold leading-6 text-gray-900;
  }
  .form__button--primary {
    @apply  inline-flex
            justify-center
            rounded-md
            bg-indigo-600
            px-3
            py-2
            text-sm
            font-semibold
            text-white
            shadow-sm
            hover:bg-indigo-500
            focus-visible:outline
            focus-visible:outline-2
            focus-visible:outline-offset-2
            focus-visible:outline-indigo-600;
  }
  .form_with_left_labels {
    @apply sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:py-6;
  }
  .form_with_left_labels__input_wrapper {
    @apply mt-2 sm:col-span-2 sm:mt-0;
  }
  .form_with_left_labels__label {
    @apply block text-sm font-medium leading-6 text-gray-900 sm:pt-1.5;
  }
  .form_with_left_labels__input {
    @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:max-w-xs
            sm:text-sm
            sm:leading-6;
  }
  .form_with_left_labels__section_heading {
    @apply text-base font-semibold leading-7 text-gray-900;
  }
  .form_with_left_labels__section_lead_in {
    @apply mt-1 max-w-2xl text-sm leading-6 text-gray-600;
  }
  .list_header__button {
    @apply  block
            rounded-md
            bg-indigo-600
            px-3
            py-2
            text-center
            text-sm
            font-semibold
            text-white
            shadow-sm
            hover:bg-indigo-500
            focus-visible:outline
            focus-visible:outline-2
            focus-visible:outline-offset-2
            focus-visible:outline-indigo-600;
  }
  .main_menu__link {
    @apply  text-gray-900
            inline-flex
            items-center
            px-1
            pt-1
            text-sm
            font-medium;
  }
  .main_menu__link--active {
    @apply border-indigo-500 border-b-2;
  }
  .page_header__text {
    @apply  text-2xl
            font-bold
            leading-7
            text-gray-900
            sm:truncate
            sm:text-3xl
            sm:tracking-tight;
  }
  .pagination__container {
    @apply hidden sm:flex sm:flex-1 sm:items-center sm:justify-between;
  }
  .pagination__nav {
    @apply isolate inline-flex -space-x-px rounded-md shadow-sm;
  }
  .pagination__link {
    @apply  relative
            inline-flex
            items-center
            ring-1
            ring-inset
            ring-gray-300
            text-gray-900;
  }
  .pagination__gap {
    @apply  pagination__link
            px-4
            py-2
            text-sm
            font-semibold
            focus:outline-offset-0
            text-gray-700 !important;
  }
  .pagination__next {
    @apply  pagination__link
            rounded-r-md
            px-2
            py-2
            ring-1
            hover:bg-gray-50
            focus:z-20
            focus:outline-offset-0;
  }
  .pagination__next--disabled {
    @apply pagination__link cursor-default text-gray-400 !important;
  }
  .pagination__previous {
    @apply  pagination__link
            rounded-l-md
            px-2
            py-2
            ring-1
            hover:bg-gray-50
            focus:z-20
            focus:outline-offset-0;
  }
  .pagination__previous--disabled {
    @apply pagination__link cursor-default text-gray-400 !important;
  }
  .pagination__page {
    @apply  pagination__link
            px-4
            py-2
            text-sm
            font-semibold
            focus:outline-offset-0;
  }
  .pagination__page--enabled {
    @apply  pagination__page
            hover:bg-gray-50;
  }
  .pagination__page--selected {
    @apply  pagination__page
            z-10
            bg-indigo-600
            text-white
            focus-visible:outline
            focus-visible:outline-2
            focus-visible:outline-offset-2
            focus-visible:outline-indigo-600;
  }
  .show_record__row {
    @apply py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5;
  }
  .show_record__label {
    @apply text-sm font-medium text-gray-500;
  }
  .show_record__link {
    @apply text-indigo-600 hover:text-indigo-900;
  }
  .show_record__value {
    @apply mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0;
  }
  .tabs__container {
    @apply border-b border-gray-200;
  }
  .tabs__nav {
    @apply -mb-px flex space-x-8;
  }
  .tabs__link_base {
    @apply  whitespace-nowrap
            border-b-2
            py-4
            px-1
            text-sm
            font-medium;
  }
  .tabs__link {
    @apply  tabs__link_base
            border-transparent
            text-gray-500
            hover:border-gray-300
            hover:text-gray-700;
  }
  .tabs__link--selected {
    @apply  tabs__link_base
            border-indigo-500
            text-indigo-600;
  }
}
/*
 * 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.
 *


 */