@use "../functions" as *;
@use "../mixins/tokens" as *;
@use "../mixins/transition" as *;

// stylelint-disable custom-property-no-missing-var-function
$prose-tokens: () !default;

// scss-docs-start prose-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$prose-tokens: defaults(
  (
    --content-font-size: 1rem,
    --content-line-height: 1.5,
    --content-gap: calc(var(--content-font-size) * var(--content-line-height)),
    --heading-color: light-dark(var(--gray-900), var(--white)),
  ),
  $prose-tokens
);
// scss-docs-end prose-tokens
// stylelint-enable custom-property-no-missing-var-function

@layer content {
  .prose {
    @include tokens($prose-tokens);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
    max-width: 1000px;
    margin-inline: auto;
    font-size: var(--content-font-size);
    line-height: var(--content-line-height);

    @media (width >= 1024px) {
      --content-font-size: var(--font-size-md);
      --content-line-height: 1.625;
      // --content-gap: calc(var(--content-font-size) * var(--content-line-height));
    }

    :where(p, ul, ol, dl, pre, table, blockquote):not(:where(.not-prose, .not-prose *)) {
      margin-block: 0;
    }

    :where(ul, ol):not([class], :where(.not-prose, .not-prose *)) li:not(:last-child) {
      margin-bottom: calc(var(--content-gap) / 4);
    }

    :where(li ul, li ol):not(:where(.not-prose, .not-prose *)) {
      margin-top: calc(var(--content-gap) / 4);
    }

    :where(hr):not(:where(.not-prose, .not-prose *)) {
      margin: calc(var(--content-gap) * 1.5) 0;
      border: 0;
      border-block-start: var(--border-width) solid var(--hr-border-color);
    }

    :where(h1, h2, h3, h4, h5, h6):not([class], :where(.not-prose, .not-prose *)) {
      margin-top: 0;
      margin-bottom: calc(var(--content-gap) / -2);
      font-weight: 500;
      line-height: 1.25;

      code {
        font-weight: 600;
        color: inherit;
      }
    }

    :where(h1, h2):not(:first-child, :where(.not-prose, .not-prose *)) {
      margin-top: calc(var(--content-gap) * .75);
    }

    :where(h3, h4, h5, h6):not(:first-child, :where(.not-prose, .not-prose *)) {
      margin-top: calc(var(--content-gap) * .5);
    }

    :where(h1):not(:where(.not-prose, .not-prose *)) {
      font-size: 2.25em;
      line-height: 1.1;
    }
    :where(h2):not(:where(.not-prose, .not-prose *)) {
      font-size: 1.75em;
    }
    :where(h3):not(:where(.not-prose, .not-prose *)) {
      font-size: 1.5em;
    }
    :where(h4):not(:where(.not-prose, .not-prose *)) {
      font-size: 1.25em;
    }
    :where(h5):not(:where(.not-prose, .not-prose *)) {
      font-size: 1.125em;
    }
    :where(h6):not(:where(.not-prose, .not-prose *)) {
      font-size: 1em;
    }

    :where(a:not([class])):not(:where(.not-prose, .not-prose *)) {
      color: var(--link-color);
      text-decoration: underline;
      text-decoration-color: color-mix(in srgb, var(--link-color) 25%, transparent);
      text-underline-offset: 4px;
      @include transition(.1s text-decoration-color ease-in-out);

      &:hover {
        text-decoration-color: var(--link-hover-color);
      }
    }

    :where(img):not(:where(.not-prose, .not-prose *)) {
      max-width: 100%;
    }

    :where(blockquote):not(:where(.not-prose, .not-prose *)) {
      padding-inline-start: calc(var(--content-gap) / 2);
      margin: 0;
      border-inline-start: 4px solid var(--border-color);
    }

    :where(table):not(:where(.not-prose, .not-prose *)) {
      width: 100%;
      border-spacing: 0;
      border-collapse: collapse;
    }

    :where(table:not([class])):not(:where(.not-prose, .not-prose *)) {
      td,
      th {
        padding: 6px 12px;
        text-align: inherit;
        border: 1px solid var(--border-color);
      }
    }

    :where(dt):not(:where(.not-prose, .not-prose *)) {
      font-weight: 500;
    }

    :where(video, img):not(:where(.not-prose, .not-prose *)) {
      max-width: 100%;
    }
  }
}