@import 'tailwindcss';

@plugin '@tailwindcss/typography';

/* Update`dark` variant to use `data-theme="dark"` as recommended by Tailwind */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@layer utilities {
  .prose {
    code {
      &::before,
      &::after {
        content: none;
      }
    }

    pre.highlight {
      margin-top: 18px;
      margin-bottom: 18px;
      padding-top: 12px;
      padding-bottom: 12px;
    }
  }

  .alert-tip div.highlight pre.highlight {
    margin-bottom: 0px;
  }

  .alert-tip div.highlight {
    margin-bottom: 0px;
  }

  /* Reduce line spacing in code blocks */
  div.highlight pre,
  div.highlight code {
    line-height: 1.4;
  }
}

@layer components {
  /* NOTE: Be sure to include `dark:` prefixed styles for handling dark-mode UI */
  /* Buttons */
  .btn-primary {
    @apply bg-blue-600 dark:bg-blue-500 text-white py-2 px-4 rounded-sm hover:bg-blue-500 dark:hover:bg-blue-400 transition;
  }

  .btn-secondary {
    @apply bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 py-2 px-6 rounded-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition;
  }

  .btn-success {
    @apply bg-green-600 dark:bg-green-500 text-white py-2 px-4 rounded-sm hover:bg-green-500 dark:hover:bg-green-400 transition;
  }

  /* Note alert */
  .alert-note {
    @apply my-4 rounded-lg border-l-4 p-4 border-blue-500 bg-blue-900/10 dark:border-blue-500 dark:bg-blue-950/20;
  }

  .alert-note > p:first-of-type,
  .alert-note > .alert-title {
    @apply mb-2 flex items-center gap-2 text-lg font-semibold text-blue-700 dark:text-blue-400;
  }

  .alert-note > p:first-of-type::before,
  .alert-note > .alert-title::before {
    content: 'ⓘ';
  }

  /* Tip alert */
  .alert-tip {
    @apply my-4 rounded-lg border-l-4 p-4 border-green-500 bg-green-900/10 dark:border-green-500 dark:bg-green-950/20;
  }

  .alert-tip > p:first-of-type,
  .alert-tip > .alert-title {
    @apply mb-2 flex items-center gap-2 text-lg font-semibold text-green-700 dark:text-green-400;
  }

  .alert-tip > p:first-of-type::before,
  .alert-tip > .alert-title::before {
    content: '💡';
  }

  /* Warning alert */
  .alert-warning {
    @apply my-4 rounded-lg border-l-4 p-4 border-amber-500 bg-amber-900/10 dark:border-amber-500 dark:bg-amber-950/20;
  }

  .alert-warning > p:first-of-type,
  .alert-warning > .alert-title {
    @apply mb-2 flex items-center gap-2 text-lg font-semibold text-amber-700 dark:text-amber-400;
  }

  .alert-warning > p:first-of-type::before,
  .alert-warning > .alert-title::before {
    content: '⚠';
  }

  /* Alert content */
  .alert-note > p:not(:first-of-type),
  .alert-warning > p:not(:first-of-type),
  .alert-tip > p:not(:first-of-type) {
    @apply text-gray-900 dark:text-gray-300;
  }

  /* Remove margin from last element in alerts to maintain consistent padding */
  .alert-note > :last-child,
  .alert-warning > :last-child,
  .alert-tip > :last-child {
    @apply mb-0;
  }

  /* Code blocks within alerts */
  .alert-note .highlight,
  .alert-warning .highlight,
  .alert-tip .highlight {
    @apply my-4 mx-0;
  }

  .alert-note pre,
  .alert-warning pre,
  .alert-tip pre {
    @apply bg-gray-900/95;
  }

  /* Heading anchors */
  .has-anchor {
    @apply scroll-mt-20;
  }

  .heading-anchor {
    @apply float-left -ml-6 pr-2 opacity-0 transition-opacity no-underline;
  }

  .heading-anchor svg {
    @apply inline-block align-middle fill-gray-600 hover:fill-blue-500 dark:fill-gray-400 dark:hover:fill-gray-300;
  }

  .has-anchor:hover .heading-anchor,
  .heading-anchor:focus {
    @apply opacity-100;
  }

  /* When the heading is linked directly, always show the anchor */
  :target .heading-anchor {
    @apply opacity-100;
  }
}
