/* Variables come from Blogar Light/Dark */
:root {
    --swal-color-bg-light: var(--color-lightest);
    --swal-color-bg-dark: var(--color-dark);
    --swal-color-text-light: var(--bs-body-color);
    --swal-color-text-dark: var(--color-white);
    --swal-color-btn-bg: var(--color-primary);
    --swal-color-btn-bg-hover: var(--color-primary-alt);
    --swal-color-btn-text: var(--color-white);
    --swal-box-shadow-btn-focus: 0 0 0 3px rgba(87, 166, 74, .5);
}

/* No editing required after this point */
body.active-light-mode {
    --swal-color-bg: var(--swal-color-bg-light);
    --swal-color-text: var(--swal-color-text-light);
}

body.active-dark-mode {
    --swal-color-bg: var(--swal-color-bg-dark);
    --swal-color-text: var(--swal-color-text-dark);
}

.swal2-confirm {
    background-color: var(--swal-color-btn-bg);
    color: var(--swal-color-btn-text);
}

.swal2-container .swal2-popup {
    background-color: var(--swal-color-bg);
    color: var(--swal-color-text);
}

.swal2-confirm:focus {
    box-shadow: var(--swal-box-shadow-btn-focus);
}

.swal2-confirm:hover {
    background-image: none;
    background-color: var(--swal-color-btn-bg-hover);
}

[class^='swal2-success-circular'], .swal2-success-fix {
    background-color: var(--swal-color-bg) !important;
}