.dialog-container {
    position: relative;
}
.dialog-container[data-type="no-bg"] {
    --dialog-color: var(--bg-color);
    --dialog-text-color: var(--sccss-text);
}
.dialog-container[data-type="success"] {
    --dialog-color: var(--sccss);
    --dialog-text-color: var(--sccss-text);
}
.dialog-container[data-type="warning"] {
    --dialog-color: var(--wrnng);
    --dialog-text-color: var(--wrnng-text);
}
.dialog-container[data-type="danger"] {
    --dialog-color: var(--dngr);
    --dialog-text-color: var(--dngr-text);
}
.dialog-container[data-visible="1"] > :first-child {
    pointer-events: none;
    touch-action: none;
}
.dialog {
    border-radius: var(--radius);
}
.dialog > * {
    display: flex;
}
.dialog,
.dialog-arrow {
    z-index: 1;
    opacity: 0;
    position: absolute;
    background-color: var(--bg-color);
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
}
.dialog-arrow {
    width: 10px;
    height: 10px;
    border-top: none;
    border-left: none;
}
.dialog-header {
    background-color: var(--dialog-color);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--dialog-text-color);
    padding: 0.5rem;
    gap: .25rem;
    border-top-left-radius: calc(var(--radius) - 1px);
    border-top-right-radius: calc(var(--radius) - 1px);
}
.dialog-body {
    padding: 0.5rem;
}
.dialog-footer {
    flex-flow: row wrap;
    padding: 0.5rem;
    gap: 1rem;
}
.dialog-footer button:last-child {
    margin-left: auto;
}
.dialog-container[data-visible="0"] .dialog, 
.dialog-container[data-visible="0"] .dialog + .dialog-arrow {
    display: none;
}
.dialog-container[data-visible="1"] .dialog, 
.dialog-container[data-visible="1"] .dialog + .dialog-arrow {
    opacity: 1;
    z-index: 104;
}