/* Toast – feedback notification (success, error, warning, info). Aligned to SLDS 2 design spec. */

@keyframes FWToast-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes FWToast-fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.FWToastContainer {
    position: fixed;
    top: var(--slds-g-spacing-10); /* 64px */
    left: 50%;
    transform: translateX(-50%);
    z-index: 99500; /* Above flyouts (99001) and messages (99000), below debug panel (99999) */
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--slds-g-spacing-2); /* 8px between stacked toasts */
}

.FWToast {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--slds-g-spacing-3); /* 12px */
    padding: var(--slds-g-spacing-3); /* 12px uniform */
    border-radius: var(--slds-g-radius-border-2); /* 8px */
    min-width: 200px;
    max-width: min(90vw, 500px);
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Shadow/Elevation/3 - down */
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.14),
                0 5px 5px 0 rgba(0, 0, 0, 0.14),
                0 -1px 2px 0 rgba(0, 0, 0, 0.08);
    pointer-events: auto;
    animation: FWToast-fadeIn 0.5s ease-out;

    &.FWToast--closing {
        animation: FWToast-fadeOut 0.3s ease-in forwards;
    }

    .FWToast__icon {
        flex-shrink: 0;
        width: var(--slds-g-sizing-7); /* 24px */
        height: var(--slds-g-sizing-7);
        aspect-ratio: 1 / 1;

        .SvgIconMask {
            width: var(--slds-g-sizing-7);
            height: var(--slds-g-sizing-7);
        }
    }

    .FWToast__content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .FWToast__message {
        font-family: var(--slds-g-font-family-base);
        font-size: var(--slds-g-font-scale-2); /* 16px */
        font-weight: var(--slds-g-font-weight-6); /* 600 - Semibold */
        line-height: var(--slds-g-font-line-height-3); /* 1.375 ≈ 22px at 16px */
        font-feature-settings: 'liga' off, 'clig' off;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }

    .FWToast__description {
        font-family: var(--slds-g-font-family-base);
        font-size: var(--slds-g-font-size-base); /* 13px */
        font-weight: var(--slds-g-font-weight-4); /* 400 - Regular */
        line-height: var(--slds-g-font-line-height-3); /* 1.375 ≈ 18px at 13px */
        font-feature-settings: 'liga' off, 'clig' off;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .FWToast__close {
        background: var(--slds-g-color-transparent);
        border: none;
        cursor: pointer;
        padding: var(--slds-g-spacing-1) 0 0 0; /* 4px top offset */
        display: flex;
        height: var(--slds-g-sizing-5); /* 16px */
        justify-content: center;
        align-items: center;
        color: inherit;
        opacity: 0.8;
        flex-shrink: 0;

        .FWToast__closeSvg {
            width: var(--slds-g-sizing-5); /* 16px */
            height: var(--slds-g-sizing-5);
            background-color: currentColor;
        }
    }
}

/* Type variants – SLDS feedback tokens */
.FWToast--success {
    background-color: var(--slds-g-color-success-container-1);
    color: var(--slds-g-color-on-success-1);

    .FWToast__icon .SvgIconMask {
        background-color: var(--slds-g-color-on-success-1);
    }
}

.FWToast--error {
    background-color: var(--slds-g-color-error-container-1);
    color: var(--slds-g-color-on-error-1);

    .FWToast__icon .SvgIconMask {
        background-color: var(--slds-g-color-on-error-1);
    }
}

.FWToast--warning {
    background-color: var(--slds-g-color-warning-container-1);
    color: var(--slds-g-color-on-warning-1);

    .FWToast__icon .SvgIconMask {
        background-color: var(--slds-g-color-on-warning-1);
    }
}

.FWToast--info {
    background-color: var(--slds-g-color-brand-base-90);
    color: var(--slds-g-color-on-info-1);

    .FWToast__icon .SvgIconMask {
        background-color: var(--slds-g-color-on-info-1);
    }
}