/* ==========================================================================
   Steppers
   ========================================================================== */
@property --progress-value {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 0%;
}

html:has(main.stepper) {
    scroll-padding-block: 96px 112px;
}

.stepper {
    display: grid;
    grid-template:
        "header" 64px
        "body" 1fr
        "footer" 80px;
    min-block-size: 100dvb;
}

    .stepper:not(:has(.stepper-footer-actions > *)) {
        grid-template-rows: 64px 1fr 0px;
    }

        .stepper:not(:has(.stepper-footer-actions > *)) .stepper-footer {
            display: none;
        }

.stepper-body {
    display: grid;
    grid-area: body;
    grid-template-columns: minmax(auto, 560px);
    padding: 32px 16px;
    place-content: start center;
    row-gap: 40px;
}

.stepper-footer {
    background-color: var(--color-surface);
    block-size: 80px;
    contain: strict;
    display: grid;
    grid-area: footer;
    grid-template: "actions" 48px / minmax(auto, 560px);
    inset-block-end: 0;
    inset-inline: 0;
    padding-inline: 16px;
    place-content: center;
    position: fixed;
}

.stepper-footer-actions {
    display: grid;
    grid-area: actions;
}

    .stepper-footer-actions :where(a, button) {
        block-size: 100%;
        inline-size: 100%;
    }

    .stepper-footer-actions :where(.stepper-footer-actions-leading, .stepper-footer-actions-trailing) {
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
    }

.stepper-header {
    background-color: var(--color-surface);
    block-size: 64px;
    contain: strict;
    display: grid;
    gap: 8px 10px;
    grid-template:
        "leading headline trailing" 40px
        ". progress ." 4px / 40px minmax(auto, 560px) 40px;
    inset-block-start: 0;
    justify-content: space-between;
    padding: 12px 8px 0;
    position: sticky;
    z-index: 2;
}

.stepper-header-actions {
    display: grid;
    gap: 8px;
    grid-area: trailing;
    grid-auto-flow: column;
    justify-content: end;
}

.stepper-header-branding,
.stepper-header-navigation-icon {
    grid-area: leading;
}

.stepper-header-branding {
    padding: 2px;
    place-self: center;
}

.stepper-header-headline {
    align-self: center;
    font-family: var(--font-family-display);
    grid-area: headline;
    text-align: center;
}

.stepper-header-progress {
    background-color: var(--color-surface-container);
    block-size: 100%;
    contain: strict;
    grid-area: progress;
    inline-size: 100%;
    justify-self: center;
}

    .stepper-header-progress[style*="--progress-value: 0%"] {
        visibility: hidden;
    }

.stepper-header-progress-value {
    background-color: var(--color-branding-teal);
    block-size: 100%;
    inline-size: var(--progress-value);
}

#stepper-header-actions-menu {
    inset: unset;
    inset-block-start: 52px;
    inset-inline-end: 16px;
    transform-origin: top right;
}

@media (width < 416px) {
    .stepper-footer-actions-leading {
        display: none;
    }

    .stepper-header-navigation-icon + .stepper-header-branding {
        display: none;
    }
}

@media (416px <= width) {
    .stepper-footer-actions {
        grid-template: "leading . trailing" 48px / 1fr 2fr 1fr;
    }

    .stepper-footer-actions-leading {
        grid-area: leading;
    }

    .stepper-footer-actions-trailing {
        grid-area: trailing;
    }

    .stepper-header-navigation-icon {
        display: none;
    }
}

@media (width < 720px) {
    .stepper-header-actions:has(> li:nth-of-type(3)) > li:nth-last-of-type(n+2) {
        display: none;
    }
}

@media (720px <= width) {
    .stepper-header-actions:has(> li:nth-of-type(3):last-of-type) > li:last-of-type {
        display: none;
    }

    .stepper-header:has(.stepper-header-actions li:nth-of-type(3):last-of-type) ~ #stepper-header-actions-menu {
        display: none;
    }
}

@media (720px <= width < 868px) {
    .stepper-header-actions:has(> li:nth-of-type(4)) > li:nth-last-of-type(n+3) {
        display: none;
    }

    .stepper-header-actions > li:has(.stepper-header-more-actions-icon) {
        order: -1;
    }

    .stepper-header:has(.stepper-header-actions li:nth-of-type(4)) ~ #stepper-header-actions-menu {
        inset-inline-end: 64px;
    }

    #stepper-header-actions-menu > li:last-of-type {
        display: none;
    }
}

@media (868px <= width) {
    li:has(> .stepper-header-more-actions-icon) {
        display: none;
    }

    #stepper-header-actions-menu {
        display: none;
    }
}

@media (600px <= width) and (orientation: portrait), (480px <= height) and (orientation: landscape) {
    .stepper-header {
        padding-inline: 16px;
    }

    .stepper-footer {
        padding-inline: 24px;
    }

    .stepper-header-branding {
        padding: unset;
    }

    #stepper-header-actions-menu {
        inset-inline-end: 24px;
    }
}




/* ==========================================================================
   View Transitions
   ========================================================================== */
@supports selector(::view-transition) {
    ::view-transition-new(root) {
        animation: fade-in 280ms var(--easing-emphasized-decelerate) 120ms both, translateY32-end-in 400ms var(--easing-standard) both;
    }

    ::view-transition-old(root) {
        animation: fade-out 120ms var(--easing-emphasized-accelerate) both;
    }

    html:active-view-transition-type(back, next) {
        .stepper-footer-actions-leading {
            view-transition-name: stepper-footer-actions-leading;
        }

        .stepper-footer-actions-trailing {
            view-transition-name: stepper-footer-actions-trailing;
        }

        .stepper-header {
            view-transition-name: stepper-header;
        }

        .stepper-header-branding {
            view-transition-name: stepper-header-branding;
        }

        .stepper-header-progress-value {
            view-transition-name: stepper-header-progress-value;
        }

        &::view-transition-new(stepper),
        &::view-transition-new(stepper-footer),
        &::view-transition-new(stepper-footer-actions-leading),
        &::view-transition-new(stepper-footer-actions-trailing),
        &::view-transition-new(stepper-header),
        &::view-transition-new(stepper-header-branding),
        &::view-transition-old(stepper),
        &::view-transition-old(stepper-footer),
        &::view-transition-old(stepper-footer-actions-leading),
        &::view-transition-old(stepper-footer-actions-trailing),
        &::view-transition-old(stepper-header),
        &::view-transition-old(stepper-header-branding) {
            mix-blend-mode: normal;
        }

        &::view-transition-new(stepper-header-progress-value),
        &::view-transition-old(stepper-header-progress-value) {
            block-size: 4px;
        }
    }

    html:active-view-transition-type(back) {
        view-transition-name: stepper;

        &::view-transition-old(stepper) {
            animation: fade-out 120ms var(--easing-emphasized-accelerate) both, translateX32-end-out 400ms var(--easing-standard) both;
        }
        
        &::view-transition-new(stepper) {
            animation: fade-in 280ms var(--easing-emphasized-decelerate) 120ms both, translateX32-start-in 400ms var(--easing-standard) both;
        }
    }

    html:active-view-transition-type(next) {
        view-transition-name: stepper;

        &::view-transition-old(stepper) {
            animation: fade-out 120ms var(--easing-emphasized-accelerate) both, translateX32-start-out 400ms var(--easing-standard) both;
        }
        
        &::view-transition-new(stepper) {
            animation: fade-in 280ms var(--easing-emphasized-decelerate) 120ms both, translateX32-end-in 400ms var(--easing-standard) both;
        }
    }

    html:where(.view-transition-back, .view-transition-next)::view-transition-new(stepper-header-progress-value),
    html:where(.view-transition-back, .view-transition-next)::view-transition-old(stepper-header-progress-value) {
        block-size: 4px;
    }

    .dialog {
        view-transition-name: dialog;
    }

        .dialog::backdrop {
            view-transition-name: dialog-backdrop;
        }

    ::view-transition-old(dialog):only-child {
        animation: fade-out 100ms both;
    }

    ::view-transition-old(dialog-backdrop):only-child {
        animation: fade-out 100ms both;
    }

    @media (600px <= width) and (orientation: portrait), (480px <= height) and (orientation: landscape) {
        :where(.chat, .sheet) {
            view-transition-name: sheet;
        }

            :where(.chat, .sheet)::backdrop {
                view-transition-name: sheet-backdrop;
            }

            ::view-transition-old(sheet):only-child {
                animation: sheet-out 200ms var(--easing-emphasized-accelerate) both, fade-out 0ms 200ms both;
            }

            ::view-transition-old(sheet-backdrop):only-child {
                animation: fade-out 200ms both;
            }

            @keyframes sheet-out {
                to {
                    transform: translateX(100%) translateX(16px);
                }
            }
    }
}