/* =========================================================
   CODERN
   TOAST / NOTIFICATION SYSTEM
   ========================================================= */


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

.codern-toast-container {
    position: fixed;

    top: 92px;
    right: 24px;

    z-index: 5000;

    width: min(
        calc(100vw - 48px),
        390px
    );

    display: flex;
    flex-direction: column;

    gap: 12px;

    pointer-events: none;
}


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

.codern-toast {
    position: relative;

    width: 100%;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: start;

    gap: 12px;

    padding: 15px 15px 18px;

    overflow: hidden;

    background:
        rgba(10, 14, 39, 0.96);

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius:
        16px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.38);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    pointer-events:
        auto;

    opacity:
        0;

    transform:
        translateX(30px)
        scale(0.96);

    transition:
        opacity 240ms ease,
        transform 280ms cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


/* =========================================================
   ENTER STATE
   ========================================================= */

.codern-toast.is-visible {
    opacity:
        1;

    transform:
        translateX(0)
        scale(1);
}


/* =========================================================
   EXIT STATE
   ========================================================= */

.codern-toast.is-leaving {
    opacity:
        0;

    transform:
        translateX(25px)
        scale(0.94);
}


/* =========================================================
   TYPE ACCENTS
   ========================================================= */

.codern-toast--success {
    border-color:
        rgba(52, 211, 153, 0.28);
}

.codern-toast--error {
    border-color:
        rgba(248, 113, 113, 0.30);
}

.codern-toast--warning {
    border-color:
        rgba(251, 191, 36, 0.30);
}

.codern-toast--info {
    border-color:
        rgba(96, 165, 250, 0.30);
}


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

.codern-toast-icon {
    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        rgba(255, 255, 255, 0.06);
}


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

.codern-toast--success
.codern-toast-icon {
    color:
        #34d399;

    background:
        rgba(52, 211, 153, 0.10);
}


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

.codern-toast--error
.codern-toast-icon {
    color:
        #f87171;

    background:
        rgba(248, 113, 113, 0.10);
}


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

.codern-toast--warning
.codern-toast-icon {
    color:
        #fbbf24;

    background:
        rgba(251, 191, 36, 0.10);
}


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

.codern-toast--info
.codern-toast-icon {
    color:
        #60a5fa;

    background:
        rgba(96, 165, 250, 0.10);
}


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

.codern-toast-icon svg {
    width:
        19px;

    height:
        19px;

    display:
        block;
}


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

.codern-toast-content {
    min-width:
        0;

    padding-top:
        1px;
}


/* =========================================================
   TITLE
   ========================================================= */

.codern-toast-title {
    margin:
        0 0 4px;

    color:
        var(--color-heading);

    font-size:
        0.88rem;

    font-weight:
        700;

    line-height:
        1.3;
}


/* =========================================================
   MESSAGE
   ========================================================= */

.codern-toast-message {
    margin:
        0;

    color:
        var(--color-text-secondary);

    font-size:
        0.82rem;

    line-height:
        1.5;

    overflow-wrap:
        anywhere;
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.codern-toast-close {
    width:
        30px;

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 30px;

    padding:
        0;

    border:
        1px solid transparent;

    border-radius:
        8px;

    background:
        transparent;

    color:
        rgba(255, 255, 255, 0.48);

    cursor:
        pointer;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease;
}

.codern-toast-close:hover {
    color:
        var(--color-heading);

    background:
        rgba(255, 255, 255, 0.07);

    border-color:
        rgba(255, 255, 255, 0.08);
}

.codern-toast-close:focus-visible {
    outline:
        2px solid var(--color-primary);

    outline-offset:
        2px;
}


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

.codern-toast-close svg {
    width:
        15px;

    height:
        15px;

    display:
        block;
}


/* =========================================================
   TIMER / PROGRESS BAR
   ========================================================= */

.codern-toast-progress {
    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    height:
        3px;

    transform-origin:
        left center;

    background:
        var(--color-primary);

    opacity:
        0.72;

    animation:
        codern-toast-progress
        var(--toast-duration, 4000ms)
        linear
        forwards;
}


/* =========================================================
   PROGRESS COLORS
   ========================================================= */

.codern-toast--success
.codern-toast-progress {
    background:
        #34d399;
}

.codern-toast--error
.codern-toast-progress {
    background:
        #f87171;
}

.codern-toast--warning
.codern-toast-progress {
    background:
        #fbbf24;
}

.codern-toast--info
.codern-toast-progress {
    background:
        #60a5fa;
}


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

@keyframes codern-toast-progress {

    from {
        transform:
            scaleX(1);
    }

    to {
        transform:
            scaleX(0);
    }
}


/* =========================================================
   HOVER
   ========================================================= */

.codern-toast:hover {
    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.46);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .codern-toast-container {
        top:
            78px;

        right:
            14px;

        left:
            14px;

        width:
            auto;

        gap:
            10px;
    }


    .codern-toast {
        padding:
            13px 13px 17px;

        border-radius:
            14px;

        gap:
            10px;
    }


    .codern-toast-icon {
        width:
            35px;

        height:
            35px;

        flex-basis:
            35px;
    }


    .codern-toast-title {
        font-size:
            0.84rem;
    }


    .codern-toast-message {
        font-size:
            0.78rem;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .codern-toast {
        transition:
            none !important;
    }

    .codern-toast-progress {
        animation:
            none !important;
    }
}