#dialog {
    // Reference: https://dev.to/nicm42/fading-in-and-fading-out-with-css-transitions-3lc1
    &.dialog-container {
        opacity: 0;
        transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;
        visibility: hidden;
        pointer-events: none;
        z-index: 999;

        &.show {
            visibility: visible;
            opacity: 1;
            transition-delay: 0ms;
            pointer-events: unset;
        }
    }

    .dialog-backdrop {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        width: 100vw;
        z-index: 999;
        background: rgba(0, 0, 0, 0.30);
    }

    .dialog-box {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 70vw;
        background-color: #fff;
        z-index: 1000;
        border-radius: 14px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;

        .dialog-body {
            margin: 20px 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex-grow: 1;
            align-items: center;
    
            .dialog-content {
                color: #000;
                text-align: center;
                font-size: 14px;
                line-height: 140%;
            }
        }

        .dialog-action {
            padding: 8px;
            border-top: 0.33px solid rgba(128, 128, 128, 0.55);
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            width: 100%;

            .dialog-button {
                color: #00A759;
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                line-height: 140%;
                padding: 3px 0;
                flex-grow: 1;
            }
        }

    }
}