/**
 * Kuzmack Suites Toast Notification Styles
 * Uses design tokens from kuzmack-variables.css
 */

/* Toast Container */
.toast-container {
    position: fixed;
    z-index: var(--ks-z-tooltip);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: var(--ks-spacing-md);
    padding: var(--ks-spacing-lg);
    max-width: 400px;
}

/* Position Variants */
.toast-container.top-right    { top: 0; right: 0; }
.toast-container.top-left     { top: 0; left: 0; }
.toast-container.bottom-right { bottom: 0; right: 0; }
.toast-container.bottom-left  { bottom: 0; left: 0; }

.toast-container.top-center {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.toast-container.bottom-center {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* Toast Notification */
.toast-notification {
    pointer-events: all;
    display: flex;
    align-items: flex-start;
    gap: var(--ks-spacing-md);
    padding: var(--ks-spacing-md);
    background: var(--ks-white);
    border-radius: var(--ks-radius-md);
    box-shadow: var(--ks-shadow-lg);
    min-width: 300px;
    max-width: 400px;
    opacity: 0;
    transform: translateX(100%);
    transition: all var(--ks-transition-base) cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 4px solid;
    position: relative;
    overflow: hidden;
}

/* Show / Hide Animations */
.toast-notification.show { opacity: 1; transform: translateX(0); }
.toast-notification.hide { opacity: 0; transform: translateX(100%); }

/* Left Position Animations */
.toast-container.top-left .toast-notification,
.toast-container.bottom-left .toast-notification { transform: translateX(-100%); }
.toast-container.top-left .toast-notification.show,
.toast-container.bottom-left .toast-notification.show { transform: translateX(0); }
.toast-container.top-left .toast-notification.hide,
.toast-container.bottom-left .toast-notification.hide { transform: translateX(-100%); }

/* Center Position Animations */
.toast-container.top-center .toast-notification,
.toast-container.bottom-center .toast-notification { transform: translateY(-100%); }
.toast-container.top-center .toast-notification.show,
.toast-container.bottom-center .toast-notification.show { transform: translateY(0); }
.toast-container.top-center .toast-notification.hide,
.toast-container.bottom-center .toast-notification.hide { transform: translateY(-100%); }

/* Toast Icon */
.toast-icon {
    flex-shrink: 0;
    font-size: var(--ks-font-size-2xl);
    line-height: 1;
    margin-top: 2px;
}

/* Toast Content */
.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-message {
    font-size: var(--ks-font-size-sm);
    line-height: var(--ks-line-height-normal);
    color: var(--ks-text-primary);
    word-wrap: break-word;
}

/* Toast Close Button */
.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--ks-spacing-xs);
    color: var(--ks-text-secondary);
    font-size: var(--ks-font-size-base);
    line-height: 1;
    transition: color var(--ks-transition-fast);
    opacity: 0.6;
}

.toast-close:hover {
    color: var(--ks-text-primary);
    opacity: 1;
}

/* Toast Type Variants */
.toast-notification.toast-success { border-left-color: var(--ks-success); }
.toast-notification.toast-success .toast-icon { color: var(--ks-success); }
.toast-notification.toast-success::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100%;
    background: linear-gradient(to right, var(--ks-success-bg), transparent);
    opacity: 0.4;
    pointer-events: none;
}

.toast-notification.toast-error { border-left-color: var(--ks-danger); }
.toast-notification.toast-error .toast-icon { color: var(--ks-danger); }
.toast-notification.toast-error::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100%;
    background: linear-gradient(to right, var(--ks-danger-bg), transparent);
    opacity: 0.4;
    pointer-events: none;
}

.toast-notification.toast-warning { border-left-color: var(--ks-warning); }
.toast-notification.toast-warning .toast-icon { color: var(--ks-warning); }
.toast-notification.toast-warning::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100%;
    background: linear-gradient(to right, var(--ks-warning-bg), transparent);
    opacity: 0.4;
    pointer-events: none;
}

.toast-notification.toast-info { border-left-color: var(--ks-info); }
.toast-notification.toast-info .toast-icon { color: var(--ks-info); }
.toast-notification.toast-info::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100%;
    background: linear-gradient(to right, var(--ks-info-bg), transparent);
    opacity: 0.4;
    pointer-events: none;
}

/* Hover Effect */
.toast-notification:hover {
    box-shadow: var(--ks-shadow-xl);
}

/* Responsive */
@media (max-width: 640px) {
    .toast-container {
        max-width: calc(100% - var(--ks-spacing-xl));
        padding: var(--ks-spacing-lg);
    }

    .toast-notification {
        min-width: 280px;
        max-width: 100%;
    }

    .toast-container.top-center,
    .toast-container.bottom-center {
        left: var(--ks-spacing-lg);
        right: var(--ks-spacing-lg);
        transform: none;
        max-width: calc(100% - var(--ks-spacing-xl));
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .toast-notification { background: var(--ks-neutral-800); }
    .toast-message       { color: var(--ks-neutral-100); }
    .toast-close         { color: var(--ks-neutral-400); }
    .toast-close:hover   { color: var(--ks-neutral-100); }
}

/* Accessibility */
.toast-notification:focus-within {
    outline: 2px solid var(--ks-info);
    outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .toast-notification {
        transition: opacity var(--ks-transition-fast);
    }

    .toast-notification,
    .toast-notification.show,
    .toast-notification.hide {
        transform: none;
    }
}