{"version":3,"file":"Typography.module.mjs","names":[],"sources":["../../../src/components/Typography/Typography.module.css"],"sourcesContent":[".root {\n  & :first-child {\n    margin-top: 0;\n  }\n\n  & :last-child {\n    margin-bottom: 0;\n  }\n\n  & :where(h1, h2, h3, h4, h5, h6) {\n    margin-bottom: var(--mantine-spacing-xs);\n    text-wrap: var(--mantine-heading-text-wrap);\n    font-family: var(--mantine-font-family-headings);\n  }\n\n  & :where(h1) {\n    margin-top: calc(1.5 * var(--mantine-spacing-xl));\n    font-size: var(--mantine-h1-font-size);\n    line-height: var(--mantine-h1-line-height);\n    font-weight: var(--mantine-h1-font-weight);\n  }\n\n  & :where(h2) {\n    margin-top: var(--mantine-spacing-xl);\n    font-size: var(--mantine-h2-font-size);\n    line-height: var(--mantine-h2-line-height);\n    font-weight: var(--mantine-h2-font-weight);\n  }\n\n  & :where(h3) {\n    margin-top: calc(0.8 * var(--mantine-spacing-xl));\n    font-size: var(--mantine-h3-font-size);\n    line-height: var(--mantine-h3-line-height);\n    font-weight: var(--mantine-h3-font-weight);\n  }\n\n  & :where(h4) {\n    margin-top: calc(0.8 * var(--mantine-spacing-xl));\n    font-size: var(--mantine-h4-font-size);\n    line-height: var(--mantine-h4-line-height);\n    font-weight: var(--mantine-h4-font-weight);\n  }\n\n  & :where(h5) {\n    margin-top: calc(0.5 * var(--mantine-spacing-xl));\n    font-size: var(--mantine-h5-font-size);\n    line-height: var(--mantine-h5-line-height);\n    font-weight: var(--mantine-h5-font-weight);\n  }\n\n  & :where(h6) {\n    margin-top: calc(0.5 * var(--mantine-spacing-xl));\n    font-size: var(--mantine-h6-font-size);\n    line-height: var(--mantine-h6-line-height);\n    font-weight: var(--mantine-h6-font-weight);\n  }\n\n  & :where(img) {\n    max-width: 100%;\n    margin-bottom: var(--mantine-spacing-xs);\n  }\n\n  & :where(p) {\n    margin-top: 0;\n    margin-bottom: var(--mantine-spacing-lg);\n  }\n\n  & :where(mark) {\n    @mixin where-light {\n      background-color: var(--mantine-color-yellow-2);\n      color: inherit;\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-yellow-5);\n      color: var(--mantine-color-black);\n    }\n  }\n\n  & :where(a) {\n    color: var(--mantine-color-anchor);\n    text-decoration: none;\n\n    @mixin hover {\n      text-decoration: underline;\n    }\n  }\n\n  & :where(hr) {\n    margin-top: var(--mantine-spacing-md);\n    margin-bottom: var(--mantine-spacing-md);\n    border: 0;\n    border-top: 1px solid;\n\n    @mixin where-light {\n      border-color: var(--mantine-color-gray-3);\n    }\n\n    @mixin where-dark {\n      border-color: var(--mantine-color-dark-3);\n    }\n  }\n\n  & :where(pre) {\n    padding: var(--mantine-spacing-xs);\n    line-height: var(--mantine-line-height);\n    margin: 0;\n    margin-top: var(--mantine-spacing-md);\n    margin-bottom: var(--mantine-spacing-md);\n    overflow-x: auto;\n    font-family: var(--mantine-font-family-monospace);\n    font-size: var(--mantine-font-size-xs);\n    border-radius: var(--mantine-radius-sm);\n\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-8);\n    }\n\n    & :where(code) {\n      background-color: transparent;\n      padding: 0;\n      border-radius: 0;\n      color: inherit;\n      border: 0;\n    }\n  }\n\n  & :where(kbd) {\n    --kbd-fz: 12px;\n    --kbd-padding: 3px 5px;\n\n    font-family: var(--mantine-font-family-monospace);\n    line-height: var(--mantine-line-height);\n    font-weight: var(--mantine-font-weight-bold);\n    padding: var(--kbd-padding);\n    font-size: var(--kbd-fz);\n    border-radius: var(--mantine-radius-sm);\n    border: 1px solid;\n    border-bottom-width: 3px;\n\n    @mixin where-light {\n      border-color: var(--mantine-color-gray-3);\n      color: var(--mantine-color-gray-7);\n      background-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin where-dark {\n      border-color: var(--mantine-color-dark-3);\n      color: var(--mantine-color-dark-0);\n      background-color: var(--mantine-color-dark-5);\n    }\n  }\n\n  & :where(code) {\n    line-height: var(--mantine-line-height);\n    padding: 1px 5px;\n    border-radius: var(--mantine-radius-sm);\n    font-family: var(--mantine-font-family-monospace);\n    font-size: var(--mantine-font-size-xs);\n\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n      color: var(--mantine-color-black);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-5);\n      color: var(--mantine-color-white);\n    }\n  }\n\n  & :where(ul, ol):not([data-type='taskList']) {\n    margin-bottom: var(--mantine-spacing-md);\n    padding-inline-start: var(--mantine-spacing-xl);\n    list-style-position: outside;\n  }\n\n  & :where(table) {\n    width: 100%;\n    border-collapse: collapse;\n    caption-side: bottom;\n    margin-bottom: var(--mantine-spacing-md);\n\n    @mixin where-light {\n      --table-border-color: var(--mantine-color-gray-3);\n    }\n\n    @mixin where-dark {\n      --table-border-color: var(--mantine-color-dark-4);\n    }\n\n    & :where(caption) {\n      margin-top: var(--mantine-spacing-xs);\n      font-size: var(--mantine-font-size-sm);\n      color: var(--mantine-color-dimmed);\n    }\n\n    & :where(th) {\n      text-align: start;\n      font-weight: bold;\n      font-size: var(--mantine-font-size-sm);\n      padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);\n    }\n\n    & :where(thead th) {\n      border-bottom: 1px solid;\n      border-color: var(--table-border-color);\n    }\n\n    & :where(tfoot th) {\n      border-top: 1px solid;\n      border-color: var(--table-border-color);\n    }\n\n    & :where(td) {\n      padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);\n      border-bottom: 1px solid;\n      border-color: var(--table-border-color);\n      font-size: var(--mantine-font-size-sm);\n    }\n\n    & :where(tr:last-of-type td) {\n      border-bottom: 0;\n    }\n  }\n\n  & :where(details) {\n    margin-bottom: var(--mantine-spacing-md);\n    padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);\n    border: 1px solid var(--details-border-color);\n    border-radius: var(--mantine-radius-default);\n\n    @mixin where-light {\n      --details-border-color: var(--mantine-color-gray-3);\n      --details-summary-hover: var(--mantine-color-gray-1);\n    }\n\n    @mixin where-dark {\n      --details-border-color: var(--mantine-color-dark-4);\n      --details-summary-hover: var(--mantine-color-dark-5);\n    }\n\n    /* The native marker is hidden and replaced with a small triangle control so only the control –\n       not the whole summary text – gets the hover affordance, matching the editor toggle button. */\n    & :where(summary) {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: var(--mantine-spacing-xs);\n      cursor: pointer;\n      font-weight: 600;\n      list-style: none;\n    }\n\n    & :where(summary)::-webkit-details-marker {\n      display: none;\n    }\n\n    /* Control box: reserves space for the triangle and carries the hover background. */\n    & :where(summary)::before {\n      content: '';\n      flex-shrink: 0;\n      width: 1.25rem;\n      height: calc(1em * var(--mantine-line-height));\n      border-radius: var(--mantine-radius-sm);\n    }\n\n    & :where(summary:hover)::before {\n      background-color: var(--details-summary-hover);\n    }\n\n    /* Disclosure triangle centered over the control box (7px = half of the 20px box minus the 6px\n       triangle); rotates to point down when the details is open. */\n    & :where(summary)::after {\n      content: '';\n      position: absolute;\n      inset-inline-start: rem(7px);\n      top: 50%;\n      width: 0;\n      height: 0;\n      border-style: solid;\n      border-width: 5px 0 5px 6px;\n      border-color: transparent transparent transparent currentColor;\n      transform: translateY(-50%);\n    }\n\n    &:where([open]) > :where(summary)::after {\n      transform: translateY(-50%) rotate(90deg);\n    }\n\n    & > :where(*:last-child) {\n      margin-bottom: 0;\n    }\n  }\n\n  & :where(blockquote) {\n    font-size: var(--mantine-font-size-lg);\n    line-height: var(--mantine-line-height);\n    margin: var(--mantine-spacing-md) 0;\n    border-radius: var(--mantine-radius-sm);\n    padding: var(--mantine-spacing-md) var(--mantine-spacing-lg);\n\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-8);\n    }\n  }\n}\n"],"mappings":""}