@layer typography {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply scroll-m-20 font-semibold tracking-tight text-balance;

    &:first-child {
      margin-block-start: 0;
    }
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  h1 {
    @apply text-3xl tracking-tight text-balance mt-10 mb-6;
  }

  h2 {
    @apply text-2xl mt-8 mb-5;
  }

  h3 {
    @apply text-xl mt-6 mb-4;
  }

  h4 {
    @apply text-lg mt-5 mb-3;
  }

  h5 {
    @apply text-lg mt-4 mb-2;
  }

  h6 {
    @apply text-base mt-4 mb-2;
  }

  strong,
  b {
    @apply font-semibold;
  }

  em,
  i {
    @apply italic;
  }

  p {
    @apply mb-4;
  }

  :not(pre) > :is(code, samp) {
    @apply font-mono text-sm py-0.5 px-1 bg-secondary rounded-sm;
  }

  pre {
    @apply font-mono p-4 bg-secondary rounded-md overflow-x-auto mb-4 whitespace-pre;

    & code {
      @apply text-sm select-all;
    }
  }

  blockquote {
    @apply border-s-4 ps-4 my-4 italic text-muted-foreground;
  }

  hr {
    @apply my-8;
  }

  ul {
    @apply list-disc ps-6 mb-4;

    & li {
      @apply mb-1;
    }
  }

  ol {
    @apply list-decimal ps-6 mb-4;

    & li {
      @apply mb-1;
    }
  }

  a[href]:not(:is(.button, .item)) {
    @apply inline-block text-foreground underline underline-offset-4 transition-all duration-100;

    &:active {
      @apply translate-y-px;
    }
  }

  kbd {
    @apply bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3;
  }

  s,
  del {
    @apply text-muted-foreground;
  }

  u,
  ins,
  abbr,
  a[href] {
    @apply underline-offset-4 decoration-primary/20;

    &:is(a[href]):hover {
      @apply text-primary decoration-primary;
    }
  }
}