/* Toast Notification Component */

.error-toast {
    position: fixed;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    z-index: var(--z-modal);
    max-width: 400px;
    background-color: var(--color-error-bg);
    border: var(--border-width) solid var(--color-error-border);
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-lg);
    animation: slideIn var(--duration-medium) var(--easing-enter) forwards;
}

.error-toast--closing {
    animation: slideOut var(--duration-medium) var(--easing-exit) forwards;
}

@keyframes slideIn {
    from {
        transform: translateX(calc(100% + var(--spacing-lg)));
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(calc(100% + var(--spacing-lg)));
        opacity: 0;
    }
}

.error-toast__content {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
}

.error-toast__icon {
    flex-shrink: 0;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-none);
    margin-top: var(--spacing-xs);
}

.error-toast__message {
    flex: 1;
    color: var(--color-error-text);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    word-wrap: break-word;
}

.error-toast__close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--color-error-text);
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-none);
    cursor: pointer;
    padding: 0;
    margin: -4px 0 0 0;
    opacity: 0.7;
    transition: opacity var(--duration-normal) var(--easing-standard);
}

.error-toast__close:hover,
.error-toast__close:focus {
    opacity: 1;
    outline: var(--border-width-thick) solid var(--color-error-text);
    outline-offset: -2px;
}

/* Responsive design */
@media (max-width: 640px) {
    .error-toast {
        right: var(--spacing-xs);
        left: var(--spacing-xs);
        top: var(--spacing-xs);
        max-width: none;
    }

    .error-toast__message {
        font-size: var(--font-size-xs);
    }
}

/* Success toast (for future use) */
.success-toast {
    background-color: var(--color-success-bg);
    border-color: var(--color-success-border);
}

.success-toast .error-toast__message {
    color: var(--color-success-text);
}

.success-toast .error-toast__close {
    color: var(--color-success-text);
}

.success-toast .error-toast__icon {
    color: var(--color-success-text);
}

.success-toast .error-toast__close:focus {
    outline-color: var(--color-success-text);
}

/* Warning toast (for future use) */
.warning-toast {
    background-color: var(--color-warning-bg);
    border-color: var(--color-warning-border);
}

.warning-toast .error-toast__message {
    color: var(--color-warning-text);
}

.warning-toast .error-toast__close {
    color: var(--color-warning-text);
}

.warning-toast .error-toast__icon {
    color: var(--color-warning-text);
}

.warning-toast .error-toast__close:focus {
    outline-color: var(--color-warning-text);
}