* {
    --toast-white: 255, 255, 255;
    --toast-black: 28, 28, 30;

    --toast-green: 102, 187, 106;
    --toast-red: 239, 83, 80;
    --toast-orange: 255, 167, 38;
    --toast-yellow: 212, 194, 129;

    --toast-nutral: 220, 220, 220;
    --toast-gray: 245, 245, 245;
    --toast-dark-gray: 120, 120, 120;

    --toast-lightmode: #ffffff;
    --toast-darkmode: #1b1b1e;

    --toast-progressbar: #c7c7c7;

    --box-shaddow-inset: none;
    --box-shaddow-outset: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* ============================= */
/* POSITION */
/* ============================= */

.notification {
    position: fixed;
    z-index: 999999;
    min-width: 320px;
    max-width: 380px;
    width: fit-content;
}

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

/* ============================= */
/* CONTAINER */
/* ============================= */

.notification-container {
    background: rgb(var(--surface, 255 255 255));
    border: 1px solid rgb(var(--border, 230 230 230));
    border-radius: 16px;
    width: fit-content;
    margin-top: 8px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);

    transition: opacity 300ms ease-in-out, transform 300ms;
}

.notification-container:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    filter: blur(20px);
    top: 50%;
    transform: translateY(-50%);
    left: -20px;
    border-radius: 100%;
}

/* ============================= */
/* CONTENT */
/* ============================= */

.notification-block {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    padding-right: 44px;
}

.notification-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.notification-message {
    font-size: 13px;
    color: inherit;
}

/* ============================= */
/* ICON */
/* ============================= */

.notification-icon {
    min-width: 1.7rem;
    border-radius: 10px;
    padding: 6px;
}

/* ============================= */
/* DISMISS */
/* ============================= */

.notification-dismiss-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 6px;
    transition: background 200ms;
}

.notification-dismiss-btn:hover {
    background: rgba(0,0,0,0.05);
}

.notification-dismiss-btn svg {
    width: 1.2rem;
}

/* ============================= */
/* TOAST TYPES */
/* ============================= */

.notification-toast-default {
    background: #fff;
    color: rgba(var(--toast-black));
}

/* — SUCCESS — */
.notification-toast-success {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    color: #166534;
}

.notification-toast-success svg path {
    stroke: #16A34A;
}

.notification-toast-success .notification-icon {
    background: #DCFCE7;
}

.notification-toast-success .notification-title {
    color: #15803D;
}

.notification-toast-success:before {
    background: #DCFCE7;
}

/* — WARNING — */
.notification-toast-warning {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    color: #92400E;
}

.notification-toast-warning svg path {
    stroke: #D97706;
}

.notification-toast-warning .notification-icon {
    background: #FEF3C7;
}

.notification-toast-warning .notification-title {
    color: #B45309;
}

.notification-toast-warning:before {
    background: #FEF3C7;
}

/* — INFO — */
.notification-toast-info {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1E40AF;
}

.notification-toast-info svg path {
    stroke: #2563EB;
}

.notification-toast-info .notification-icon {
    background: #DBEAFE;
}

.notification-toast-info .notification-title {
    color: #1D4ED8;
}

.notification-toast-info:before {
    background: #DBEAFE;
}

/* — ERROR — */
.notification-toast-error {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
}

.notification-toast-error svg path {
    stroke: #DC2626;
}

.notification-toast-error .notification-icon {
    background: #FEE2E2;
}

.notification-toast-error .notification-title {
    color: #B91C1C;
}

.notification-toast-error:before {
    background: #FEE2E2;
}

/* ============================= */
/* LIGHT / DARK */
/* ============================= */

.light-mode .notification-toast-default {
    background: #fff;
    color: rgba(var(--toast-black));
}

.light-mode .notification-toast-success {
    background: #F0FDF4;
    color: #166534;
}

.light-mode .notification-toast-warning {
    background: #FFFBEB;
    color: #92400E;
}

.light-mode .notification-toast-info {
    background: #EFF6FF;
    color: #1E40AF;
}

.light-mode .notification-toast-error {
    background: #FEF2F2;
    color: #991B1B;
}

.dark-mode .notification-toast-default,
.dark-mode .notification-toast-success,
.dark-mode .notification-toast-warning,
.dark-mode .notification-toast-info,
.dark-mode .notification-toast-error {
    background: var(--toast-darkmode);
    color: #fff;
}

/* ============================= */
/* PROGRESSBAR */
/* ============================= */

.notification-progressbar {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 3px;
    width: 0;
    opacity: 0.7;
    border-radius: 2px;
}

.notification-toast-default .notification-progressbar {
    background: var(--toast-progressbar);
}

.notification-toast-success .notification-progressbar {
    background: #16A34A;
}

.notification-toast-warning .notification-progressbar {
    background: #D97706;
}

.notification-toast-error .notification-progressbar {
    background: #DC2626;
}

.notification-toast-info .notification-progressbar {
    background: #2563EB;
}

/* ============================= */
/* ALIGN */
/* ============================= */

.top-right .notification-container,
.bottom-right .notification-container {
    margin-left: auto;
}

.top-left .notification-container,
.bottom-left .notification-container {
    margin-right: auto;
}

.top-center .notification-container,
.bottom-center .notification-container {
    margin-left: auto;
    margin-right: auto;
}

/* ============================= */
/* ANIMATION */
/* ============================= */

.notification-animation {
    padding: 0.125rem;
    animation: update 1s linear infinite;
}

@keyframes update {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.slide-in.slide-down { animation: slideInDown 250ms ease; }
.slide-out.slide-down { animation: slideOutDown 250ms ease; }

@keyframes slideInDown {
    from { transform: translateY(-16px); opacity: 0; }
    to { transform: unset; opacity: 1; }
}

@keyframes slideOutDown {
    from { transform: unset; opacity: 1; }
    to { transform: translateY(-16px); opacity: 0; }
}

.slide-in.slide-up { animation: slideInUp 250ms ease; }
.slide-out.slide-up { animation: slideOutUp 250ms ease; }

@keyframes slideInUp {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: unset; opacity: 1; }
}

@keyframes slideOutUp {
    from { transform: unset; opacity: 1; }
    to { transform: translateY(16px); opacity: 0; }
}

.slide-in.slide-right { animation: slideInRight 250ms ease; }
.slide-out.slide-right { animation: slideOutRight 250ms ease; }

@keyframes slideInRight {
    from { transform: translateX(100vh); opacity: 0; }
    to { transform: unset; opacity: 1; }
}

@keyframes slideOutRight {
    from { transform: unset; opacity: 1; }
    to { transform: translateX(100vh); opacity: 0; }
}

.slide-in.slide-left { animation: slideInLeft 250ms ease; }
.slide-out.slide-left { animation: slideOutLeft 250ms ease; }

@keyframes slideInLeft {
    from { transform: translateX(-100vh); opacity: 0; }
    to { transform: unset; opacity: 1; }
}

@keyframes slideOutLeft {
    from { transform: unset; opacity: 1; }
    to { transform: translateX(-100vh); opacity: 0; }
}
