@use "../abstracts/mixins" as m;

// Main `.prose` component.
// Define colors via native CSS variables and structural styles
// that do not depend on font size or breakpoints.
.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;

  @include m.prose-el('[class~="lead"]') {
    color: var(--tw-prose-lead);
  }

  @include m.prose-el("a") {
    color: var(--tw-prose-links);
    text-decoration: underline;
    font-weight: 500;
  }

  @include m.prose-el("strong") {
    color: var(--tw-prose-bold);
    font-weight: 600;
  }

  @include m.prose-el("a strong, blockquote strong, thead th strong") {
    color: inherit;
  }

  // --- Lists ---
  @include m.prose-el("ol") {
    list-style-type: decimal;
  }
  @include m.prose-el('ol[type="A"], ol[type="A" s]') {
    list-style-type: upper-alpha;
  }
  @include m.prose-el('ol[type="a"], ol[type="a" s]') {
    list-style-type: lower-alpha;
  }
  @include m.prose-el('ol[type="I"], ol[type="I" s]') {
    list-style-type: upper-roman;
  }
  @include m.prose-el('ol[type="i"], ol[type="i" s]') {
    list-style-type: lower-roman;
  }
  @include m.prose-el('ol[type="1"]') {
    list-style-type: decimal;
  }

  @include m.prose-el("ul") {
    list-style-type: disc;
  }

  @include m.prose-el("ol > li::marker") {
    font-weight: 400;
    color: var(--tw-prose-counters);
  }

  @include m.prose-el("ul > li::marker") {
    color: var(--tw-prose-bullets);
  }

  // --- Graphic elements ---
  @include m.prose-el("dt") {
    color: var(--tw-prose-headings);
    font-weight: 600;
  }

  @include m.prose-el("hr") {
    border-color: var(--tw-prose-hr);
    border-top-width: 1px;
    margin-top: 3em;
    margin-bottom: 3em;
  }

  @include m.prose-el("blockquote") {
    font-weight: 500;
    font-style: italic;
    color: var(--tw-prose-quotes);
    border-inline-start-width: 0.25rem;
    border-inline-start-color: var(--tw-prose-quote-borders);
    quotes: "\201C" "\201D" "\2018" "\2019";
  }

  @include m.prose-el("blockquote p:first-of-type::before") {
    content: open-quote;
  }
  @include m.prose-el("blockquote p:last-of-type::after") {
    content: close-quote;
  }

  // --- Headings ---
  @include m.prose-el("h1") {
    color: var(--tw-prose-headings);
    font-weight: 800;
  }
  @include m.prose-el("h1 strong") {
    font-weight: 900;
    color: inherit;
  }
  @include m.prose-el("h2") {
    color: var(--tw-prose-headings);
    font-weight: 700;
  }
  @include m.prose-el("h2 strong") {
    font-weight: 800;
    color: inherit;
  }
  @include m.prose-el("h3") {
    color: var(--tw-prose-headings);
    font-weight: 600;
  }
  @include m.prose-el("h3 strong") {
    font-weight: 700;
    color: inherit;
  }
  @include m.prose-el("h4") {
    color: var(--tw-prose-headings);
    font-weight: 600;
  }
  @include m.prose-el("h4 strong") {
    font-weight: 700;
    color: inherit;
  }

  // --- Media ---
  @include m.prose-el("picture") {
    display: block;
  }

  // --- Code ---
  @include m.prose-el("kbd") {
    font-weight: 500;
    font-family: inherit;
    color: var(--tw-prose-kbd);
    box-shadow:
      0 0 0 1px var(--tw-prose-kbd-shadows),
      0 3px 0 var(--tw-prose-kbd-shadows);
  }

  @include m.prose-el("code") {
    color: var(--tw-prose-code);
    font-weight: 600;
  }
  @include m.prose-el("code::before, code::after") {
    content: "`";
  }

  @include m.prose-el(
    "a code, h1 code, h2 code, h3 code, h4 code, blockquote code, thead th code"
  ) {
    color: inherit;
  }

  @include m.prose-el("pre") {
    color: var(--tw-prose-pre-code);
    background-color: var(--tw-prose-pre-bg);
    overflow-x: auto;
    font-weight: 400;
  }

  @include m.prose-el("pre code") {
    background-color: transparent;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-weight: inherit;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
  }

  @include m.prose-el("pre code::before, pre code::after") {
    content: none;
  }

  // --- Tables ---
  @include m.prose-el("table") {
    width: 100%;
    table-layout: auto;
    margin-top: 2em;
    margin-bottom: 2em;
  }
  @include m.prose-el("thead") {
    border-bottom-width: 1px;
    border-bottom-color: var(--tw-prose-th-borders);
  }
  @include m.prose-el("thead th") {
    color: var(--tw-prose-headings);
    font-weight: 600;
    vertical-align: bottom;
  }
  @include m.prose-el("tbody tr") {
    border-bottom-width: 1px;
    border-bottom-color: var(--tw-prose-td-borders);
  }
  @include m.prose-el("tbody tr:last-child") {
    border-bottom-width: 0;
  }
  @include m.prose-el("tbody td") {
    vertical-align: baseline;
  }
  @include m.prose-el("tfoot") {
    border-top-width: 1px;
    border-top-color: var(--tw-prose-th-borders);
  }
  @include m.prose-el("tfoot td") {
    vertical-align: top;
  }
  @include m.prose-el("th, td") {
    text-align: start;
  }
}