@layer base {
  :root {
    @apply scroll-smooth;
  }

  ::view-transition-new(root) {
    @apply animate-turn-off;
  }

  ::view-transition-old(root) {
    animation: none;
  }

  [data-theme='dark']::view-transition-new(root) {
    @apply animate-turn-on;
  }

  *,
  ::after,
  ::before {
    @apply border-overlay;
  }

  html {
    color-scheme: light dark;
  }

  html[data-theme='light'] {
    color-scheme: light;
  }

  html[data-theme='dark'] {
    color-scheme: dark;
  }

  body {
    @apply bg-base text-text mx-auto! flex min-h-screen max-w-2xl flex-col px-4 font-sans font-medium tabular-nums antialiased;
    @apply selection:bg-overlay;
  }

  h2,
  h3 {
    @apply scroll-mt-8;
  }

  pre[data-language] {
    @apply p-0!;

    code {
      @apply py-3!;
    }

    span[data-line=''] {
      @apply px-4;
    }
  }

  code {
    @apply bg-overlay rounded-md px-1 py-0.5;

    &::before,
    &::after {
      @apply content-none!;
    }
  }

  code[data-theme],
  code[data-theme] span {
    @apply font-medium;
    color: light-dark(var(--shiki-light), var(--shiki-dark));
  }

  span[data-highlighted-line] {
    @apply bg-base border-l-2;
  }

  blockquote {
    @apply text-subtle!;

    p {
      &:first-child::before,
      &:last-child::after {
        @apply content-none!;
      }
    }
  }
}
