.dialog {
    margin-top: 100px;
    padding: 0;
    z-index: 2147483647;
}
.dialog[open] {
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    animation: show-dialog 0.3s ease-out forwards;
}
.dialog.x-hide {
    -webkit-animation: hide-dialog 0.3s ease-out;
    animation: hide-dialog 0.3s ease-out;
}
.dialog::backdrop {
    pointer-events: none;
    background-color: rgba(0, 0, 0, .5);
}
.dialog[open]::backdrop {
    animation: show-backdrop 0.5s ease-out;
}
.dialog.x-hide::backdrop {
    animation: hide-backdrop 0.5s ease-out;
}

.dialog__wrapper {
    padding: 1rem;
}
.dialog__footer {
    display: flex;
}
.btn-confirm {
    margin-left: auto;
}

@keyframes show-dialog {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0%);
    }
}
@keyframes hide-dialog {
    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}

@keyframes show-backdrop {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes hide-backdrop {
    to {
        opacity: 0;
    }
}