/* ==========================================================================
   TOPPERWORK - GLOBAL TOAST NOTIFICATION SYSTEM
   ==========================================================================
   Phase: 1

   Purpose:
   - Reusable application-wide toast notifications
   - Supports success, error, warning and info variants
   - Mobile-first responsive behavior
   - Safe for Android and iOS WebView
   - Uses the global TopperWork design token system
   - Supports dynamic duration-based progress animation
   ========================================================================== */


/* ==========================================================================
   1. TOAST CONTAINER
   ========================================================================== */

.tw-toast-container {
    position: fixed;

    top: calc(
        var(--space-4)
        + var(--safe-area-top)
    );

    right: calc(
        var(--space-4)
        + var(--safe-area-right)
    );

    left: auto;

    z-index: var(--z-critical);

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: var(--space-3);

    width: min(
        calc(
            100vw
            - var(--space-8)
            - var(--safe-area-left)
            - var(--safe-area-right)
        ),
        420px
    );

    pointer-events: none;
}


/* ==========================================================================
   2. TOAST BASE
   ========================================================================== */

.tw-toast {
    position: relative;

    display: grid;

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

    align-items: start;

    gap: var(--space-3);

    width: 100%;

    padding:
        var(--space-4)
        var(--space-4);

    background:
        var(--color-surface);

    border: 1px solid
        var(--color-border);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-xl);

    color:
        var(--color-text);

    font-family:
        var(--font-family-base);

    pointer-events: auto;

    opacity: 0;

    transform:
        translateX(
            calc(
                100%
                + var(--space-6)
            )
        );

    transition:
        opacity var(--transition-normal),
        transform var(--transition-normal);

    will-change:
        opacity,
        transform;
}


/* ==========================================================================
   3. ACTIVE STATE
   ========================================================================== */

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

    transform:
        translateX(0);
}


/* ==========================================================================
   4. EXIT STATE
   ========================================================================== */

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

    transform:
        translateX(
            calc(
                100%
                + var(--space-6)
            )
        );
}


/* ==========================================================================
   5. TOAST ICON
   ========================================================================== */

.tw-toast__icon {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 2.75rem;

    height: 2.75rem;

    border-radius:
        var(--radius-full);

    font-size:
        1.125rem;

    line-height: 1;
}


/* ==========================================================================
   6. TOAST CONTENT
   ========================================================================== */

.tw-toast__content {
    min-width: 0;

    padding-top:
        var(--space-1);
}


.tw-toast__title {
    margin: 0;

    color:
        var(--color-text);

    font-size:
        var(--font-size-base);

    font-weight:
        var(--font-weight-bold);

    line-height:
        var(--line-height-tight);
}


.tw-toast__message {
    margin:
        var(--space-1)
        0
        0;

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

    font-size:
        var(--font-size-sm);

    line-height:
        var(--line-height-normal);

    overflow-wrap:
        anywhere;
}


/* ==========================================================================
   7. CLOSE BUTTON
   ========================================================================== */

.tw-toast__close {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width:
        var(--touch-target-min);

    height:
        var(--touch-target-min);

    margin:
        calc(var(--space-2) * -1)
        calc(var(--space-2) * -1)
        0
        0;

    padding: 0;

    border: 0;

    border-radius:
        var(--radius-md);

    background:
        transparent;

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

    cursor: pointer;

    font: inherit;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);

    -webkit-tap-highlight-color:
        transparent;
}


.tw-toast__close:hover {
    background:
        var(--color-surface-secondary);

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


.tw-toast__close:active {
    transform:
        scale(0.94);
}


.tw-toast__close:focus-visible {
    outline: 3px solid
        var(--color-focus-ring);

    outline-offset: 2px;
}


/* ==========================================================================
   8. SUCCESS VARIANT
   ========================================================================== */

.tw-toast--success {
    border-color:
        var(--color-success-border);
}


.tw-toast--success
.tw-toast__icon {
    background:
        var(--color-success-soft);

    color:
        var(--color-success);
}


/* ==========================================================================
   9. ERROR VARIANT
   ========================================================================== */

.tw-toast--error {
    border-color:
        var(--color-error-border);
}


.tw-toast--error
.tw-toast__icon {
    background:
        var(--color-danger-soft);

    color:
        var(--color-danger);
}


/* ==========================================================================
   10. WARNING VARIANT
   ========================================================================== */

.tw-toast--warning {
    border-color:
        var(--color-warning-border);
}


.tw-toast--warning
.tw-toast__icon {
    background:
        var(--color-warning-soft);

    color:
        var(--color-warning);
}


/* ==========================================================================
   11. INFO VARIANT
   ========================================================================== */

.tw-toast--info {
    border-color:
        var(--color-info-border);
}


.tw-toast--info
.tw-toast__icon {
    background:
        var(--color-info-soft);

    color:
        var(--color-info);
}


/* ==========================================================================
   12. PROGRESS BAR
   ========================================================================== */

.tw-toast__progress {
    position: absolute;

    right: 0;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 3px;

    overflow: hidden;

    border-radius:
        0
        0
        var(--radius-xl)
        var(--radius-xl);

    background:
        transparent;

    pointer-events: none;
}


.tw-toast__progress::before {
    content: '';

    display: block;

    width: 100%;

    height: 100%;

    background:
        var(--color-primary);

    transform-origin:
        left center;

    transform:
        scaleX(1);
}


/* ==========================================================================
   13. PROGRESS ANIMATION
   ========================================================================== */

/*
|--------------------------------------------------------------------------
| The JavaScript sets:
|
| --tw-toast-duration: 5000ms;
|
| on each individual toast.
|
| This allows every toast to have its own duration.
|--------------------------------------------------------------------------
*/

.tw-toast.is-visible
.tw-toast__progress::before {
    animation:
        tw-toast-progress
        var(--tw-toast-duration, 5000ms)
        linear
        forwards;
}


@keyframes tw-toast-progress {

    from {
        transform:
            scaleX(1);
    }

    to {
        transform:
            scaleX(0);
    }

}


/* ==========================================================================
   14. SEMANTIC PROGRESS COLORS
   ========================================================================== */

.tw-toast--success
.tw-toast__progress::before {
    background:
        var(--color-success);
}


.tw-toast--error
.tw-toast__progress::before {
    background:
        var(--color-danger);
}


.tw-toast--warning
.tw-toast__progress::before {
    background:
        var(--color-warning);
}


.tw-toast--info
.tw-toast__progress::before {
    background:
        var(--color-info);
}


/* ==========================================================================
   15. MOBILE RESPONSIVE
   ========================================================================== */

@media (
    max-width: 640px
) {

    .tw-toast-container {
        top: auto;

        right:
            calc(
                var(--space-3)
                + var(--safe-area-right)
            );

        bottom:
            calc(
                var(--space-3)
                + var(--safe-area-bottom)
            );

        left:
            calc(
                var(--space-3)
                + var(--safe-area-left)
            );

        width: auto;
    }


    .tw-toast {
        transform:
            translateY(
                calc(
                    100%
                    + var(--space-6)
                )
            );
    }


    .tw-toast.is-visible {
        transform:
            translateY(0);
    }


    .tw-toast.is-leaving {
        transform:
            translateY(
                calc(
                    100%
                    + var(--space-6)
                )
            );
    }

}


/* ==========================================================================
   16. REDUCED MOTION SUPPORT
   ========================================================================== */

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

    .tw-toast {
        transition:
            none;
    }


    .tw-toast__close {
        transition:
            none;
    }


    .tw-toast.is-visible
    .tw-toast__progress::before {
        animation:
            none;
    }

}