// 1. In order to be transitioned, the visibility of the dialog is controlled through `opacity` and `visibility`
//    properties instead of the default `display`.
// 2. Simply use Modal background color instead of `::backdrop` to make fading possible. (A pseudo-element cannot be
//    used because it covers the scrollbar of the ModalDialog when the inside scrolling is turned off.)
// 3. Use background gradient to prevent background from flickering during transition in Safari.
// 4. Clip overflow during transition of the docked variant on mobile screens.
// 5. Allow scrolling through the modal. Has no effect unless the modal is taller than the viewport.
// 6. Restore text selection after `all: unset`.

@use 'theme';

.Modal {
    --modal-scale: #{theme.$transition-scale-ratio};

    all: unset;
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex; // 1.
    padding-block: theme.$padding-y;
    overflow-y: auto; // 5.
    background: linear-gradient(#{theme.$backdrop-background-color}, #{theme.$backdrop-background-color}); // 2., 3.
    visibility: hidden; // 1.
    opacity: 0; // 1.
    pointer-events: none; // 1.
    overscroll-behavior: contain;

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

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

.Modal:has(.ModalDialog--scrollable) {
    overflow: hidden; // 4.
}

.Modal--center,
.Modal:not(.Modal--top, .Modal--bottom) {
    --modal-top: auto;
    --modal-bottom: auto;
    --modal-translate-y: 0;
    --modal-transform-origin: center center;
}

.Modal--top {
    --modal-top: 0;
    --modal-bottom: auto;
    --modal-translate-y: #{-1 * theme.$transition-shift-distance};
    --modal-transform-origin: top center;
}

.Modal--bottom {
    --modal-top: auto;
    --modal-bottom: 0;
    --modal-translate-y: #{theme.$transition-shift-distance};
    --modal-transform-origin: bottom center;
}

.Modal[open] {
    --modal-scale: 1;
    --modal-translate-y: 0;

    visibility: visible;
    opacity: 1;
    user-select: text; // 6.
    pointer-events: auto;
}
