@layer components {
  .link {
    @apply text-blue-700 dark:text-blue-400;
    text-decoration-color: theme('colors.blue.700');
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.1em;

    @media (prefers-color-scheme: dark) {
      text-decoration-color: theme('colors.blue.400');
    }
  }

  .markdown {
    * + * {
      @apply mt-4;
    }

    > *:first-child {
      @apply mt-0;
    }

    h2 + * {
      @apply mt-2;
    }

    h2 {
      @apply mt-6;
    }

    ul {
      @apply pl-6 list-disc;
    }

    li {
      @apply mt-0;
    }

    a {
      @apply link;
    }
  }

  .visually-hidden {
    @apply sr-only;
  }
}