@property --prose-line {
  inherits: true;
  initial-value: 0;
  syntax: "<length>";
}

@layer components {
  .prose {
    @mixin typo_body;

    counter-reset: sec sub tbl fig;

    & > :first-child {
      margin-block-start: var(--size-0);
    }

    & > :last-child {
      margin-block-end: var(--size-0);
    }

    & ::selection {
      color: var(--color-text-on-accent);
      background-color: var(--color-primary);
    }

    /* === Paragraphs === */
    & p {
      @mixin my var(--space-6);
      text-wrap: pretty;
    }

    /* === HEADINGS === */
    & h2 {
      @mixin typo_heading-2;
      @mixin mt var(--space-11);
      @mixin mb var(--space-8);
      @mixin ps var(--size-9);
      counter-set: sub 0 fig 0;
      counter-increment: sec;

      clear: both;
      display: flex;
      flex-direction: column;
      gap: var(--space-4);

      border-inline-start: var(--slot-prose-bar) solid var(--color-text-primary);

      text-wrap: balance;

      &::before {
        @mixin pt var(--space-4);
        content: "§ " counter(sec, upper-roman);

        font-family: var(--font-mono);
        font-size: 0.8125rem;
        font-weight: var(--font-weight-emphasis);
        line-height: 1;
        letter-spacing: var(--tracking-label);
      }
    }

    & h3 {
      @mixin typo_heading-3;
      @mixin mt var(--space-10);
      @mixin mb var(--space-7);
      @mixin py var(--size-3);
      @mixin px var(--size-7);
      counter-increment: sub;

      display: flex;
      gap: var(--size-7);
      align-items: baseline;

      color: var(--color-text-inverse);

      background-color: var(--color-surface-inverse);

      &::before {
        content: counter(sec, upper-roman) "." counter(sub);

        font-family: var(--font-mono);
        font-size: 0.8125rem;
        font-weight: var(--font-weight-emphasis);
        color: var(--color-primary);
      }
    }

    & h4 {
      @mixin typo_heading-4;
      @mixin mt var(--space-9);
      @mixin mb var(--space-6);
      @mixin py var(--size-2);
      border-block: var(--border-shell) solid var(--color-text-primary);
    }

    /* === LISTS === */

    & ul,
    & ol {
      @mixin my var(--space-6);
      @mixin pl var(--size-0);

      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      list-style: none;

      & li {
        --prose-line: 1lh;
        display: grid;
        grid-template-columns: var(--slot-prose-marker) minmax(0, 1fr);
        column-gap: var(--slot-prose-gap);

        & > * {
          grid-column: 2;
        }

        & > ul,
        & > ol {
          @mixin mt var(--space-3);
          @mixin mb var(--size-0);
          gap: var(--space-3);
        }
      }
    }

    & ul {
      & > li {
        &::before {
          content: "";

          justify-self: center;

          width: 0.625rem;
          height: 0.625rem;
          margin-block-start: calc((var(--prose-line) - 0.625rem) / 2);

          background-color: var(--color-text-primary);
        }

        & ul {
          & > li {
            &::before {
              background-color: transparent;
              box-shadow: inset 0 0 0 var(--border-card) var(--color-text-primary);
            }
          }

          & ul {
            & > li {
              &::before {
                height: var(--size-2);
                margin-block-start: calc((var(--prose-line) - var(--size-2)) / 2);
                background-color: var(--color-text-primary);
                box-shadow: none;
              }
            }
          }
        }
      }
    }

    & ol {
      counter-reset: step;

      & > li {
        counter-increment: step;

        &::before {
          content: counter(step, decimal-leading-zero);

          display: grid;
          place-items: center;

          height: 1.375rem;
          margin-block-start: calc((var(--prose-line) - 1.375rem) / 2);

          font-family: var(--font-mono);
          font-size: 0.75rem;
          font-weight: var(--font-weight-emphasis);
          line-height: 1;
          color: var(--color-text-inverse);

          background-color: var(--color-surface-inverse);
        }

        & ol {
          & > li {
            &::before {
              content: counter(step, lower-alpha);
              color: var(--color-text-primary);
              background-color: transparent;
              box-shadow: inset 0 0 0 var(--border-card) var(--color-text-primary);
            }
          }
        }
      }
    }

    /* === QUOTES & RULES === */
    & blockquote {
      @mixin my var(--space-6);
      @mixin ps 3ch;
      font-style: italic;
      color: var(--color-text-secondary);
    }

    & hr {
      @mixin my var(--space-10);
      @mixin border-t var(--border-hairline), solid, var(--color-border-strong);
      border-block-end: none;
      border-inline: none;
    }

    /* === INLINE === */
    & :not(pre) {
      & > code {
        @mixin px var(--space-2);
        @mixin py var(--space-px);
        font-family: var(--font-mono);
        font-size: 0.875em;
        background-color: var(--color-surface-elevated-3);
      }
    }

    & sup {
      font-family: var(--font-mono);
      font-size: 0.7em;
    }

    & pre {
      @mixin typo_code;
      @mixin my var(--space-9);
      @mixin py var(--size-7);
      @mixin px var(--size-8);
      overflow: auto;
      border: var(--border-card) solid var(--color-border-strong);
      tab-size: 2;
      background-color: var(--color-surface-elevated-1);

      & code {
        @mixin pa var (--size-0);
        font: inherit;
        background-color: transparent;
      }
    }

    & a {
      color: var(--color-text-link);
      text-decoration: underline;
      text-decoration-thickness: var(--size-1);
      text-underline-offset: var(--size-2);

      transition: color var(--motion-fast) var(--ease-out);

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

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

      &:focus-visible {
        @mixin focus-ring;
      }
    }

    & em {
      font-style: italic;
    }

    & b,
    & strong {
      font-weight: var(--font-weight-emphasis);
    }

    & mark {
      @mixin px var(--size-1);
      color: var(--color-text-on-accent);
      background-color: var(--color-tertiary);
    }

    & del,
    & s {
      color: var(--color-text-tertiary);
      text-decoration: line-through;
    }

    /* === TABLES === */
    table {
      @mixin typo_table-data;
      @mixin my var(--space-10);
      border-spacing: 0;
      border-collapse: separate;
      width: 100%;

      & th,
      & td {
        @mixin py var(--space-4);
        @mixin px var(--space-6);
        @mixin border-b var(--border-hairline), solid, var(--color-border-subtle);
      }

      & thead {
        & th {
          @mixin typo_table-header;
          @mixin border-b var(--border-card), solid, var(--color-border-strong);
        }
      }

      & tbody {
        & tr {
          &:last-child {
            & :is(th, td) {
              @mixin border-b var(--border-card), solid, var(--color-border-strong);
            }
          }

          &:hover {
            background-color: var(--color-surface-hover);
          }
        }

        & th[scope="row"] {
          font-family: var(--font-header);
          font-weight: var(--font-weight-heading);
          text-transform: uppercase;
        }
      }
    }

    & :is(tfoot, tr.total) {
      & :is(th, td) {
        @mixin border-t var(--border-card), solid, var(--color-border-strong);
      }
    }

    & .num {
      font-variant-numeric: tabular-nums;
      text-align: right;
      white-space: nowrap;
    }

    & .key {
      font-weight: var(--font-weight-emphasis);
    }

    td.text {
      font-family: var(--font-body);
      font-size: 1.077em;
      line-height: 1.55;
      color: var(--color-text-secondary);
      text-wrap: pretty;
    }
  }
}