/* =========================================================
   SASADU TOAST NOTIFICATION
========================================================= */

.sasadu-toast {
    position: fixed;
    top: 28px;
    right: 28px;
    z-index: 99999;

    width: min(420px, calc(100vw - 40px));

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 16px 18px;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.18),
        0 4px 12px rgba(15, 23, 42, 0.08);

    overflow: hidden;

    animation:
        sasaduToastIn 0.55s cubic-bezier(.21, 1.02, .73, 1)
        forwards;
}


/* SUCCESS */

.sasadu-toast-success {
    border-left: 5px solid #16a34a;
}

.sasadu-toast-success .sasadu-toast-icon {
    background: #dcfce7;
    color: #16a34a;
}


/* ERROR */

.sasadu-toast-error {
    border-left: 5px solid #dc2626;
}

.sasadu-toast-error .sasadu-toast-icon {
    background: #fee2e2;
    color: #dc2626;
}


/* ICON */

.sasadu-toast-icon {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 18px;
}


/* CONTENT */

.sasadu-toast-content {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.sasadu-toast-content strong {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.sasadu-toast-content span {
    font-size: 13px;
    line-height: 1.45;
    color: #64748b;
}


/* CLOSE */

.sasadu-toast-close {
    width: 30px;
    height: 30px;

    border: none;
    background: transparent;

    color: #94a3b8;

    cursor: pointer;

    border-radius: 8px;

    transition: all 0.2s ease;
}

.sasadu-toast-close:hover {
    background: #f1f5f9;
    color: #334155;
}


/* PROGRESS */

.sasadu-toast-progress {
    position: absolute;

    left: 0;
    bottom: 0;

    height: 3px;
    width: 100%;

    background: currentColor;

    transform-origin: left;

    animation: sasaduToastProgress 4s linear forwards;
}

.sasadu-toast-success .sasadu-toast-progress {
    color: #16a34a;
}

.sasadu-toast-error .sasadu-toast-progress {
    color: #dc2626;
}


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

@keyframes sasaduToastIn {

    0% {
        opacity: 0;
        transform:
            translateX(120px)
            scale(0.92);
    }

    60% {
        opacity: 1;
        transform:
            translateX(-8px)
            scale(1.02);
    }

    100% {
        opacity: 1;
        transform:
            translateX(0)
            scale(1);
    }
}


@keyframes sasaduToastOut {

    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(120px);
    }
}


@keyframes sasaduToastProgress {

    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}