.msi-request-popup {
    --msi-request-popup-max-width: 46.875rem;
    --msi-request-popup-mobile-max-width: 21.375rem;
    --msi-request-popup-backdrop: rgba(1, 19, 39, .38);

    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: max(1rem, var(--safe-area-top)) max(1rem, var(--safe-area-right)) max(1rem, var(--safe-area-bottom)) max(1rem, var(--safe-area-left));
}

.msi-request-popup[hidden] {
    display: none;
}

.msi-request-popup__backdrop {
    position: absolute;
    inset: 0;
    background: var(--msi-request-popup-backdrop);
}

.msi-request-popup__dialog {
    position: relative;
    z-index: 1;
    width: min(var(--msi-request-popup-max-width), 100%);
    max-height: calc(var(--viewport-height) - 2rem - var(--safe-area-top) - var(--safe-area-bottom));
    overflow: auto;
    overscroll-behavior: contain;
    border: var(--border-1);
    color: var(--color-text);
    background: var(--color-page);
}

.msi-request-popup__close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    display: inline-flex;
    width: var(--control-min-size);
    height: var(--control-min-size);
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    color: var(--color-text);
    background: transparent;
    cursor: pointer;
}

.icon-close {
    position: relative;
    display: block;
    width: 1.625rem;
    height: 1.625rem;
}

.icon-close::before,
.icon-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: .125rem;
    border-radius: 999px;
    background: currentColor;
}

.icon-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.icon-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.msi-request-popup__close:focus-visible {
    outline: .1875rem solid var(--color-marked);
    outline-offset: -.1875rem;
}

html.has-msi-popup {
    overflow: hidden;
}

@media (max-width: 40rem) {
    .msi-request-popup {
        padding-inline: max(1rem, var(--safe-area-left)) max(1rem, var(--safe-area-right));
    }

    .msi-request-popup__dialog {
        width: min(var(--msi-request-popup-mobile-max-width), 100%);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .msi-request-popup:not([hidden]) .msi-request-popup__backdrop {
        animation: msi-popup-fade-in .18s ease both;
    }

    .msi-request-popup:not([hidden]) .msi-request-popup__dialog {
        animation: msi-popup-enter .22s ease both;
    }
}

@keyframes msi-popup-fade-in {
    from { opacity: 0; }
}

@keyframes msi-popup-enter {
    from { opacity: 0; transform: translateY(.75rem); }
}