/* Inspired by: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/app/typography.css */

.prose {
  --prose-color: var(--text-color);
  --prose-heading-color: var(--heading-color);
  --prose-heading-font-family: var(--font-serif);
  --prose-strong-color: light-dark(var(--color-stone-950), var(--color-stone-100));
  --prose-link-color: light-dark(var(--color-stone-950), var(--color-stone-100));
  --prose-code-color: light-dark(var(--color-stone-950), var(--color-stone-100));
  --prose-marker-color: color-mix(in oklab, var(--text-color) 50%, transparent);
  --prose-link-underline-color: light-dark(var(--color-stone-950), var(--color-stone-100));
  --prose-th-borders: var(--color-stone-300);
  --prose-td-borders: var(--color-stone-200);
  --prose-hr-color: color-mix(in oklab, light-dark(var(--color-stone-950), var(--color-stone-100)) 5%, transparent);
  --prose-blockquote-border-color: var(--color-stone-300);

  color: var(--prose-color);
  font-size: var(--text-lg);
  line-height: 2;

  *:where(:not(.not-prose, .not-prose *)) + *:where(:not(.not-prose, .not-prose *)) {
    margin-top: calc(var(--spacing) * 6);
  }

  h1:where(:not(.not-prose, .not-prose *)) {
    font-size: var(--text-5xl);
    line-height: calc(28 / 18);
    letter-spacing: -0.025em;
    color: var(--prose-heading-color);
    font-weight: var(--font-weight-semibold);
    margin-top: calc(var(--spacing) * 20);
  }

  h2:where(:not(.not-prose, .not-prose *)) {
    font-size: var(--text-2xl);
    line-height: calc(28 / 18);
    letter-spacing: -0.025em;
    color: var(--prose-code-color);
    font-weight: var(--font-weight-semibold);
    margin-top: calc(var(--spacing) * 20);
  }

  h3:where(:not(.not-prose, .not-prose *)) {
    font-size: var(--text-lg);
    line-height: calc(28 / 18);
    color: var(--prose-heading-color);
    font-weight: var(--font-weight-semibold);
    margin-top: calc(var(--spacing) * 16);
  }

  h2 + h3:where(:not(.not-prose, .not-prose *)) {
    margin-top: calc(var(--spacing) * 6);
  }

  h4:where(:not(.not-prose, .not-prose *)) {
    font-size: var(--text-base);
    line-height: calc(28 / 14);
    color: var(--prose-heading-color);
    font-weight: var(--font-weight-semibold);
    margin-top: calc(var(--spacing) * 12);
  }
  :is(h1):where(:not(.not-prose, .not-prose *)) {
    font-family: var(--prose-heading-font-family);
  }
  :is(h2, h3, h4):where(:not(.not-prose, .not-prose *)) {
    font-family: var(--prose-heading-font-family);
    scroll-margin-top: calc(var(--spacing) * 32);
    @variant lg {
      scroll-margin-top: calc(var(--spacing) * 18);
    }
  }

  ol:where(:not(.not-prose, .not-prose *)) {
    padding-left: calc(var(--spacing) * 6);
    list-style-type: decimal;
  }

  ol li:where(:not(.not-prose, .not-prose *)) {
    padding-left: calc(var(--spacing) * 3);
  }

  ol li + li:where(:not(.not-prose, .not-prose *)) {
    margin-top: calc(var(--spacing) * 4);
  }

  ol li:where(:not(.not-prose, .not-prose *))::marker {
    font-weight: 600;
    color: var(--prose-strong-color);
  }

  ul:where(:not(.not-prose, .not-prose *)) {
    padding-left: calc(var(--spacing) * 6);
    list-style-type: square;
  }

  ul li:where(:not(.not-prose, .not-prose *)) {
    padding-left: calc(var(--spacing) * 3);
  }

  ul li + li:where(:not(.not-prose, .not-prose *)) {
    margin-top: calc(var(--spacing) * 4);
  }

  ul li:where(:not(.not-prose, .not-prose *))::marker {
    color: var(--prose-marker-color);
  }

  a:not(:where(:is(h2, h3, h4) *)):where(:not(.not-prose, .not-prose *)) {
    color: var(--prose-link-color);
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--prose-link-underline-color);
    text-decoration-thickness: 1px;
    word-break: break-word;
    & code {
      font-weight: var(--font-weight-semibold);
    }
  }

  a:hover:where(:not(.not-prose, .not-prose *)) {
    text-decoration-thickness: 2px;
  }

  strong:where(:not(.not-prose, .not-prose *)) {
    color: var(--prose-strong-color);
    font-weight: var(--font-weight-semibold);
  }

  code:where(:not(.not-prose, .not-prose *)) {
    font-variant-ligatures: none;
    font-family: var(--font-mono);
    font-weight: var(--font-weight-medium);
    color: var(--prose-code-color);
    word-break: break-word;
  }

  :where(h2, h3, h4) code:where(:not(.not-prose, .not-prose *)) {
    font-weight: var(--font-weight-semibold);
  }

  code:where(:not(.not-prose, .not-prose *))::before,
  code:where(:not(.not-prose, .not-prose *))::after {
    display: inline;
    content: "`";
  }

  pre:where(:not(.not-prose, .not-prose *)) {
    margin-top: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 10);
    overflow-x: auto;
    overflow-inline: auto;
    border-radius: var(--radius-sm);
    line-height: 1;
  }

  pre code * + *:where(:not(.not-prose, .not-prose *)) {
    margin-top: 0;
  }

  pre code:where(:not(.not-prose, .not-prose *))::before,
  pre code:where(:not(.not-prose, .not-prose *))::after {
    content: none;
  }

  pre code:where(:not(.not-prose, .not-prose *)) {
    font-variant-ligatures: none;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    line-height: 2;
  }

  table:where(:not(.not-prose, .not-prose *)) {
    width: 100%;
    table-layout: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: var(--text-sm);
    line-height: 1.4;
  }

  thead:where(:not(.not-prose, .not-prose *)) {
    border-bottom-width: 1px;
    border-bottom-color: var(--prose-th-borders);
  }

  thead th:where(:not(.not-prose, .not-prose *)) {
    color: var(--prose-heading-color);
    font-weight: 600;
    vertical-align: bottom;
    padding-inline-end: 0.6em;
    padding-bottom: 0.8em;
    padding-inline-start: 0.6em;
  }

  thead th:first-child:where(:not(.not-prose, .not-prose *)) {
    padding-inline-start: 0;
  }

  thead th:last-child:where(:not(.not-prose, .not-prose *)) {
    padding-inline-end: 0;
  }

  tbody tr:where(:not(.not-prose, .not-prose *)) {
    border-bottom-width: 1px;
    border-bottom-color: var(--prose-td-borders);
  }

  tbody tr:last-child:where(:not(.not-prose, .not-prose *)) {
    border-bottom-width: 0;
  }

  tbody td:where(:not(.not-prose, .not-prose *)) {
    vertical-align: baseline;
  }

  tfoot:where(:not(.not-prose, .not-prose *)) {
    border-top-width: 1px;
    border-top-color: var(--prose-th-borders);
  }

  tfoot td:where(:not(.not-prose, .not-prose *)) {
    vertical-align: top;
  }

  tbody td:where(:not(.not-prose, .not-prose *)),
  tfoot td:where(:not(.not-prose, .not-prose *)) {
    padding-top: 0.8em;
    padding-inline-end: 0.6em;
    padding-bottom: 0.8em;
    padding-inline-start: 0.6em;
  }

  tbody td:first-child:where(:not(.not-prose, .not-prose *)),
  tfoot td:first-child:where(:not(.not-prose, .not-prose *)) {
    padding-inline-start: 0;
  }

  tbody td:last-child:where(:not(.not-prose, .not-prose *)),
  tfoot td:last-child:where(:not(.not-prose, .not-prose *)) {
    padding-inline-end: 0;
  }

  th:where(:not(.not-prose, .not-prose *)),
  td:where(:not(.not-prose, .not-prose *)) {
    text-align: start;
  }

  td code:where(:not(.not-prose, .not-prose *)) {
    font-size: 0.8125rem;
  }

  hr:where(:not(.not-prose, .not-prose *)) {
    border-color: var(--prose-hr-color);
    margin-block: --spacing(16);
    & + h2 {
      margin-top: --spacing(16);
    }
  }

  blockquote:where(:not(.not-prose, .not-prose *)) {
    font-style: italic;
    border-inline-start-width: 0.25rem;
    border-inline-start-color: var(--prose-blockquote-border-color);
    padding-inline-start: calc(var(--spacing) * 4);
  }

  figure:where(:not(.not-prose, .not-prose *)) {
    figcaption:where(:not(.not-prose, .not-prose *)) {
      margin-top: calc(var(--spacing) * 3);
      text-align: center;
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
      font-style: italic;
      color: color-mix(in oklab, var(--prose-color) 75%, transparent);
    }
  }

  :first-child:where(:not(.not-prose, .not-prose *)) {
    margin-top: 0;
  }

  :last-child:where(:not(.not-prose, .not-prose *)) {
    margin-bottom: 0;
  }
}