/* Indux Utilities */

@layer utilities {

    /* Center in flex parent */
    :where(.center) {
        justify-content: center;
        align-items: center
    }

    /* Flex utilities */
    :where(.row, .row-wrap, .col, .col-wrap) {
        display: flex
    }

    /* Flex column */
    :where(.col) {
        flex-flow: column nowrap
    }

    /* Wrapping flex column */
    :where(.col-wrap) {
        flex-flow: column wrap
    }

    /* Flex row */
    :where(.row) {
        flex-flow: row nowrap
    }

    /* Wrapping flex row */
    :where(.row-wrap) {
        flex-flow: row wrap
    }

    /* Content width & horizontal centering */
    :where(.content) {
        width: var(--spacing-content-width, 68.75rem);
        max-width: 100%;
        margin-inline-start: auto;
        margin-inline-end: auto
    }

    /* Ghost */
    :where(.ghost) {
        color: var(--color-content-stark, oklch(16.6% 0.026 267));
        background-color: transparent;

        &:hover {
            background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26))
        }

        &.brand:hover {
            color: var(--color-brand-inverse, #763518)
        }

        &.accent:hover {
            color: var(--color-accent-inverse, oklch(100% 0 0))
        }

        &.negative:hover {
            color: var(--color-negative-inverse, white)
        }
    }

    /* Hug */
    :where(.hug) {
        min-width: 0;
        width: fit-content;
        height: fit-content;
        padding: 0
    }

    /* Outlined */
    :where(.outlined) {
        border-width: 1px;
        border-style: solid;
        border-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 90%, var(--color-field-inverse, oklch(16.6% 0.026 267)))
    }

    /* Dark theme override */
    .dark :where(.outlined) {
        border-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 80%, var(--color-field-inverse, oklch(16.6% 0.026 267)))
    }

    /* Selected */
    :where(.selected) {
        background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 25%, transparent);
    }

    /* Transparent */
    :where(.transparent) {
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
        background-color: transparent !important;

        &:hover {
            color: var(--color-content-stark, oklch(16.6% 0.026 267))
        }
    }

    /* Large */
    :where(.lg) {
        --spacing-field-height: 2.5rem;
        --spacing-field-padding: 0.78rem;
        font-size: 125%
    }

    /* Small */
    :where(.sm) {
        --spacing-field-height: 1.5rem;
        --spacing-field-padding: 0.49rem;
        font-size: 75%;

        /* Reposition select picker icon */
        &::picker-icon {
            line-height: 0.2
        }
    }

    /* Page content layout */
    :where(body.page) {
        display: flex;
        flex-direction: column;
        min-height: 100vh
    }

    .page {

        /* Overlay header & footer if fixed */
        & > header, & > footer {
            z-index: 30
        }

        /* Page margins */
        & > header, & > footer, & > main {
            padding-inline-start: var(--spacing-viewport-padding, 5vw);
            padding-inline-end: var(--spacing-viewport-padding, 5vw);
        }

        /* Width and horizontal centering for content wrappers */
        & > header nav, & > footer nav, & > main > section:not(.banner, .overlay-dark, .overlay-light) {
            width: var(--spacing-content-width, 68.75rem);
            max-width: 100%;
            margin-inline-start: auto;
            margin-inline-end: auto
        }

        /* Push footer down */
        & > footer {
            margin-top: auto
        }
    }

    /* No focus */
    .no-focus:focus, .no-focus:focus-visible, .no-focus:focus-within {
        box-shadow: 0 0 0 0 transparent
    }

    /* No scrollbar */
    :where(.no-scrollbar) {
        -ms-overflow-style: none;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none
        }
    }

    /* Banner overlays */
    :where(.overlay-dark, .overlay-light) {
        position: relative;

        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            width: 100%;
            height: 100%
        }

        >* {
            position: relative;
            z-index: 1
        }
    }

    /* Dark overlay */
    :where(.overlay-dark) {
        color: white !important;

        &::after {
            background: oklch(0% 0 0 / 50%)
        }
    }

    /* Light overlay */
    :where(.overlay-light) {
        color: black !important;

        &::after {
            background: oklch(100% 0 0 / 75%)
        }
    }

    /* Prose styles for long-form content */
    :where(.prose) {
        width: 65ch;
        max-width: 100%;

        /* Asides inside a prose element are used as callouts */
        & aside:not([popover]) {
            margin-top: calc(1rem * 1.4);
            padding: 1rem;
            border-radius: calc(var(--radius, 0.5rem) * 2);
            color: var(--color-content-stark, oklch(16.6% 0.026 267));
            background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 20%, transparent);
            border: 1px solid color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 30%, transparent);

            &:not(.frame) * {
                color: inherit
            }

            &:has([x-icon]):not(.frame) {
                display: flex;
                flex-direction: row;
                gap: 1rem;

                & [x-icon] {
                    padding-top: 0.25rem;
                    font-size: 1.25rem
                }
            }
        }

        & > a:not(:where(h1, h2, h3, h4, h5, h6, p, small, figcaption, label, li, blockquote, pre code, code, kbd, span, mark, [role=button]) a) {
            margin-top: calc(1rem * 1.4);
        }

        & > blockquote {
            margin-top: calc(1rem * 2);

            & * {
                margin: 0
            }
        }

        & > figcaption {
            margin-top: 1rem
        }

        & > figure {
            margin-top: calc(1rem * 1.4);

            & img {
                margin: 0
            }
        }

        & > h1+p {
            margin-top: 0.625rem;
            font-size: 1.125rem;
            color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
        }

        & > h2 {
            margin-top: 1rem;
            margin-bottom: calc(1rem * 0.6667)
        }

        & > h3 {
            margin-top: calc(1rem * 2.4)
        }

        & > h4 {
            margin-top: calc(1rem * 3)
        }

        & > h4+p {
            margin-top: 0.25rem;
        }

        & > h5 {
            margin-top: 1rem;
            margin-bottom: 1rem
        }

        & > h6 {
            margin-top: calc(1rem * 2);
            margin-bottom: 1rem
        }

        & > hr {
            margin-top: calc(1rem * 3);
            margin-bottom: calc(1rem * 3)
        }

        & > img,
        & > p {
            margin-top: calc(1rem * 1.4)
        }

        & > ol,
        & > ul,
        & > small {
            margin-top: 1rem
        }

        & > table {
            margin-top: calc(1rem * 2);
            margin-bottom: calc(1rem * 2)
        }

        & > x-code-group, & > x-code, & > pre {
            margin-top: 2rem;
            margin-bottom: 2rem
        }

        & > x-code-group x-code {
            margin-top: 0;
            margin-bottom: 0
        }

        & > x-code pre {
            margin-top: 0;
            margin-bottom: 0
        }
    }

    /* Inline trailing content */
    :where(.trailing) {
        display: inline-block;
        margin-inline-start: auto;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
    }

    /* Brand colors */
    :where(.brand) {
        --color-field-surface: var(--color-brand-surface, #f6c07b);
        --color-field-surface-hover: var(--color-brand-surface-hover, #f19b46);
        --color-field-inverse: var(--color-brand-inverse, #763518);
        --color-content-stark: var(--color-brand-content, #de6618);
        --color-content-neutral: color-mix(in oklch, var(--color-brand-content, #de6618) 85%, transparent);
        --color-content-subtle: color-mix(in oklch, var(--color-brand-content, #de6618) 70%, transparent);
    }

    /* Accent colors */
    :where(.accent) {
        --color-field-surface: var(--color-accent-surface, oklch(16.6% 0.026 267));
        --color-field-surface-hover: var(--color-accent-surface-hover, oklch(28.7% 0.030787 270.1));
        --color-field-inverse: var(--color-accent-inverse, oklch(100% 0 0));
        --color-content-stark: var(--color-accent-content, oklch(16.6% 0.026 267));
        --color-content-neutral: color-mix(in oklch, var(--color-accent-content, oklch(16.6% 0.026 267)) 85%, transparent);
        --color-content-subtle: color-mix(in oklch, var(--color-accent-content, oklch(16.6% 0.026 267)) 70%, transparent);
    }

    /* Negative colors */
    :where(.negative) {
        --color-field-surface: var(--color-negative-surface, #ef4444);
        --color-field-surface-hover: var(--color-negative-surface-hover, #dc2626);
        --color-field-inverse: var(--color-negative-inverse, white);
        --color-content-stark: var(--color-negative-content, #ef4444);
        --color-content-neutral: color-mix(in oklch, var(--color-negative-content, #ef4444) 85%, transparent);
        --color-content-subtle: color-mix(in oklch, var(--color-negative-content, #ef4444) 70%, transparent);
    }

    /* Positive colors */
    :where(.positive) {
        --color-field-surface: var(--color-positive-surface, #16a34a);
        --color-field-surface-hover: var(--color-positive-surface-hover, #166534);
        --color-field-inverse: var(--color-positive-inverse, white);
        --color-content-stark: var(--color-positive-content, #16a34a);
        --color-content-neutral: color-mix(in oklch, var(--color-positive-content, #16a34a) 85%, transparent);
        --color-content-subtle: color-mix(in oklch, var(--color-positive-content, #16a34a) 70%, transparent);
    }
}