:root,
[data-bs-theme=light] {
    --toast-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial,
    Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;

    --toast-font-color: #282828;
    --toast-shadow: 0 4px 12px #0000001a;
    --toast-border: hsl(0, 0%, 93%);
    --toast-bg: white;

    --toast-success-bg: #ebfef2;
    --toast-success-border: hsl(145, 92%, 91%);
    --toast-success-color: hsl(140, 100%, 27%);

    --toast-error-bg: #fef0f0;
    --toast-error-border: hsl(0, 92%, 91%);
    --toast-error-color: hsl(0, 100%, 27%);

    --toast-warning-bg: #fffdf0;
    --toast-warning-border: hsl(50, 92%, 91%);
    --toast-warning-color: hsl(50, 100%, 27%);

    --toast-info-bg: #f0f8ff;
    --toast-info-border: hsl(210, 92%, 91%);
    --toast-info-color: hsl(210, 100%, 27%);
}

[data-bs-theme=dark] {
    --toast-font-color: #f1f1f1;
    --toast-shadow: 0 4px 12px #00000066;
    --toast-border: #444;
    --toast-bg: #1a1a1a;

    --toast-success-bg: #143d2a;
    --toast-success-border: #1f6f4d;
    --toast-success-color: #7ef2aa;

    --toast-error-bg: #3d1a1a;
    --toast-error-border: #8b2a2a;
    --toast-error-color: #ff8a8a;

    --toast-warning-bg: #3d361a;
    --toast-warning-border: #9f8a2a;
    --toast-warning-color: #fce96a;

    --toast-info-bg: #1a2a3d;
    --toast-info-border: #2a6f8b;
    --toast-info-color: #8ad1ff;
}

/* Layout */
.toaster {
    font-family: var(--toast-font-family);
    box-sizing: border-box;
    padding: 5px;
    margin: 0;
    list-style: none;
    outline: none;
    z-index: 999999999;
    position: fixed;
}

.toaster.bottom-right { bottom: 20px; right: 20px; }
.toaster.bottom-left { bottom: 20px; left: 20px; }
.toaster.top-right { top: 20px; right: 20px; }
.toaster.top-left { top: 20px; left: 20px; }
.toaster.bottom-center { bottom: 20px; left: 50%; transform: translateX(-50%); }
.toaster.top-center { top: 20px; left: 50%; transform: translateX(-50%); }

.toaster.top-center ol.rack,
.toaster.top-left ol.rack,
.toaster.top-right ol.rack {
    flex-direction: column-reverse;
}

.toaster.bottom-center ol.rack,
.toaster.bottom-left ol.rack,
.toaster.bottom-right ol.rack {
    flex-direction: column;
}

ol.rack {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

ol.rack li { margin-bottom: 16px; }
ol.rack.upperstack li { margin-bottom: -35px; transition: all 0.3s ease-in-out; }
ol.rack.upperstack li:hover { margin-bottom: 16px; scale: 1.03; }
ol.rack.lowerstack li { margin-top: -35px; }
ol.rack.lowerstack { margin-bottom: 0px; }

/* Toast Base */
.butteruptoast {
    border-radius: 8px;
    box-shadow: var(--toast-shadow);
    font-size: 13px;
    display: flex;
    padding: 16px;
    border: 1px solid var(--toast-border);
    background-color: var(--toast-bg);
    gap: 6px;
    color: var(--toast-font-color);
    width: 325px;
}

.butteruptoast.dismissable { cursor: pointer; }

.butteruptoast .icon {
    display: flex;
    align-items: start;
    flex-direction: column;
}
.butteruptoast .icon svg {
    width: 20px;
    height: 20px;
    fill: var(--toast-font-color);
}

.notif .desc { display: flex; flex-direction: column; gap: 2px; }
.notif .desc .title { font-weight: 600; line-height: 1.5; }
.notif .desc .message { font-weight: 400; line-height: 1.4; }

/* Types */
.butteruptoast.success {
    background-color: var(--toast-success-bg);
    color: var(--toast-success-color);
    border: solid 1px var(--toast-success-border);
}
.butteruptoast.success .icon svg { fill: var(--toast-success-color); }

.butteruptoast.error {
    background-color: var(--toast-error-bg);
    color: var(--toast-error-color);
    border: solid 1px var(--toast-error-border);
}
.butteruptoast.error .icon svg { fill: var(--toast-error-color); }

.butteruptoast.warning {
    background-color: var(--toast-warning-bg);
    color: var(--toast-warning-color);
    border: solid 1px var(--toast-warning-border);
}
.butteruptoast.warning .icon svg { fill: var(--toast-warning-color); }

.butteruptoast.info {
    background-color: var(--toast-info-bg);
    color: var(--toast-info-color);
    border: solid 1px var(--toast-info-border);
}
.butteruptoast.info .icon svg { fill: var(--toast-info-color); }

/* Buttons */
.toast-buttons {
    display: flex;
    gap: 8px;
    width: 100%;
    align-items: center;
    flex-direction: row;
    margin-top: 16px;
}

.toast-buttons .toast-button {
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}

.toast-buttons .toast-button.primary { background-color: var(--toast-font-color); color: white; border: none; }
.toast-buttons .toast-button.secondary {
    background-color: var(--toast-info-bg);
    color: var(--toast-info-color);
    border: solid 1px var(--toast-info-border);
}

.butteruptoast.success .toast-button.primary {
    background-color: var(--toast-success-color); color: white;
}
.butteruptoast.success .toast-button.secondary {
    background-color: var(--toast-success-border);
    color: var(--toast-success-color);
    border: solid 1px var(--toast-success-color);
}

.butteruptoast.error .toast-button.primary {
    background-color: var(--toast-error-color); color: white;
}
.butteruptoast.error .toast-button.secondary {
    background-color: var(--toast-error-border);
    color: var(--toast-error-color);
    border: solid 1px var(--toast-error-color);
}

.butteruptoast.warning .toast-button.primary {
    background-color: var(--toast-warning-color); color: hsl(45, 100%, 15%);
}
.butteruptoast.warning .toast-button.secondary {
    background-color: var(--toast-warning-border);
    color: var(--toast-warning-color);
    border: solid 1px var(--toast-warning-color);
}

.butteruptoast.info .toast-button.primary {
    background-color: var(--toast-info-color); color: white;
}
.butteruptoast.info .toast-button.secondary {
    background-color: var(--toast-info-border);
    color: var(--toast-info-color);
    border: solid 1px var(--toast-info-color);
}

/* Animations */
.toastUp {
    animation: slideUp 0.3s ease-in-out;
    animation-fill-mode: forwards;
}
.toastDown {
    animation: slideDown 0.3s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes slideDown {
    0% { opacity: 0; transform: translateY(-100%); scale: 0.8; }
    100% { opacity: 1; transform: translateY(0); scale: 1; }
}
@keyframes slideUp {
    0% { opacity: 0; transform: translateY(100%); scale: 0.8; }
    100% { opacity: 1; transform: translateY(0); scale: 1; }
}
.fadeOutToast {
    animation: fadeOut 0.3s ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes fadeOut {
    0% { opacity: 1; scale: 1; }
    100% { opacity: 0; scale: 0.8; }
}

/* Glass Theme */
.butteruptoast.glass {
    background-color: rgba(255, 255, 255, 0.42) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    box-shadow: var(--toast-shadow);
    color: var(--toast-font-color);
}
.butteruptoast.glass.success { background-color: rgba(235, 254, 242, 0.42) !important; color: var(--toast-success-color); }
.butteruptoast.glass.error { background-color: rgba(254, 240, 240, 0.42) !important; color: var(--toast-error-color); }
.butteruptoast.glass.warning { background-color: rgba(255, 253, 240, 0.42) !important; color: var(--toast-warning-color); }
.butteruptoast.glass.info { background-color: rgba(240, 248, 255, 0.42) !important; color: var(--toast-info-color); }

/* Brutalist Theme */
.butteruptoast.brutalist {
    border-radius: 0px;
    box-shadow: var(--toast-shadow);
    border: solid 2px var(--toast-font-color);
    font-size: 13px;
    align-items: center;
    display: flex;
    padding: 16px;
    background-color: var(--toast-bg);
    gap: 6px;
    color: var(--toast-font-color);
    width: 325px;
}
.butteruptoast.brutalist.success {
    background-color: var(--toast-success-bg);
    color: var(--toast-success-color);
    border-color: var(--toast-success-color);
}
.butteruptoast.brutalist.error {
    background-color: var(--toast-error-bg);
    color: var(--toast-error-color);
    border-color: var(--toast-error-color);
}
.butteruptoast.brutalist.warning {
    background-color: var(--toast-warning-bg);
    color: var(--toast-warning-color);
    border-color: var(--toast-warning-color);
}
.butteruptoast.brutalist.info {
    background-color: var(--toast-info-bg);
    color: var(--toast-info-color);
    border-color: var(--toast-info-color);
}

.toast-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top: 2px solid #1c84ff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.butteruptoast {
    transition: background-color 0.3s, border-color 0.3s;
}