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

@layer base {
  html, body {
    @apply h-full;
  }

  ::-webkit-details-marker {
    @apply hidden;
  }

  turbo-frame:not([loading="lazy"]) {
    @apply contents;
  }

  nav {
    @apply list-none;
  }

  button,
  [type="button"],
  [type="submit"],
  [type="reset"] {
    font: inherit;
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-decoration: inherit;
    line-height: inherit;
    text-align: inherit;
  }
}

@layer utilities {
  .container-inline {
    container-type: inline-size;
  }

  @container (inline-size < 1.5ch) {
    .text-container-truncate {
      @apply hidden;
    }
  }

  @container (inline-size < 3.5ch) {
    .text-container-truncate-secondary {
      @apply hidden;
    }
  }

  .number-input-appearance-none {
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
      @apply m-0;
    }

    & {
      -moz-appearance: textfield;
    }
  }
}

@layer components {
  #mobile-navigation {
    position-area: unset;
    position: absolute;
    top: calc(anchor(bottom) + 1px);
    @apply m-0 inset-x-0 bottom-0 mt-4 px-4 size-full border-t border-gray-200;
  }

  .heading {
    @apply my-4 font-medium;
  }

  .markdown-body {
    h1 {
      @apply text-3xl heading;
    }

    h2 {
      @apply text-2xl heading;
    }

    h3 {
      @apply text-xl heading;
    }

    ul {
      @apply list-disc ml-5;
    }
  }

  .markdown-body table {
    & {
      @apply w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400;
    }

    thead {
      @apply text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400;
    }

    th {
      @apply px-6 py-3;
    }

    tbody tr {
      @apply bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200;
    }

    tr th {
      @apply px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white;
    }

    tr td {
      @apply px-6 py-4;
    }

    tr td a {
      @apply font-medium text-blue-600 dark:text-blue-500 hover:underline;
    }

  }

  .text strong {
    @apply text-primary-900 font-semibold;
  }

  .turbo-frame-error {
    @apply inline-flex flex-col flex-grow items-center justify-center text-gray-400 p-6;
  }

  turbo-frame:not(header ~ turbo-frame) > .turbo-frame-error {
    @apply outline outline-dashed outline-1 rounded-lg;
  }

  @supports not (position-area: bottom center) {
    [popover]:has(menu:only-child) {
      margin: auto;
    }

    ::backdrop {
      @apply bg-gray-900 bg-opacity-50;
    }
  }

  @supports (position-area: bottom center) {
    [popover]:has(menu:only-child) {
      @apply my-2 mx-0;
      position-area: bottom span-right;
      position-try: flip-block, bottom span-left;
      position-visibility: anchors-visible;
    }
  }

  .tooltip-popover {
    @apply my-2 mx-0 inset-x-4;
    position-area: bottom span-all;
    position-try: flip-block;
    position-visibility: anchors-visible;
  }
}

::view-transition-new(.auto-animation):only-child {
  @apply animate-expand;
}

::view-transition-old(.auto-animation):only-child {
  @apply animate-contract;
}