@charset "UTF-8";

:root {
    --dialog-red: #cc5a5a;
    --dialog-blue: #2f80ed;
    --dialog-gray: #969699;
    --dialog-default-confirm: var(--dialog-blue);
    --dialog-default-cancel: var(--dialog-gray);
}

.dialog { display: flex; justify-content: center; align-items: center; }

.dialog, .dialog > * { box-sizing: border-box; }
.dialog { position: fixed; top: 0; left: 0; z-index: 99999; width: 100%; height: 100%; }
.dialog.confirm { background: rgba(0, 0, 0, .7); backdrop-filter: blur(1px); }
.dialog.alert { background: transparent; backdrop-filter: blur(0); }
.dialog.inactive { display: none; }

.dialog > .dialog-wrap { position: relative;  padding: 36px; border-radius: 24px; background: #fff; box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 12px; }
.dialog .dialog-title { height: 32px; line-height: 32px; font-size: 20px; color: #212529; font-weight: 700; }
.dialog .dialog-contents { line-height: 1.8; font-size: 20px; font-weight: 500; color: #444; overflow-y: auto; word-break: break-all; }
.dialog .dialog-action { margin-top: 40px; display: flex; justify-content: center; align-items: center; gap: 12px; text-align: right; }

.dialog .dialog-action button { padding: 0 24px; min-width: 100px;  height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 16px; color: #fff; font-size: 20px; font-weight: 500; border: 0; outline: 0; letter-spacing: 2px; transition: opacity 0.1s ease; }

.dialog .dialog-action .cancel { background: var(--btn-cancel-bg, var(--dialog-default-cancel)); }
.dialog .dialog-action .confirm { background: var(--btn-confirm-bg, var(--dialog-default-confirm)); }

.dialog.bg-red-confirm { --btn-confirm-bg: var(--dialog-red); }
.dialog.bg-blue-confirm { --btn-confirm-bg: var(--dialog-blue); }
.dialog.bg-gray-confirm { --btn-confirm-bg: var(--dialog-gray); }

.dialog.bg-red-cancel { --btn-cancel-bg: var(--dialog-red); }
.dialog.bg-blue-cancel { --btn-cancel-bg: var(--dialog-blue); }
.dialog.bg-gray-cancel { --btn-cancel-bg: var(--dialog-gray); }

.dialog .inactive { display: none !important; }

.dialog .dialog-action button:hover { opacity: 0.8; cursor: pointer; }