.prose {
  & > :is(h2, h3) {
    @apply scroll-mt-24;

    a {
      border-bottom: 0 !important;

      span {
        @apply text-black dark:text-white;
      }

      &::after {
        @apply gradient-title ml-2 inline-block opacity-0
               transition-opacity duration-300 content-['#'];
      }

      &:hover,
      &:focus-visible {
        &::after {
          @apply opacity-100;
        }
      }
    }
  }

  & :where(code):not(:where([class~='not-prose'] *)) {
    @apply main-border rounded-md p-1;
  }

  @mixin border-gradient($position) {
    border-image: linear-gradient(
        to $position,
        theme('colors.accent.start'),
        theme('colors.accent.end')
      )
      1;
  }

  blockquote {
    @include border-gradient(top);

    p:first-of-type::before,
    p:last-of-type::after {
      @apply content-none;
    }
  }

  hr {
    @include border-gradient(right);
  }

  figure[data-rehype-pretty-code-figure] {
    @apply relative grid;

    @each $element in 'figcaption', 'div' {
      #{$element}[data-rehype-pretty-code-title] {
        @apply gradient-title main-border absolute left-6 z-10 mt-0 
               block rounded-b-md border-t-0 px-2 text-base font-medium;

        & + div {
          @apply hidden;
        }
      }
    }

    pre {
      padding: 0.75rem 0 !important;

      @apply main-border;

      &[data-theme*=' '],
      &[data-theme*=' '] span {
        color: var(--shiki-light);
        background-color: var(--shiki-light-bg);
      }

      @media (prefers-color-scheme: dark) {
        &[data-theme*=' '],
        &[data-theme*=' '] span {
          color: var(--shiki-dark);
          background-color: var(--shiki-dark-bg);
        }
      }

      code {
        counter-reset: line;

        @apply mt-8;

        .word {
          background: rgba(200, 200, 255, 0.15);

          @apply rounded p-1;
        }

        .line {
          @apply border-l-2 border-transparent px-5 py-0;

          &.highlighted {
            background: rgba(200, 200, 255, 0.1);

            @apply border-l-blue-400;
          }
        }

        &[data-line-numbers] {
          .line::before {
            content: counter(line);
            counter-increment: line;

            @apply mr-4 inline-block w-4 text-right text-slate-600;
          }

          .line.highlighted::before {
            @apply text-slate-800 dark:text-slate-400;
          }
        }
      }
    }
  }
}
