.overlayView {
    position: fixed;
    inset: 0;
    height: 100dvh;
    width: 100dvw;
}

.overlayProvider {
    composes: overlayView;

    pointer-events: none;
    z-index: 10000;
}

.overlayShade {
    composes: overlayView;

    background: var(--overlay);
    backdrop-filter: blur(3px) grayscale(.5) saturate(180%);
    pointer-events: none;
    transition: opacity 600ms var(--swift-out);
}

.overlayProvider:not(:has(.overlay:not(.overlayTransitionLeaveActive):not(.slideOverTransitionLeaveActive))) .overlayShade {
    opacity: 0;
}

.overlay {
    position: fixed;
    display: flex;
    inset: 0;
    height: 100dvh;
    width: 100dvw;
    outline: 0;

    > .basePaneStructure {
        display: flex;
        margin: auto;
        max-height: min(840px, 100dvh - 180px);
        width: calc(100dvw - 90px);
        flex-flow: column nowrap;
        box-shadow: var(--shadow-lg);
        overflow: auto;
        transition: 420ms var(--swift-out);
        transition-property: filter, scale;

        > .paneHeader,
        > .paneFooter {
            position: sticky;
            z-index: 100;
        }

        > .paneHeader {
            top: 0;
            padding-bottom: 18px;
            border-bottom: 1px solid var(--gray-100);
            box-shadow: var(--shadow-xs);

            &:has(+ :where(.tabs, .tabBarDefault)) {
                padding-bottom: 0;
                border-bottom: 0;
                box-shadow: none;
            }

            &:not(:has(+ :where(.tabs, .tabBarDefault))) {
                background: inherit;
            }
        }

        > .paneHeader + .tabBarDefault,
        > .paneHeader + .tabs > .tabBarDefault {
            position: sticky;
            top: var(--flux-pane-header-height, 60px);
            z-index: 100;
        }

        > .paneFooter {
            bottom: 0;
            margin-top: auto;
        }

        &::after {
            position: absolute;
            display: block;
            inset: 0;
            content: '';
            background: var(--overlay-secondary);
            opacity: 0;
            pointer-events: none;
            transition: opacity 600ms var(--swift-out);
            z-index: 1000;
        }
    }

    &.isCurrent > .basePaneStructure {
        pointer-events: auto;
    }

    &:not(.isCurrent) > .basePaneStructure {
        filter: brightness(.75) blur(3px) grayscale(.5) saturate(180%);
        scale: .975;

        &::after {
            opacity: 1;
        }
    }
}

.overlaySmall {
    composes: overlay;

    > .basePaneStructure {
        max-width: 420px;
    }
}

.overlayMedium {
    composes: overlay;

    > .basePaneStructure {
        max-width: 540px;
    }
}

.overlayLarge {
    composes: overlay;

    > .basePaneStructure {
        max-width: 720px;
    }
}

.slideOver {
    composes: overlay;

    justify-content: flex-end;

    > .basePaneStructure {
        margin: 9px;
        max-height: calc(100% - 18px);
        width: min(100dvw, 720px);
        contain: paint;
        transition-duration: 600ms;
        overflow: auto;
    }
}

.overlayTransitionEnterActive,
.overlayTransitionLeaveActive {
    transition: opacity 300ms var(--swift-out);

    > .basePaneStructure {
        transition: 300ms var(--swift-out);
        transition-property: opacity, scale;
    }
}

.overlayTransitionEnterFrom {
    opacity: 0;

    > .basePaneStructure {
        opacity: 0;
        scale: .9;
    }
}

.overlayTransitionLeaveTo {
    opacity: 0;

    > .basePaneStructure {
        opacity: 0;
        scale: .95;
    }
}

.slideOverTransitionEnterActive,
.slideOverTransitionLeaveActive {
    transition: opacity 480ms var(--swift-out);

    > .basePaneStructure {
        transition: 480ms var(--swift-out);
        transition-property: opacity, transform;
    }
}

.slideOverTransitionEnterFrom,
.slideOverTransitionLeaveTo {
    opacity: 0;
    transition-delay: 210ms;

    > .basePaneStructure {
        transform: translate3d(100%, 0, 0);
    }
}