/* Indux Typography */

@layer base {

    /* All text elements */
    :where(a, abbr, address, blockquote, code, del, figcaption, h1, h2, h3, h4, h5, h6, ins, label:not(.avatar, :has([type=file], [type=search])), legend, p, small, cite, q), .h1, .h2, .h3, .h4, .h5, .h6, .paragraph, .small, .caption, .label {

        /* Support inline icons */
        &:where(:has( [x-icon])) {
            display: inline-flex;
            align-items: center;
            
            /* Inline icon spacing */
            & [x-icon] {
                margin-inline-end: 0.5ch;
            }
        }

        /* Inline span alignment */
        & span {
            vertical-align: inherit
        }
    }

    /* Headings */
    :where(h1, h2, h3, h4, h5, h6), .h1, .h2, .h3, .h4, .h5, .h6 {
        font-weight: bolder;
        word-wrap: break-word
    }

    :where(h1, h2, h3, h4), .h1, .h2, .h3, .h4 {
        font-weight: 700;
    }

    :where(h1, h2, h3), .h1, .h2, .h3 {
        letter-spacing: -0.025em
    }

    :where(h1), .h1 {
        font-size: 2.25rem;
        line-height: 1.25
    }

    :where(h2), .h2 {
        font-size: 1.5rem
    }

    :where(h3), .h3 {
        font-size: 1.25rem;
        line-height: 1.4
    }

    :where(h4), .h4 {
        font-size: 1rem
    }

    :where(h5), .h5 {
        font-weight: 600;
        font-size: .875rem;
        line-height: 1rem;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
    }

    :where(h6), .h6 {
        font-weight: 600;
        font-size: 0.8125rem;
        line-height: 1.4;
        text-transform: uppercase;
    }

    /* Paragraphs */
    :where(p), .paragraph {
        line-height: 1.6;
    }

    /* Links */
    :where(a:not([role=button]), button.link) {
        text-decoration: underline;
        text-underline-offset: 2px;
        cursor: pointer;
        transition: var(--transition, all .05s ease-in-out);

        &:hover {
            color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
        }

        &:active {
            color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
        }
    }

    /* Blockquotes */
    :where(blockquote) {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: calc(var(--spacing, 0.25rem) * 4) 0;
        padding: 0 calc(var(--spacing, 0.25rem) * 4);
        color: var(--color-content-stark, oklch(16.6% 0.026 267));
        border-inline-start: 0.25rem solid color-mix(in oklch, var(--color-content-stark, oklch(16.6% 0.026 267)) 25%, transparent);
        border-inline-end: none;

        & * {
            color: inherit
        }
    }

    /* Inline code */
    :where(code) {
        display: inline-block;
        width: fit-content;
        height: fit-content;
        padding: 0.1ch 0.5ch;
        font-size: 82.5%;
        word-wrap: break-word;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
        background-color: color-mix(in oklch, var(--color-content-neutral, oklch(48.26% 0.0365 255.09)) 10%, transparent);
        border: 1px solid color-mix(in oklch, var(--color-content-subtle, oklch(67.4% 0.0318 251.27)) 10%, transparent);
        border-radius: var(--radius, 0.5rem)
    }

    /* Captions */
    :where(figcaption), .caption {
        font-size: 0.8125rem;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));

        & a {
            font-weight: inherit;
            color: inherit
        }
    }

    :where(figure figcaption) {
        margin: calc(var(--spacing, 0.25rem) * 2) auto;
        text-align: center
    }

    /* Small text */
    :where(small), .small {
        font-size: 0.875rem;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
    }

    /* Icons */
    :where([x-icon]) {
        display: inline-flex
    }

    /* Inserted text */
    :where(ins) {
        text-decoration: none
    }

    /* Keyboard text */
    :where(kbd), .kbd {
        display: inline-block;
        vertical-align: baseline;
        width: fit-content;
        min-width: 1.4rem;
        padding: 0.3rem;
        font-family: inherit;
        font-size: 75%;
        font-weight: 600;
        line-height: 1;
        text-align: center;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
        background-color: color-mix(in oklch, var(--color-content-neutral, oklch(48.26% 0.0365 255.09)) 10%, transparent);
        border-radius: calc(var(--radius, 0.5rem) / 1.5);

        &:not(:last-of-type) {
            margin-inline-end: 1px
        }
    }

    /* RTL keyboard overrides */
    [dir=rtl] :where(kbd:not(:last-of-type), .kbd:not(:last-of-type)) {
        margin-inline-start: 1px;
        margin-inline-end: 0
    }

    /* Labels */
    :where(label), .label {
        width: -moz-fit-content;
        width: fit-content;
        user-select: none
    }

    /* Legends */
    :where(legend), .legend {
        display: block;
        max-width: 100%;
        white-space: normal
    }

    /* Badges */
    :where(mark), .badge {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 0.25rem;
        width: fit-content;
        height: fit-content;
        padding: var(--spacing, 0.25rem) calc(var(--spacing, 0.25rem) * 1.5);
        font-weight: 500;
        font-size: 0.75rem;
        line-height: 1;
        color: var(--color-field-inverse, oklch(16.6% 0.026 267));
        background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
        border-radius: 100px;

        /* Solo icons */
        &:has(svg:only-child) {
            padding: var(--spacing, 0.25rem) calc(var(--spacing, 0.25rem) * 1);
        }
    }

    /* Lists */
    :where(ol):not(nav ol):not(menu ol) {
        list-style-type: decimal;
    }

    :where(ul):not(nav ul):not(menu ul) {
        list-style-type: disc;
    }

    :where(ol):not(nav ol):not(menu ol),
    :where(ul):not(nav ul):not(menu ul) {

        &:not(:has(input[type=checkbox])) {
            padding-inline-start: 1.75ch;
        }

        /* Offset items so markers align inside the element frame  */
        & li {
            padding-inline-start: 1ch;

            /* Space out items */
            &:not(:last-of-type) {
                margin-bottom: 1.25ch
            }

            /* Allow icons to replace markers */
            &:has([x-icon]) {
                position: relative;
                display: inherit;
                list-style: none;

                & [x-icon] {
                    position: absolute;
                    top: 0.45ch;
                    left: -1.75ch
                }
            }

            /* Checklist items */
            &:has(input[type=checkbox]) {
                position: relative;
                display: inherit;
                list-style: none;

                & input[type=checkbox] {
                    position: absolute;
                    top: 0.45ch;
                    left: -1ch
                }
            }
        }
    }

    /* RTL list overrides */
    [dir=rtl] :where(ol):not(nav ol):not(menu ol),
    [dir=rtl] :where(ul):not(nav ul):not(menu ul) {
        & li:has([x-icon]) {
            & [x-icon] {
                left: auto;
                right: -1.75ch
            }
        }

        & li:has(input[type=checkbox]) {
            & input[type=checkbox] {
                left: auto;
                right: -1.25ch
            }
        }
    }

    /* Nested list spacing */
    :where(ol, ul):not(nav ol):not(menu ol) ul,
    :where(ol, ul):not(nav ul):not(menu ul) ol {
        margin-top: 1ch;
        padding-inline-start: 2.75ch;

        & + li {
            margin-top: 1.5ch
        }
    }

    /* Spans */
    :where(span) {
        vertical-align: middle
    }
}