.atom-dialog {
    position: absolute;
    overflow: hidden;
    right: 0;
    left: 0;
    margin: auto;
    width: 90%;
    max-width: 400px;
    border-radius: 4px;
    background: rgba($background, 1);
    box-shadow: 1px 2px 15px rgba(0, 0, 0, 0.1);
    &-top {
        top: 20%;
    }
    &-bottom {
        bottom: 12%;
    }
    &-center {
        top: 50%;
        transform: translateY(-50%);
    }
    &__header {
        padding: $gutter $gutter 0 $gutter;
        overflow: hidden;
        font-size: $bigger;
    }
    &__body {
        padding: $gutter;
        overflow-x: hidden;
        overflow-y: auto;
        max-height: 61.8vh;
        min-height: 80px;
        font-size: $big;
    }
}

/*zoom*/

.zoom-top-enter-active,
.zoom-top-enter-active {
    animation: zoomIn $speed ease-in-out;
}

.zoom-bottom-leave-active,
.zoom-bottom-leave-active {
    animation: zoomOut $speed cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes zoomOut {
    0% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

/*zoom*/

.zoom-center-enter-active {
    animation: zoomCenterIn $speed ease-in-out;
}

.zoom-center-leave-active {
    animation: zoomCenterout $speed cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes zoomCenterIn {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(1.1);
    }
    100% {
        opacity: 1;
    }
}

@keyframes zoomCenterout {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) scale(0.9);
    }
}