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

[x-cloak] { display: none !important; }

@layer components {
  .logo {
    @apply text-3xl font-serif text-teal-800;
  }
  .sansserif-h1 {
    @apply text-4xl font-semibold text-default;
  }
  .subhead-p {
    @apply mt-2 text-sm font-light text-gray-600 dark:text-gray-400;
  }
  .btn-primary {
    @apply flex items-center gap-x-1 rounded-md bg-teal-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600 cursor-pointer;
  }
  .btn-secondary {
    @apply inline-flex items-center rounded-md bg-white text-gray-900 dark:bg-gray-700 dark:text-gray-200 ring-gray-300 dark:ring-gray-500 hover:bg-gray-50 dark:hover:bg-gray-900 px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-inset cursor-pointer;
  }
  .btn-tertiary {
    @apply inline-flex items-center rounded-md bg-orange-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600 cursor-pointer;
  }
  .btn-cancel {
    @apply 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 cursor-pointer;
  }
  .btn-scaffold-primary {
    @apply rounded-lg py-3 px-5 bg-teal-600 text-white inline-block font-medium cursor-pointer;
  }

  .btn-scaffold-cancel {
    @apply ml-2 rounded-lg py-3 px-5 bg-gray-100 dark:bg-gray-700 dark:text-gray-200 inline-block font-medium;
  }
  .pill-teal {
    @apply inline-flex items-center rounded-md bg-teal-100 dark:bg-teal-800 dark:text-teal-200 px-2 py-1 text-xs font-sans font-medium;
  }

  .tab {
    @apply flex whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium;
  }
  .tab-active {
    @apply border-teal-500 text-teal-600;
  }
  .tab-inactive {
    @apply border-transparent text-gray-500 hover:border-gray-500 dark:hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-300;
  }
  .tab-badge {
    @apply ml-3 hidden rounded-full py-0.5 px-2.5 text-xs font-medium md:inline-block;
  }
  .tab-badge-active {
    @apply bg-teal-100 dark:bg-teal-600 text-teal-600 dark:text-teal-100;
  }
  .tab-badge-inactive {
    @apply bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100;
  }
  .index-list-item {
    @apply flex flex-wrap items-center justify-between gap-x-6 gap-y-4 py-4 sm:flex-nowrap;
  }
  .index-list-title {
    @apply text-2xl font-serif leading-tight text-gray-900;
  }
  .index-list-subtitle {
    @apply mt-1 text-sm leading-5 text-gray-600 font-light;
  }

  .label {
    @apply block mb-2;
  }
  .input {
    @apply block w-full rounded-md border-0 py-1.5 text-gray-900 dark:bg-gray-800 dark:text-gray-100 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-teal-600 sm:text-sm sm:leading-6;
  }
  .input-scaffold {
    @apply block w-full rounded-md border border-gray-400 dark:border-gray-400 dark:bg-gray-800 dark:text-gray-100 outline-none px-3 py-2 mt-2;
  }
  select.input:disabled {
    @apply text-gray-500;
  }


  .attributes-dl {
    @apply border-t border-b border-gray-200 dark:border-gray-600 mb-4 mt-8;
  }
  .attributes-grid {
    @apply py-4 grid grid-cols-4 sm:gap-4;
  }
  .attributes-dt {
    @apply text-sm font-medium text-gray-900 dark:text-gray-100;
  }
  .attributes-dd {
    @apply mt-1 text-sm leading-6 text-gray-700 dark:text-gray-300 col-span-3 sm:mt-0;
  }
  .max-w-container {
    @apply mx-auto max-w-2xl;
  }

  .activetext-content {
    @apply text-lg;
    
  }
  .activetext-content a, .paragraph a {
    @apply text-teal-600 underline;
  }
  .activetext-content ul { list-style: disc; }
  .activetext-content ol { list-style: decimal; }
  .trix-content > div, .trix-content > blockquote, .trix-content > ul, .paragraph {
    @apply mb-4;
  }
  .trix-content > ul > li {
    @apply mb-2;
  }
  .trix-content > h1 {
    @apply pt-3 text-lg font-semibold leading-6 text-gray-900 mb-4;
  }
  .trix-content table {
    @apply border border-gray-300 rounded-md;
  }
  .trix-content th {
    @apply text-base text-left py-2 px-2 font-semibold;
  }
  .trix-content td {
    @apply text-base border-t border-gray-300 py-2 px-2;
  }
  .trix-content td + td, .trix-content th + th {
    @apply border-l border-gray-300;
  }
  .trix-content strong {
    @apply font-semibold;
  }

  .padded-card {
    @apply shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 my-6 p-4;
  }

  .padded-card-heading {
    @apply font-medium mb-4 pb-1 border-b text-gray-900 dark:text-gray-100;
  }

  .branded-card {
    @apply shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg bg-teal-100 dark:bg-teal-900 my-6 p-4;
  }

  .text-default {
    @apply text-gray-900 dark:text-gray-100;
  }

  .text-default-secondary {
    @apply text-gray-700 dark:text-gray-300;
  }

  .divide-color-default {
    @apply divide-gray-300 dark:divide-gray-600;
  }

  .table-link {
    @apply text-teal-600 hover:text-teal-900 dark:hover:text-teal-300;
  }
}