// 1. Use a `::before` pseudo-element instead of `::backdrop` to make fading possible.
// 2. HeaderDialog experimentally supports RTL.
// 3. Use an `::after` pseudo-element to create a box shadow that is not rounded in corners.

@use '../../tools/typography';
@use 'theme';

.HeaderDialog {
    @include typography.generate(theme.$header-dialog-typography);

    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: 0;
    margin: 0;
    overflow: visible;
    border: none;
    background-color: transparent;
    visibility: hidden;
    transform: translateX(#{theme.$header-dialog-width});

    // 1.
    &::backdrop {
        background-color: transparent;
    }

    // 1.
    &::before {
        content: '';
        position: fixed;
        inset-block: 0;
        inset-inline-start: auto;
        inset-inline-end: theme.$header-dialog-width;
        z-index: -2;
        width: 100vw;
        background-color: theme.$header-dialog-backdrop-background-color;
        visibility: hidden;
        opacity: 0;
    }

    @media (prefers-reduced-motion: no-preference) {
        transition-property: visibility, transform;
        transition-duration: theme.$header-dialog-transition-duration;
        transition-timing-function: theme.$header-dialog-transition-timing;

        // 1.
        &::before {
            transition-property: visibility, opacity;
            transition-duration: inherit;
            transition-timing-function: inherit;
        }
    }
}

// 2.
.HeaderDialog:dir(rtl) {
    transform: translateX(#{-1 * theme.$header-dialog-width});
}

.HeaderDialog__panel {
    $_shadow-offset: -2rem;

    position: absolute;
    inset-block: 0;
    inset-inline-start: auto;
    inset-inline-end: 0;
    display: grid;
    width: theme.$header-dialog-width;
    height: 100%;
    color: theme.$header-dialog-color;
    background-color: theme.$header-dialog-background-color;

    // 3.
    &::after {
        content: '';
        position: absolute;
        inset: $_shadow-offset 0;
        z-index: -1;
        box-shadow: theme.$header-dialog-shadow;
        visibility: hidden;
        opacity: 0;

        @media (prefers-reduced-motion: no-preference) {
            transition-property: visibility, opacity;
            transition-duration: theme.$header-dialog-transition-duration;
        }
    }
}

.HeaderDialog__content {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.HeaderDialog[open] {
    visibility: visible;
    transform: translateX(0);
}

// 1., 3.
.HeaderDialog[open]::before,
.HeaderDialog[open] > .HeaderDialog__panel::after {
    visibility: visible;
    opacity: 1;
}
