body.dialog-is-open {
    overflow: hidden;
}

:is(.chrome,.edge) body.dialog-is-open {
    margin-left: -9px;
}

dialog[role="modal"] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    overflow: auto;
    opacity: 0;
    display: none;
    justify-content: center;
    align-items: flex-start;
    border: 0;
    scroll-behavior: smooth;
    --card-p: 3rem;
    --card-fs: 0.95rem;

    &.align-items-center {
        align-items: center;            
    }

    &[open] {
        display: flex;
        opacity: 1;
        z-index: 1;
    }

    .popup {
        font-size: clamp(14px, 4cqw, 16px);
        position: relative;
        box-sizing: border-box;
        color: var(--color-base-content);
        background-color: var(--color-base-100);
        border-radius: var(--border-radius, 10px);
        width: min(var(--width), 90vw);
        margin: 2em 0;
        box-shadow: 10px 10px 26px -12px rgba(0,0,0,0.75);
        opacity: 0;

        main {
            .dialog {
                & > * {
                    margin-top: 1.75em;
                }

                & > *:first-child {
                    margin-top: 0;
                }
            }
        }

        footer {
            font-size: 14px;
        }

        .ux-icon-close {
            cursor: pointer;
            
            svg {
                aspect-ratio: 1;
                width: 16px;
                transition: all 0.3s;
                pointer-events: none;
                fill: var(--color-base-content);
            }

            &:hover svg {
                transform: rotate(90deg);
            }
        }
    }

    .ux-icon-close {
        aspect-ratio: 1;
        width: 18px;
        position: absolute;
        right: 10px;
        top: 12px;

    }
}

@keyframes dialog_fade_in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes dialog_fade_out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media screen and (max-width: 720px) {
    &.align-items-center {
        align-items: flex-start;
    }

    dialog[role="modal"] {
        .popup {
            width: min(var(--width), 94%);
            margin: 1em 0;

            &.small {
                width: min(var(--width), 94%);
            }
        }
    }
}