/*
|--------------------------------------------------------------------------
| PM UI Framework - Toasts
|--------------------------------------------------------------------------
| Component: Toast notifications
| Version: 0.1.0
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   Toast Container
   ========================================================================== */

.pm-toast-container {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    pointer-events: none;
}


/* Positions */

.pm-toast-container.top-right {
    top: 1.5rem;
    right: 1.5rem;
}

.pm-toast-container.top-left {
    top: 1.5rem;
    left: 1.5rem;
}

.pm-toast-container.bottom-right {
    bottom: 1.5rem;
    right: 1.5rem;
}

.pm-toast-container.bottom-left {
    bottom: 1.5rem;
    left: 1.5rem;
}


/* ==========================================================================
   Toast Base
   ========================================================================== */

.pm-toast {

    width: min(380px, calc(100vw - 2rem));

    display: flex;
    align-items: flex-start;
    gap: 0.75rem;

    padding: 1rem 1.25rem;

    background: var(--pm-surface, #ffffff);

    border-radius: var(--pm-radius-md, 12px);

    box-shadow: var(
        --pm-shadow-md,
        0 10px 25px rgba(0,0,0,.12)
    );

    border-left: 4px solid var(--pm-primary);

    color: var(--pm-text, #212121);

    pointer-events: auto;

    animation: pm-toast-in .35s ease forwards;

    position: relative;

}

/* ==========================================================================
   Toast Content
   ========================================================================== */

.pm-toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}


.pm-toast-title {

    margin: 0;

    font-size: 1rem;

    font-weight: 700;

    line-height: 1.3;

    color: var(--pm-heading, #212121);

}


.pm-toast-message {

    margin: 0;

    font-size: .95rem;

    line-height: 1.5;

    color: var(--pm-text-muted, #666);

}



/* ==========================================================================
   Toast Icon
   ========================================================================== */

.pm-toast-icon {

    flex-shrink: 0;

    width: 24px;

    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2rem;

}



/* ==========================================================================
   Toast Close Button
   ========================================================================== */

.pm-toast-close {

    position: absolute;

    top: .65rem;

    right: .75rem;


    width: 28px;

    height: 28px;


    display: flex;

    align-items: center;

    justify-content: center;


    border: 0;

    background: transparent;

    cursor: pointer;


    font-size: 1.25rem;

    line-height: 1;


    color: var(--pm-text-muted, #777);


    transition: 
        color .2s ease,
        transform .2s ease;

}


.pm-toast-close:hover {

    color: var(--pm-text, #212121);

    transform: scale(1.1);

}

/* ==========================================================================
   Toast Variants
   ========================================================================== */


/* Success */

.pm-toast-success {

    border-left-color: var(--pm-success, #2E7D32);

}


.pm-toast-success .pm-toast-icon {

    color: var(--pm-success, #2E7D32);

}



/* Danger */

.pm-toast-danger {

    border-left-color: var(--pm-danger, #D32F2F);

}


.pm-toast-danger .pm-toast-icon {

    color: var(--pm-danger, #D32F2F);

}



/* Warning */

.pm-toast-warning {

    border-left-color: var(--pm-warning, #F57C00);

}


.pm-toast-warning .pm-toast-icon {

    color: var(--pm-warning, #F57C00);

}



/* Info */

.pm-toast-info {

    border-left-color: var(--pm-info, #1976D2);

}


.pm-toast-info .pm-toast-icon {

    color: var(--pm-info, #1976D2);

}



/* ==========================================================================
   Filled Toast Variants
   ========================================================================== */


.pm-toast-filled {

    color: #ffffff;

}


.pm-toast-filled .pm-toast-title,
.pm-toast-filled .pm-toast-message {

    color: #ffffff;

}


.pm-toast-filled .pm-toast-close {

    color: rgba(255,255,255,.85);

}


.pm-toast-filled .pm-toast-close:hover {

    color: #ffffff;

}



/* Filled Colors */

.pm-toast-filled.pm-toast-success {

    background: var(--pm-success, #2E7D32);

}


.pm-toast-filled.pm-toast-danger {

    background: var(--pm-danger, #D32F2F);

}


.pm-toast-filled.pm-toast-warning {

    background: var(--pm-warning, #F57C00);

}


.pm-toast-filled.pm-toast-info {

    background: var(--pm-info, #1976D2);

}

/* ==========================================================================
   Toast Animations
   ========================================================================== */


@keyframes pm-toast-in {

    from {

        opacity: 0;

        transform: translateY(-20px);

    }


    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes pm-toast-out {

    from {

        opacity: 1;

        transform: translateY(0);

    }


    to {

        opacity: 0;

        transform: translateY(-20px);

    }

}



/* Exit State */

.pm-toast.is-removing {

    animation: pm-toast-out .3s ease forwards;

}



/* ==========================================================================
   Position Based Animations
   ========================================================================== */


.pm-toast-container.bottom-right .pm-toast,
.pm-toast-container.bottom-left .pm-toast {

    animation-name: pm-toast-bottom-in;

}



@keyframes pm-toast-bottom-in {

    from {

        opacity: 0;

        transform: translateY(20px);

    }


    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* ==========================================================================
   Reduced Motion
   ========================================================================== */


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

    .pm-toast,
    .pm-toast.is-removing {

        animation: none;

        transition: none;

    }

}

/* ==========================================================================
   Responsive
   ========================================================================== */


@media (max-width: 768px) {


    .pm-toast-container {

        left: 1rem;

        right: 1rem;

    }



    .pm-toast-container.top-right,
    .pm-toast-container.top-left {

        top: 1rem;

    }



    .pm-toast-container.bottom-right,
    .pm-toast-container.bottom-left {

        bottom: 1rem;

    }



    .pm-toast {

        width: 100%;

        max-width: none;

    }


}



/* ==========================================================================
   Toast Utilities
   ========================================================================== */


.pm-toast-stack {

    display: flex;

    flex-direction: column;

    gap: .75rem;

}



/* Compact Toast */

.pm-toast-compact {

    padding: .75rem 1rem;

}


.pm-toast-compact .pm-toast-message {

    font-size: .875rem;

}



/* ==========================================================================
   Accessibility
   ========================================================================== */


.pm-toast[role="alert"],
.pm-toast[role="status"] {

    outline: none;

}



.pm-toast:focus-visible {

    outline: 3px solid var(--pm-secondary, #1976D2);

    outline-offset: 3px;

}