/**
 * Validation Toast Component
 * Error notifications for selection conflicts
 */

@use '../variables' as *;
@use '../mixins' as *;

// Validation error toast
.es-validation-toast {
    display: flex;
    align-items: flex-start;
    gap: $es-spacing-sm;
    padding: $es-spacing-md;
    background: $es-white;
    border: 1px solid $es-danger;
    border-left: 4px solid $es-danger;
    border-radius: $es-radius-md;
    box-shadow: $es-shadow-lg;
    max-width: 400px;
    animation: es-toast-slide-in 0.2s ease-out;

    .es-toast-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        color: $es-danger;
        flex-shrink: 0;

        i {
            font-size: 18px;
        }
    }

    .es-toast-content {
        flex: 1;
        min-width: 0;
    }

    .es-toast-title {
        font-size: $es-font-size-sm;
        font-weight: $es-font-weight-semibold;
        color: $es-danger;
        margin-bottom: 2px;
    }

    .es-toast-message {
        font-size: $es-font-size-xs;
        color: $es-text-secondary;
        line-height: 1.4;
    }

    .es-toast-close {
        @include button-reset;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        color: $es-text-muted;
        border-radius: $es-radius-sm;
        flex-shrink: 0;
        transition: all $es-transition-fast;

        &:hover {
            background: $es-slate-100;
            color: $es-text-primary;
        }

        i {
            font-size: 12px;
        }
    }
}

@keyframes es-toast-slide-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}