/* ==========================================================================
   Fonts
   ========================================================================== */
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/SourceSans3/nwpStKy2OAdR1K-IwhWudF-R3w8aZQ.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/SourceSans3/nwpMtKy2OAdR1K-IwhWudF-R3woqZ-LY.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Red Hat Display';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("../fonts/RedHatDisplay/8vIQ7wUr0m80wwYf0QCXZzYzUoTg_T6h.woff2") format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}




/* ==========================================================================
   Global Properties
   ========================================================================== */
@property --state-layer-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #211A19;
}




/* ==========================================================================
   Global Styles
   ========================================================================== */
:root {
    --color-branding-coral: #EF7F67;
    --color-branding-teal: #00A69B;
    --color-error: #BA1A1A;
    --color-error-container: #FFDAD6;
    --color-inverse-on-surface: #FFEDEC;
    --color-inverse-surface: #382E2E;
    --color-neutral60: #998E8E;
    --color-on-error-container: #93000A;
    --color-on-primary: #FFF;
    --color-on-primary-container: #8E3A3E;
    --color-on-secondary-container: #643f00;
    --color-on-surface: #211A19;
    --color-on-surface-opacity04: color-mix(in oklab, var(--color-on-surface) 4%, transparent);
    --color-on-surface-opacity10: color-mix(in oklab, var(--color-on-surface) 10%, transparent);
    --color-on-surface-opacity38: color-mix(in oklab, var(--color-on-surface) 38%, transparent);
    --color-on-surface-variant: #6B5A5C;
    --color-outline: #857372;
    --color-outline-variant: #DDD5CB;
    --color-primary: #B24F53;
    --color-primary-container: #FFDAD9;
    --color-secondary: #815512;
    --color-secondary-container: #FFDDB6;
    --color-surface: #F2EFEA;
    --color-surface-container-high: #ECE6DD;
    --color-surface-container-low: #F0ECE6;
    --color-surface-container-lowest: #FFF;
    --easing-expressive-effects-default: cubic-bezier(0.34, 0.80, 0.34, 1.00);
    --easing-expressive-effects-fast: cubic-bezier(0.31, 0.94, 0.34, 1.00);
    --easing-expressive-spatial-fast: cubic-bezier(0.42, 1.67, 0.21, 0.90);
    --easing-standard-spatial-fast: cubic-bezier(0.27, 1.06, 0.18, 1.00);
    --elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
    --font-family-default: 'Source Sans 3', ui-sans-serif, system-ui;
    --font-family-display: 'Red Hat Display', ui-sans-serif, system-ui;
    --font-body-lg: 1rem/1.5rem var(--font-family-default);
    --font-body-md: .875rem/1.25rem var(--font-family-default);
    --font-body-sm: .75rem/1rem var(--font-family-default);
    --font-display-sm: 2.25rem/2.75rem var(--font-family-display);
    --font-headline-lg: 2rem/2.5rem var(--font-family-display);
    --font-headline-md: 1.75rem/2.25rem var(--font-family-display);
    --font-headline-sm: 1.5rem/2rem var(--font-family-display);
    --font-label-lg: 500 .875rem/1.25rem var(--font-family-default);
    --font-label-md: 500 .75rem/1rem var(--font-family-default);
    --font-label-sm: 500 .6875rem/1rem var(--font-family-default);
    --font-title-lg: 500 1.375rem/1.75rem var(--font-family-display);
    --font-title-md: 500 1rem/1.5rem var(--font-family-display);
    --progress-circular-24x24: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cstyle%3E .md-expressive-track-24 %7B transform-origin: center; animation: md-linear-rotate 2s linear infinite; %7D .md-expressive-circle-24 %7B fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1, 60; stroke-dashoffset: 0; animation: md-expressive-expand-contract-24 1.5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite; %7D @keyframes md-linear-rotate %7B 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes md-expressive-expand-contract-24 %7B 0%25 %7B stroke-dasharray: 1, 60; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 45, 60; stroke-dashoffset: -10px; %7D 100%25 %7B stroke-dasharray: 1, 60; stroke-dashoffset: -59px; %7D %7D %3C/style%3E%3Cg class='md-expressive-track-24'%3E%3Ccircle class='md-expressive-circle-24' cx='12' cy='12' r='9.5' /%3E%3C/g%3E%3C/svg%3E");
    interpolate-size: allow-keywords;
}

*,
*::after,
*::before {
    box-sizing: border-box;
}

@supports (-webkit-tap-highlight-color: transparent) {
    *,
    *::after,
    *::before {
        -webkit-tap-highlight-color: transparent;
    }
}

* {
    margin: 0;
    padding: 0;
}

html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
}

body {
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    fill: currentColor;
    font: var(--font-body-lg);
    letter-spacing: .15px;
    min-block-size: 100dvb;
}

a {
    &:where(.link-primary) {
        color: var(--color-on-primary-container);
        font-weight: 600;
        outline-color: var(--color-primary);
        text-decoration: none;
        text-underline-position: under;

        &:hover {
            text-decoration: underline;
        }
    }
}

blockquote {
    border-inline-start: 4px solid var(--color-on-surface-opacity38);
    color: var(--color-on-surface-variant);
    font-family: serif;
    font-style: italic;
    letter-spacing: normal;
    padding-inline-start: 12px;
    text-wrap: pretty;
}

fieldset {
    border: none;
}

hr {
    background-color: var(--color-outline-variant);
    block-size: 1px;
    border: none;
    margin-block: 8px;
}




/* ==========================================================================
   Colors
   ========================================================================== */
.color-on-surface-variant {
    color: var(--color-on-surface-variant);
}

.fill-branding-coral {
    fill: var(--color-branding-coral);
}




/* ==========================================================================
   Text/Typography
   ========================================================================== */
.line-clamp-1 {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.text-center {
    text-align: center;
}

.typography-body-md {
    font: var(--font-body-md);
    letter-spacing: .25px;
}

.visually-hidden {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    white-space: nowrap;
}




/* ==========================================================================
   Buttons
   ========================================================================== */
:where(.button-sm, .button-xs, .button-filled-md, .button-filled-sm, .button-filled-xs, .button-icon-sm, .button-icon-xs, .button-outlined-sm, .button-outlined-xs) {
    border-radius: 100px;
    contain: layout paint style;
    display: grid;
    grid-auto-flow: column;
    outline: 3px solid transparent;
    outline-offset: 2px;
    place-content: center;
    transition-duration: 200ms;
    transition-property: background-color, color, fill, outline-color;
    transition-timing-function: var(--easing-expressive-effects-default);
    user-select: none;

    &:where(a) {
        color: unset;
        text-decoration: none;

        &[aria-disabled="true"] {
            interactivity: inert;
        }
    }

    &:where(button) {
        appearance: none;
        background: none;
        border: none;
    }

    &:not([aria-disabled="true"], :disabled) {
        &:hover {
            &::after {
                opacity: .08;
            }
        }

        &:is(:active, :focus-visible) {
            &:focus-visible {
                outline-color: var(--color-primary);
            }

            &::after {
                opacity: .12;
            }
        }
    }

    &[aria-busy="true"]::before {
        aspect-ratio: 1;
        background-color: var(--color-branding-teal);
        contain: strict;
        content: '';
        inset-block-start: 50%;
        inset-inline-start: 50%;
        mask-image: var(--progress-circular-24x24);
        mask-position: center;
        mask-repeat: no-repeat;
        position: absolute;
        translate: -50% -50%;
    }

    &::after {
        background-color: var(--state-layer-color);
        content: '';
        inset: 0;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        transition: opacity 200ms var(--easing-expressive-effects-default);
    }

    > :nth-child(n + 1) {
        pointer-events: none;
    }
}

:where(.button-filled-md) {
    block-size: 56px;
    font: var(--font-body-lg);
    font-weight: 500;
    gap: 0 8px;
    letter-spacing: .15px;
    padding-inline: 24px;

    &[aria-busy="true"]::before {
        block-size: 24px;
        mask-size: 24px 24px;
    }
}

:where(.button-sm, .button-filled-sm, .button-icon-sm, .button-outlined-sm) {
    block-size: 40px;

    &:not(.button-icon-sm) {
        font: var(--font-label-lg);
        gap: 0 8px;
        letter-spacing: .1px;
        min-inline-size: 64px;
        padding-inline: 16px;

        &:is(.button-outlined-sm) {
            padding-inline: 15px;
        }
    }

    &[aria-busy="true"]::before {
        block-size: 20px;
        mask-size: 20px 20px;
    }
}

:where(.button-xs, .button-filled-xs, .button-icon-xs, .button-outlined-xs) {
    block-size: 32px;

    &:not(.button-icon-xs) {
        font: var(--font-label-lg);
        gap: 0 4px;
        letter-spacing: .1px;
        padding-inline: 12px;

        &:is(.button-outlined-xs) {
            padding-inline: 11px;
        }
    }
}

.button-sm,
.button-xs {
    --state-layer-color: var(--color-primary);
    color: var(--color-primary);

    &:is([aria-disabled="true"], :disabled) {
        color: var(--color-on-surface-opacity38);
    }
}

.button-filled-md,
.button-filled-sm,
.button-filled-xs {
    --state-layer-color: var(--color-on-primary);
    background-color: var(--color-primary);
    color: var(--color-on-primary);

    &:is([aria-disabled="true"], :disabled) {
        background-color: var(--color-on-surface-opacity10);
        color: var(--color-on-surface-opacity38);
    }
}

.button-icon-sm,
.button-icon-xs {
    --state-layer-color: var(--color-on-surface);
    aspect-ratio: 1;
    contain: strict;
    fill: var(--color-on-surface-variant);

    &:is([aria-disabled="true"], :disabled) {
        fill: var(--color-on-surface-opacity38);
    }
}

.button-outlined-sm,
.button-outlined-xs {
    border: 1px solid var(--color-outline-variant);
    color: var(--color-on-surface-variant);
    fill: var(--color-on-surface-variant);

    &:is([aria-disabled="true"], :disabled) {
        background-color: var(--color-on-surface-opacity10);
        color: var(--color-on-surface-opacity38);
    }
}




/* ==========================================================================
   Form Fields
   ========================================================================== */
@property --form-field-input-padding-inline-end {
    syntax: "<length>";
    inherits: true;
    initial-value: 16px;
}

@property --form-field-input-padding-inline-start {
    syntax: "<length>";
    inherits: true;
    initial-value: 16px;
}

@property --form-field-label-color {
    syntax: "<color>";
    inherits: true;
    initial-value: black;
}

@property --form-field-leading-icon-color {
    syntax: "<color>";
    inherits: true;
    initial-value: black;
}

@property --form-field-trailing-icon-color {
    syntax: "<color>";
    inherits: true;
    initial-value: black;
}

.form-field {
    --form-field-label-color: var(--color-on-surface-variant);
    --form-field-leading-icon-color: var(--color-on-surface-variant);
    --form-field-trailing-icon-color: var(--color-on-surface-variant);
    display: grid;
    gap: 0 4px;
    grid-template:
        "label label label"
        "leading input trailing"
        "helper helper helper" / 48px 1fr 48px;

    &:has(> .input:is(:disabled, :read-only)) {
        --form-field-leading-icon-color: var(--color-on-surface-opacity38);
        --form-field-trailing-icon-color: var(--color-on-surface-opacity38);

        > .trailing-icon {
            &[command*="--toggle-password"] {
                display: none;
            }
        }
    }

    &:has(> .leading-icon) {
        --form-field-input-padding-inline-start: 52px;
    }

    &:has(> .trailing-icon) {
        --form-field-input-padding-inline-end: 52px;
    }

    > :where(.assistive-text, .validation-error) {
        grid-area: helper;
        padding: 8px 16px 0;
    }

    > .assistive-text {
        color: var(--color-outline);
        font: var(--font-body-sm);
        letter-spacing: .4px;
        text-wrap: pretty;

        :has(.validation-error:not(:empty)) > & {
            display: none;
        }
    }

    > .input {
        grid-area: leading / leading / trailing / trailing;

        &:where(input, textarea) {
            background-color: var(--color-surface-container-lowest);
            border: thin solid var(--color-on-surface-opacity10);
            border-radius: 4px;
            color: var(--color-on-surface);
            font: var(--font-body-lg);
            letter-spacing: .15px;
            outline: 2px solid transparent;
            outline-offset: -1px;
            padding-inline-end: calc(var(--form-field-input-padding-inline-end) - 1px);
            padding-inline-start: calc(var(--form-field-input-padding-inline-start) - 1px);
            transition-duration: 200ms;
            transition-property: background-color, border-color, color, outline-color;
            transition-timing-function: var(--easing-expressive-effects-default);

            &:is(:disabled, :read-only) {
                background-color: var(--color-on-surface-opacity04);
                color: var(--color-on-surface-opacity38);

                &::placeholder {
                    opacity: 0;
                }
            }

            &:read-write {
                &:hover {
                    border-color: var(--color-outline-variant);
                }

                &:focus {
                    border-color: transparent;
                    outline-color: var(--color-primary);
                }

                &::placeholder {
                    color: var(--color-neutral60);
                    opacity: unset;
                    transition: opacity 200ms var(--easing-expressive-effects-default);
                }

                &.input-validation-error {
                    border-color: var(--color-error);
                }
            }
        }

        &:where(input) {
            block-size: 56px;
        }

        &:where(select) {
            align-items: center;
            anchor-name: --picker-anchor;
            appearance: base-select;
            background-color: var(--color-surface-container-lowest);
            block-size: 56px;
            border: thin solid var(--color-on-surface-opacity10);
            border-radius: 4px;
            color: var(--color-on-surface);
            display: flex;
            font: var(--font-body-lg);
            letter-spacing: .15px;
            outline: 2px solid transparent;
            outline-offset: -1px;
            padding-inline: 15px;
            transition-duration: 200ms;
            transition-property: background-color, border-color, color, outline-color;
            transition-timing-function: var(--easing-expressive-effects-default);

            &:disabled {
                background-color: var(--color-on-surface-opacity04);
                color: var(--color-on-surface-opacity38);

                &:has(option[value=""]:checked) {
                    color: transparent;
                }

                &::picker-icon {
                    background-color: var(--color-on-surface-opacity38);
                }
            }

            &:enabled {
                &.input-validation-error {
                    border-color: var(--color-error);
                }
            }

            &:has(option[value=""]:checked) {
                color: var(--color-neutral60);
            }

            &:hover {
                border-color: var(--color-outline-variant);
                outline-color: transparent;
            }

            &:focus-visible {
                border-color: transparent;
                outline-color: var(--color-primary);
            }

            &:open {
                &::picker(select) {
                    display: grid;
                }

                &::picker-icon {
                    rotate: 180deg;
                }
            }

            &::picker(select) {
                appearance: base-select;
                background-color: var(--color-surface-container-low);
                border: none;
                border-radius: 16px;
                box-shadow: var(--elevation-3);
                grid-template-rows: 1fr;
                max-block-size: calc(100% - 32px);
                overflow: hidden;
            }

            &::picker-icon {
                background-color: var(--color-on-surface-variant);
                block-size: 24px;
                content: '';
                inline-size: 24px;
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23000'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E");
                mask-position: center;
                mask-repeat: no-repeat;
                mask-size: 24px;
                transition: background-color 200ms var(--easing-expressive-effects-default);
            }

            option {
                background: none;
                block-size: 48px;
                color: var(--color-on-surface);
                contain: layout;
                display: grid;
                font: var(--font-label-lg);
                gap: 0 8px;
                grid-template: "label checkmark" / 1fr 20px;
                letter-spacing: .1px;
                outline: none;
                padding-inline: 16px;

                &:enabled {
                    &:checked {
                        --state-layer-color: var(--color-on-secondary-container);
                        color: var(--color-on-secondary-container);

                        &::after {
                            border-radius: 12px;
                        }

                        &::before {
                            opacity: unset;
                        }

                        &::checkmark {
                            background-color: var(--color-secondary);
                        }
                    }

                    &:hover::after {
                        opacity: .08;
                    }

                    &:is(:active, :focus-visible)::after {
                        opacity: .12;
                    }
                }

                &[hidden] {
                    display: none;
                }

                &::after {
                    background-color: var(--state-layer-color);
                    border-radius: 4px;
                    content: '';
                    inset: 2px 4px;
                    opacity: 0;
                    pointer-events: none;
                    position: absolute;
                    transition: opacity 200ms var(--easing-expressive-effects-default);
                }

                &::before {
                    background-color: color-mix(rgb(255, 221, 182), rgb(229, 193, 141));
                    border-radius: 12px;
                    content: '';
                    inset: 2px 4px;
                    opacity: 0;
                    pointer-events: none;
                    position: absolute;
                    z-index: -1;
                }

                &::checkmark {
                    background-color: var(--color-on-surface-variant);
                    block-size: 20px;
                    content: '';
                    grid-area: checkmark;
                    inline-size: 20px;
                    mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.95834 15L3.20834 10.25L4.39584 9.06252L7.95834 12.625L15.6042 4.97919L16.7917 6.16669L7.95834 15Z' fill='%23000'/%3E%3C/svg%3E");
                    mask-repeat: no-repeat;
                    mask-position: center;
                    mask-size: 20px;
                }
            }

            .container {
                container-type: scroll-state;
                overflow-block: auto;
                overflow-inline: hidden;
                padding-block: 2px;
                scrollbar-width: thin;

                > option:nth-child(1 of :not([hidden])),
                > optgroup:first-of-type > option:nth-child(1 of :not([hidden])) {
                    &::after {
                        border-start-start-radius: 12px;
                    }
                }

                > option:nth-last-child(1 of :not([hidden])),
                > optgroup:first-of-type > option:nth-last-child(1 of :not([hidden])) {
                    &::after {
                        border-end-start-radius: 12px;
                    }
                }

                @container scroll-state(scrollable: none) {
                    option:nth-child(1 of :not([hidden])),
                    optgroup:first-of-type > option:nth-child(1 of :not([hidden])) {
                        &::after {
                            border-start-end-radius: 12px;
                        }
                    }

                    option:nth-last-child(1 of :not([hidden])),
                    optgroup:first-of-type > option:nth-last-child(1 of :not([hidden])) {
                        &::after {
                            border-end-end-radius: 12px;
                        }
                    }
                }
            }
        }

        .dialog-adaptive & {
            min-inline-size: 360px;

            .form-field-grid & {
                min-inline-size: unset;
            }
        }

        &::-ms-reveal {
            display: none;
        }

        &::-webkit-inner-spin-button {
            display: none;
        }
    }

    > .label {
        color: var(--form-field-label-color);
        font: var(--font-label-lg);
        grid-area: label;
        letter-spacing: .1px;
        padding-block-end: 8px;
    }

    > .leading-icon {
        fill: var(--form-field-leading-icon-color);
        grid-area: leading;
        order: 1;
        place-self: center;
        pointer-events: none;
        transition: fill 200ms var(--easing-expressive-effects-default);
    }

    > .trailing-icon {
        grid-area: trailing;
        place-self: center;

        &[command="--toggle-password"] {
            &:not([aria-pressed="true"]) {
                svg use:nth-child(2) {
                    display: none;
                }
            }

            &[aria-pressed="true"] {
                svg use:nth-child(1) {
                    display: none;
                }
            }
        }
    }

    > .validation-error {
        color: var(--color-error);
        font: var(--font-label-md);
        letter-spacing: .5px;
    }
}

.form-field-grid {
    container-type: inline-size;

    > .container {
        display: grid;
        gap: 24px;

        > legend {
            font: var(--font-title-md);
            letter-spacing: .15px;
        }

        > .assistive-text {
            color: var(--color-on-surface-variant);
            font: var(--font-body-sm);
            letter-spacing: .4px;
            text-wrap: pretty;
        }
    }

    @container (360px <= width) {
        > .container {
            grid-template-columns: repeat(2, 1fr);

            > .assistive-text {
                grid-column-end: span 2;
            }
        }
    }
}




/* ==========================================================================
   Checkbox Inputs
   ========================================================================== */
@property --checkbox-icon-color {
    syntax: "<color>";
    inherits: true;
    initial-value: transparent;
}

@property --checkbox-outline-color {
    syntax: "<color>";
    inherits: true;
    initial-value: transparent;
}

input[type="checkbox"].input-checkbox {
    appearance: none;
    aspect-ratio: 1;
    background-color: transparent;
    block-size: 18px;
    border-radius: 2px;
    box-shadow: inset 0 0 0 2px var(--checkbox-outline-color);
    contain: layout style;
    display: grid;
    margin: 3px;
    outline: none;
    transition-duration: 200ms;
    transition-property: --checkbox-icon-color, background-color, box-shadow;
    transition-timing-function: var(--easing-expressive-effects-default);

    &:disabled {
        --checkbox-outline-color: var(--color-on-surface-opacity38);

        &:checked {
            --checkbox-icon-color: #FFF;
            --checkbox-outline-color: transparent;
            background-color: var(--color-on-surface-opacity38);

            &::after {
                mask-size: 24px;
            }
        }
    }

    &:enabled {
        --checkbox-outline-color: var(--color-on-surface-variant);

        &:where(:active, :focus-visible, :hover) {
            --checkbox-outline-color: var(--color-on-surface);

            &:is(:active, :focus-visible)::before {
                opacity: .12;
            }

            &::before {
                opacity: .08;
                scale: calc(40 / 18);
            }
        }

        &:checked {
            --checkbox-icon-color: var(--color-on-primary);
            --checkbox-outline-color: transparent;
            --state-layer-color: var(--color-primary);
            background-color: var(--color-primary);
            box-shadow: inset 0 0 0 2px var(--color-primary);

            &::after {
                mask-size: 24px;
            }
        }
    }

    &::after {
        background-color: var(--checkbox-icon-color);
        content: '';
        grid-area: 1 / 1;
        mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 16.4L6 12.4L7.4 11L10 13.6L16.6 7L18 8.4L10 16.4Z' fill='black'/%3E%3C/svg%3E");
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: 0px;
        transition: mask-size 350ms var(--easing-expressive-spatial-fast);
    }

    &::before {
        background: var(--state-layer-color);
        border-radius: 100px;
        content: '';
        grid-area: 1 / 1;
        opacity: 0;
        scale: 1;
        transition: background 200ms var(--easing-expressive-effects-default), opacity 200ms var(--easing-expressive-effects-default), scale 350ms var(--easing-expressive-spatial-fast);
    }
}




/* ==========================================================================
   Radio Inputs
   ========================================================================== */
input[type="radio"].input-radio {
    appearance: none;
    block-size: 24px;
    color: var(--color-on-surface-variant);
    inline-size: 24px;
    display: grid;
    outline: none;
    transition: color 200ms var(--easing-expressive-effects-default);

    &:checked {
        &::after {
            mask-size: 24px;
        }
    }

    &:disabled {
        color: var(--color-on-surface-opacity38);
    }

    &:enabled {
        @media (hover: hover) {
            &:hover {
                color: var(--color-on-surface);

                &::before {
                    opacity: .08;
                    scale: calc(40 / 24);
                }
            }
        }

        &:is(:active, :focus-visible) {
            color: var(--color-on-surface);

            &::before {
                opacity: .12;
                scale: calc(40 / 24);
            }
        }

        &:checked {
            --state-layer-color: var(--color-primary);
            color: var(--color-primary);
        }
    }

    &::before {
        background-color: var(--state-layer-color);
        border-radius: 100px;
        content: '';
        grid-area: 1 / 1;
        opacity: 0;
        transition: background-color 200ms var(--easing-expressive-effects-default), opacity 200ms var(--easing-expressive-effects-default), scale 350ms var(--easing-expressive-spatial-fast);
    }

    &::after {
        background-color: currentColor;
        content: '';
        grid-area: 1 / 1;
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23000'%3E%3Cpath d='M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23000'%3E%3Cpath d='M621.5-338.5Q680-397 680-480t-58.5-141.5Q563-680 480-680t-141.5 58.5Q280-563 280-480t58.5 141.5Q397-280 480-280t141.5-58.5Z'/%3E%3C/svg%3E");
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: 24px, 0px;
        transition: mask-size 350ms var(--easing-expressive-spatial-fast);
    }
}




/* ==========================================================================
   Validation Errors
   ========================================================================== */
.validation-summary-errors {
    background-color: var(--color-error-container);
    border-radius: 4px;
    color: var(--color-on-error-container);
    font: var(--font-label-lg);
    letter-spacing: .1px;

    li {
        align-items: center;
        display: grid;
        grid-template: "icon label" minmax(32px, auto) / 48px 1fr;
        padding: 8px 16px 8px 0;

        &::before {
            aspect-ratio: 1;
            background-color: currentColor;
            block-size: 24px;
            content: '';
            grid-area: icon;
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px'%3E%3Cpath d='M508.5-291.5Q520-303 520-320t-11.5-28.5Q497-360 480-360t-28.5 11.5Q440-337 440-320t11.5 28.5Q463-280 480-280t28.5-11.5ZM440-440h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E");
            place-self: center;
        }
    }
}




/* ==========================================================================
   View Transitions
   ========================================================================== */
html:active-view-transition-type(backwards) {
    &::view-transition-new(root) {
        animation: fade-in 200ms var(--easing-expressive-effects-default) 100ms backwards, translate-in-from-inline-start 350ms var(--easing-standard-spatial-fast) backwards;
    }

    &::view-transition-old(root) {
        animation: fade-out 150ms var(--easing-expressive-effects-fast) forwards, translate-out-to-inline-end 350ms var(--easing-standard-spatial-fast) forwards;
    }
}

html:active-view-transition-type(forwards) {
    &::view-transition-new(root) {
        animation: fade-in 200ms var(--easing-expressive-effects-default) 100ms backwards, translate-in-from-inline-end 350ms var(--easing-standard-spatial-fast) backwards;
    }

    &::view-transition-old(root) {
        animation: fade-out 150ms var(--easing-expressive-effects-fast) forwards, translate-out-to-inline-start 350ms var(--easing-standard-spatial-fast) forwards;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

@keyframes fade-out {
    to {
        opacity: 0;
    }
}

@keyframes translate-in-from-inline-end {
    from {
        translate: 32px;
    }
}

@keyframes translate-in-from-inline-start {
    from {
        translate: -32px;
    }
}

@keyframes translate-out-to-inline-end {
    to {
        translate: 32px;
    }
}

@keyframes translate-out-to-inline-start {
    to {
        translate: -32px;
    }
}