@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__input {
    @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_field {
    @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;
  }
  .form_with_left_labels__error {
    @apply text-red-400;
  }

  .form_with_left_labels__input--error > label {
    @apply text-red-400;
  }

  .form_with_left_labels__input--error :is(input:not([type="checkbox"]), textarea, select) {
    @apply ring-red-400;
  }
  .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;
  }
  .notification__icon_base {
    @apply  w-8
            h-8
            flex
            items-center
            justify-center
            rounded;
  }
  .notification__icon--error {
    @apply  notification__icon_base
            bg-red-500
            bg-[url(/assets/x_white-feee2993fe1fe41f984a070ab8d366e5056402448b4c45c8dded3de4aa11acb9.svg)];
  }
  .notification__icon--loading {
    @apply  inline-block
            h-6
            w-6
            animate-spin
            rounded-full
            border-4
            border-solid
            border-current
            border-r-transparent
            align-[-0.125em]
            text-indigo-600
            motion-reduce:animate-[spin_1.5s_linear_infinite];
  }
  .notification__icon--success {
    @apply  notification__icon_base
            bg-green-500
            bg-[url(/assets/check_white-c2975f8c4058babeaf2db02f52c35badf542cf1a31190de9b028c1d1466646e8.svg)];
  }
  .page_header__button {
    @apply  inline-flex
            items-center
            rounded-md
            bg-white
            px-3
            py-2
            text-sm
            font-semibold
            text-gray-900
            shadow-sm
            ring-1
            ring-inset
            ring-gray-300
            hover:bg-gray-50;
  }
  .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;
  }
  .stats__container {
    @apply  mx-auto
            grid
            grid-cols-1
            gap-px
            bg-gray-900/5
            sm:grid-cols-2
            lg:grid-cols-4;
  }
  .stats__item {
    @apply  flex
            flex-wrap
            items-baseline
            justify-between
            gap-x-4
            gap-y-2
            bg-white
            px-4
            py-10
            sm:px-6
            xl:px-8;
  }
  .stats__label {
    @apply  text-sm
            font-medium
            leading-6
            text-gray-500;
  }
  .stats__value {
    @apply  w-full
            flex-none
            text-3xl
            font-medium
            leading-10
            tracking-tight
            text-gray-900;
  }
  .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;
  }
  .toast__button--close {
    @apply  inline-flex
            rounded-md
            bg-white
            text-gray-400
            hover:text-gray-500
            focus:outline-none
            focus:ring-2
            focus:ring-indigo-500
            focus:ring-offset-2
            h-5
            w-5
            bg-[url(/assets/x_black-4ca5ca5712c16ff0b303c3214c1a9f41e0dc82a4ac782795a8d8b94d5fc45aed.svg)];
  }
  .toast__container {
    @apply  pointer-events-auto
            w-full
            max-w-sm
            overflow-hidden
            rounded-lg
            bg-white
            shadow-lg
            ring-1
            ring-black
            ring-opacity-5
  }
  .toast__tag--alert {
    @apply  h-8
            w-8
            bg-[url(/assets/alert-b452c19642dac414938ec44561d5dd3f29bd3d2d5c50e8b6692005ecc66f02e6.svg)];
  }
  .toast__tag--success {
    @apply  h-8
            w-8
            bg-[url(/assets/success-9548b8ec1441f1b5235064513388d4596bc1c0ce315849df574227838468dbd1.svg)];
  }
  .toast__wrapper {
    @apply  pointer-events-none
            fixed
            inset-0
            flex
            items-start
            px-4
            py-6
            animate-slideIn
            z-50
            sm:items-start
            sm:p-6
  }
}
/*
 * 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.
 *


 */