/*

In this file:

// A. Variables
// B. Component

*/

//////////////////////////////////////////////
// A. Variables
//////////////////////////////////////////////

:root {
    --flyout-width: min(360px, 85dvw);
    --flyout-z-index: 10000;
}

//////////////////////////////////////////////
// B. Component
//////////////////////////////////////////////

@layer component {

    // Flyout

    .flyout {
        position: fixed;
        inset: 0;

        display: flex;
        justify-content: flex-end;

        background-color: hsla(0, 0%, 0%, 0.5);

        z-index: var(--flyout-z-index);

        opacity: 0;
        visibility: hidden;

        transition:
            opacity 0.3s ease-in-out,
            visibility 0s 0.3s;

        @media (prefers-reduced-motion: reduce) {
            transition: none;
        }

        &.shown {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;

            transition:
                opacity 0.3s ease-in-out,
                visibility 0s;

            @media (prefers-reduced-motion: reduce) {
                transition: none;
            }

            .flyout__content {
                transform: translateX(0);
            }
        }
    }

    // Flyout Content

    .flyout__content {
        display: flex;
        flex-direction: column;

        width: var(--flyout-width);
        height: 100dvh;

        overflow-x: hidden;

        background-color: var(--background-color);

        box-shadow: -0.25rem 0 1rem hsla(var(--box-shadow-hsl) / var(--box-shadow-base-opacity));

        transform: translateX(var(--flyout-width));

        transition: transform 0.3s ease-in-out;

        @media (prefers-reduced-motion: reduce) {
            transition: none;
        }
    }

    // Flyout Header

    .flyout__header {
        display: flex;
        align-items: center;

        flex-shrink: 0;

        font-size: var(--font-size-md);

        padding-inline: var(--main-menu-padding-x);
        padding-block: var(--main-menu-padding-y);

        border-block-end-width: var(--border-width);
        border-block-end-style: var(--border-style);

        [data-flyout-close] {
            margin-inline-start: auto;
        }

        [data-flyout-back][hidden] {
            display: none;
        }

        [data-flyout-back][data-entering] {
            animation: flyout-back-enter 0.25s ease-out;

            @media (prefers-reduced-motion: reduce) {
                animation: none;
            }
        }
    }

    // Flyout Panel Title (drill-down sub-panels)

    .flyout__panel-title {
        font-weight: var(--font-weight-bold);

        opacity: 0.8;

        padding-inline: var(--main-menu-padding-x);
        padding-block: 0.25em;

        background-color: var(--subtle-fill-1);
    }

    @keyframes flyout-back-enter {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    // Flyout Body

    .flyout__body {
        overflow-y: auto;

        flex: 1;

        min-height: 0;
    }

    // Flyout Panels (drill-down navigation)

    .flyout__panels {
        position: relative;

        height: 100%;
    }

    .flyout__panel {
        position: absolute;
        inset: 0;

        overflow-y: auto;

        background-color: var(--background-color);

        &:not([inert]) {
            z-index: 1;
        }

        &[inert] {
            visibility: hidden;
        }

        &[data-entering] {
            animation: flyout-panel-enter 0.25s ease-out;

            @media (prefers-reduced-motion: reduce) {
                animation: none;
            }
        }
    }

    @keyframes flyout-panel-enter {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    .flyout__body [data-flyout-next] {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .flyout :is(a, button) {
        user-select: none;
    }

} // end @layer