:root {
    --qg-alert-primary: var(--qg-admin-primary-strong, #5d0b8c);
    --qg-alert-primary-contrast: var(--qg-admin-primary-contrast, #fff);
    --qg-alert-primary-shadow: var(--qg-admin-primary-shadow, rgb(67 9 100 / 16%));
    --qg-alert-danger: var(--qg-admin-danger, #b42318);
    --qg-alert-success: var(--qg-admin-success, #087f5b);
    --qg-alert-surface: var(--qg-admin-surface, #fff);
    --qg-alert-surface-muted: var(--qg-admin-surface-muted, #f7f8fb);
    --qg-alert-text: var(--qg-admin-text, #263238);
    --qg-alert-border: var(--qg-admin-border, #e2e6ed);
}

.swal2-popup.common-alert__popup {
    width: min(32rem, calc(100vw - 2rem));
    padding: 1.75rem;
    border: 1px solid var(--qg-alert-border);
    border-radius: 1rem;
    color: var(--qg-alert-text);
    box-shadow: 0 1.25rem 3rem rgb(38 50 56 / 24%);
}

.common-alert__title {
    color: var(--qg-alert-text) !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
}

.common-alert__content {
    color: #536171 !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
}

.common-alert__popup .swal2-icon.swal2-error {
    border-color: var(--qg-alert-danger);
    color: var(--qg-alert-danger);
}

.common-alert__popup .swal2-icon.swal2-success {
    border-color: var(--qg-alert-success);
    color: var(--qg-alert-success);
}

.common-alert__popup .swal2-icon.swal2-warning {
    border-color: #d97706;
    color: #d97706;
}

.common-alert__popup .swal2-actions {
    gap: .65rem;
    margin-top: 1.5rem;
}

.common-alert__confirm,
.common-alert__cancel {
    min-height: 2.65rem;
    padding: 0 1.15rem !important;
    border-radius: .65rem !important;
    font-size: .95rem !important;
    font-weight: 750 !important;
    box-shadow: none !important;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease !important;
}

.common-alert__confirm--primary {
    color: var(--qg-alert-primary-contrast) !important;
    background: var(--qg-alert-primary) !important;
}

.common-alert__confirm--danger {
    color: var(--qg-alert-primary-contrast) !important;
    background: var(--qg-alert-danger) !important;
}

.common-alert__cancel {
    color: var(--qg-alert-primary) !important;
    background: var(--qg-alert-surface-muted) !important;
}

.common-alert__confirm:hover,
.common-alert__confirm:focus,
.common-alert__cancel:hover,
.common-alert__cancel:focus {
    box-shadow: 0 .45rem .9rem var(--qg-alert-primary-shadow) !important;
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.common-alert-toast-container {
    position: fixed;
    z-index: 1085;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .7rem;
    width: min(30rem, calc(100vw - 2rem));
    pointer-events: none;
}

.common-alert-toast {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    min-height: 4.25rem;
    padding: .8rem 1rem;
    overflow: hidden;
    border: 1px solid var(--qg-alert-border);
    border-left: .35rem solid var(--qg-alert-primary);
    border-radius: .85rem;
    color: var(--qg-alert-text);
    background: var(--qg-alert-surface);
    box-shadow: 0 .85rem 2.2rem rgb(38 50 56 / 24%);
    pointer-events: auto;
    animation: common-alert-toast-in 190ms ease-out both;
}

.common-alert-toast--success {
    border-left-color: var(--qg-alert-success);
}

.common-alert-toast--error {
    border-left-color: var(--qg-alert-danger);
}

.common-alert-toast--warning {
    border-left-color: #d97706;
}

.common-alert-toast__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    color: var(--qg-alert-primary-contrast);
    background: var(--qg-alert-primary);
    font-size: 1.1rem;
    font-weight: 800;
}

.common-alert-toast--success .common-alert-toast__icon {
    background: var(--qg-alert-success);
}

.common-alert-toast--error .common-alert-toast__icon {
    background: var(--qg-alert-danger);
}

.common-alert-toast--warning .common-alert-toast__icon {
    background: #d97706;
}

.common-alert-toast__message {
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.common-alert-toast__close {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #667085;
    background: transparent;
    font-size: 1.35rem;
    line-height: 1;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.common-alert-toast__close:hover,
.common-alert-toast__close:focus {
    color: var(--qg-alert-text);
    background: var(--qg-alert-surface-muted);
    outline: 0;
    transform: scale(1.08);
}

.common-alert-toast.is-leaving {
    animation: common-alert-toast-out 170ms ease-in both;
}

@keyframes common-alert-toast-in {
    from {
        opacity: 0;
        transform: translateY(-.7rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes common-alert-toast-out {
    to {
        opacity: 0;
        transform: translateX(.9rem);
    }
}

@media (max-width: 575px) {
    .common-alert-toast-container {
        top: .75rem;
        right: .75rem;
        width: calc(100vw - 1.5rem);
    }
}