@layer base {
  /* Helper classes */
  .inline-code {
    @apply rounded border-light-gray bg-pale px-1.5 py-0.5 dark:border-none dark:bg-dark-gray;
  }

  /* This class is applied to snippets of text that are rendered from Markdown but not covered by .prose */
  .content {
    a {
      @apply font-medium underline hover:text-primary dark:hover:text-primary;
    }

    p + p {
      @apply mt-2 md:mt-2.5 lg:mt-3;
    }

    code {
      @apply inline-code;
    }
  }

  .prose {
    /* Headings */
    h2,
    h3,
    h4 {
      &::before {
        display: block;
        content: " ";
        margin-top: -5rem;
        height: 5rem;
        visibility: hidden;
        pointer-events: none;
      }

      &.heading a {
        @apply font-semibold no-underline;
      }
    }

    /* Hide footnotes heading */
    .footnotes {
      @apply mt-12 p-0;

      h2#footnote-label {
        @apply text-lg md:text-xl lg:text-2xl;
      }

      .data-footnote-backref {
        @apply no-underline;
      }
    }

    /* Needed by a few components */
    .remove-underline {
      a {
        @apply no-underline;
      }
    }

    p,
    .content,
    h2,
    h3 {
      code {
        @apply inline-code;
      }
    }

    a {
      @apply underline hover:text-primary dark:hover:text-light-blue;
    }

    code {
      &::before,
      &::after {
        content: "";
      }
    }

    .admonition {
      @apply my-4;
    }
  }
}
