@use "../config" as *;
@use "../mixins/transition" as *;

@layer content {
  .prose {
    --#{$prefix}content-font-size: 16px;
    --#{$prefix}content-gap: 24px;
    --#{$prefix}heading-color: light-dark(var(--bs-gray-900), var(--bs-white));

    position: relative;
    max-width: 1000px;
    margin-inline: auto;
    font-size: var(--#{$prefix}content-font-size);
    line-height: var(--#{$prefix}content-gap);

    p,
    ul,
    ol,
    dl,
    pre,
    table,
    blockquote {
      margin-bottom: var(--#{$prefix}content-gap);
    }

    li:not(:last-child) {
      margin-bottom: calc(var(--#{$prefix}content-gap) / 4);
    }

    li ul,
    li ol {
      margin-top: calc(var(--#{$prefix}content-gap) / 4);
    }

    hr {
      margin: calc(var(--#{$prefix}content-gap) * 1.5) 0;
      border: 0;
      border-top: 1px solid var(--#{$prefix}border-color);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      --bs-heading-color: var(--bs-emphasis-color);

      margin-top: 0;
      margin-bottom: calc(var(--#{$prefix}content-gap) / 2);
      font-weight: 500;
      line-height: 1.25;
    }

    h1,
    h2 {
      &:not(:first-child) {
        margin-top: calc(var(--#{$prefix}content-gap) * 1.5);
      }
    }

    h3,
    h4,
    h5,
    h6 {
      &:not(:first-child) {
        margin-top: calc(var(--#{$prefix}content-gap) * 1.25);
      }
    }

    h1 {
      font-size: 2.25em;
      line-height: 1.1;
    }
    h2 {
      font-size: 1.75em;
    }
    h3 {
      margin-bottom: calc(var(--#{$prefix}content-gap) / 4);
      font-size: 1.5em;
    }
    h4 {
      font-size: 1.25em;
    }
    h5 {
      font-size: 1.125em;
    }
    h6 {
      font-size: 1em;
    }

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

    a:not([class]):hover {
      text-decoration-color: var(--#{$prefix}link-hover-color);
    }

    img {
      max-width: 100%;
    }

    blockquote {
      padding-left: calc(var(--#{$prefix}content-gap) / 2);
      margin: 0;
      border-left: 4px solid var(--#{$prefix}border-color);
    }

    table {
      width: 100%;
      border-spacing: 0;
      border-collapse: collapse;
    }

    td,
    th {
      padding: 6px 12px;
      text-align: inherit;
      border: 1px solid var(--#{$prefix}border-color);
    }


    dt {
      font-weight: 500;
    }

    video,
    img {
      max-width: 100%;
    }
  }
}