$width: 400px;
$bigWidth: 600px;

$mobileWidth: 280px;
$mobileBigWidth: 480px;

.modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba($color: $color-black, $alpha: 0.15);
    opacity: 0;
    pointer-events: none;
    transition: all 500ms ease;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;

    .modal {
        margin-top: -50px;
        padding: 20px 30px;
        background: $color-white;
        box-shadow: 0 2px 16px rgba($color: $color-primary-darken, $alpha: 0.2);
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        transform: scale(0);
        transition: all 300ms cubic-bezier(0.32, 0.26, 0.71, 1.29);

        .modal-title {
            margin: 5px 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: bold;
            font-size: 18px;
            color: $color-primary-dark;
            text-shadow: 0 2px 6px rgba($color: $color-primary-dark, $alpha: 0.4);
        }

        .modal-body {
            margin: 10px 0;
            font-size: 14px;
            color: $color-primary-darken;
        }
    }

    .modal-small {
        width: $width;
    }

    .modal-big {
        width: $bigWidth;
    }
}

.modal-show {
    opacity: 1;
    pointer-events: visible;

    .modal {
        transform: scale(1);
    }
}

@media (max-width: 768px) {
    .modal-mask {
        .modal {
            margin-top: 0;
            padding: 18px 20px;
        }

        .modal-small {
            width: $mobileWidth;
        }

        .modal-big {
            width: $mobileBigWidth;
        }
    }
}
