/**
 * Alerts Component
 *
 * Alert/notification styles for user feedback.
 * Uses the --smx-* theme tokens that ThemeService prints in the page head.
 *
 * Classes:
 * - .alert            : Base alert
 * - .alert--success   : Success alert (BEM)
 * - .alert--danger    : Danger/error alert (BEM)
 * - .alert--warning   : Warning alert (BEM)
 * - .alert--info      : Info alert (BEM)
 * - .alert-success    : Bootstrap alias
 * - .alert-danger     : Bootstrap alias
 * - .alert-warning    : Bootstrap alias
 * - .alert-info       : Bootstrap alias
 */

/* ========================================
   Base Alert
   ======================================== */

.alert {
    position: relative;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--smx-radius-card);
    font-size: 0.95rem;
    line-height: 1.5;
}

.alert p:last-child {
    margin-bottom: 0;
}

/* ========================================
   Alert Variants (BEM)
   ======================================== */

.alert--success {
    background-color: color-mix(in srgb, var(--smx-success) 14%, var(--smx-surface));
    border-color: color-mix(in srgb, var(--smx-success) 30%, var(--smx-surface));
    color: color-mix(in srgb, var(--smx-success) 60%, var(--smx-on-surface));
}

.alert--danger {
    background-color: color-mix(in srgb, var(--smx-danger) 14%, var(--smx-surface));
    border-color: color-mix(in srgb, var(--smx-danger) 30%, var(--smx-surface));
    color: color-mix(in srgb, var(--smx-danger) 60%, var(--smx-on-surface));
}

.alert--warning {
    background-color: color-mix(in srgb, var(--smx-warning) 20%, var(--smx-surface));
    border-color: color-mix(in srgb, var(--smx-warning) 40%, var(--smx-surface));
    color: color-mix(in srgb, var(--smx-warning) 40%, var(--smx-on-surface));
}

.alert--info {
    background-color: color-mix(in srgb, var(--smx-secondary) 14%, var(--smx-surface));
    border-color: color-mix(in srgb, var(--smx-secondary) 30%, var(--smx-surface));
    color: color-mix(in srgb, var(--smx-secondary) 60%, var(--smx-on-surface));
}

/* ========================================
   Bootstrap-Style Aliases
   ======================================== */

.alert-success {
    background-color: color-mix(in srgb, var(--smx-success) 14%, var(--smx-surface));
    border-color: color-mix(in srgb, var(--smx-success) 30%, var(--smx-surface));
    color: color-mix(in srgb, var(--smx-success) 60%, var(--smx-on-surface));
}

.alert-danger {
    background-color: color-mix(in srgb, var(--smx-danger) 14%, var(--smx-surface));
    border-color: color-mix(in srgb, var(--smx-danger) 30%, var(--smx-surface));
    color: color-mix(in srgb, var(--smx-danger) 60%, var(--smx-on-surface));
}

.alert-warning {
    background-color: color-mix(in srgb, var(--smx-warning) 20%, var(--smx-surface));
    border-color: color-mix(in srgb, var(--smx-warning) 40%, var(--smx-surface));
    color: color-mix(in srgb, var(--smx-warning) 40%, var(--smx-on-surface));
}

.alert-info {
    background-color: color-mix(in srgb, var(--smx-secondary) 14%, var(--smx-surface));
    border-color: color-mix(in srgb, var(--smx-secondary) 30%, var(--smx-surface));
    color: color-mix(in srgb, var(--smx-secondary) 60%, var(--smx-on-surface));
}

/* ========================================
   Dismissible Alerts
   ======================================== */

.alert-dismissible {
    padding-right: 3rem;
}

.alert-dismissible .close,
.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1rem 1.25rem;
    background: transparent;
    border: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
}

.alert-dismissible .close:hover,
.alert-dismissible .btn-close:hover {
    opacity: 0.75;
}

/* ========================================
   Alert Links
   ======================================== */

.alert a,
.alert-link {
    font-weight: 600;
}

.alert-success a,
.alert-success .alert-link,
.alert--success a,
.alert--success .alert-link {
    color: color-mix(in srgb, var(--smx-success) 60%, var(--smx-on-surface));
}

.alert-danger a,
.alert-danger .alert-link,
.alert--danger a,
.alert--danger .alert-link {
    color: color-mix(in srgb, var(--smx-danger) 60%, var(--smx-on-surface));
}

.alert-warning a,
.alert-warning .alert-link,
.alert--warning a,
.alert--warning .alert-link {
    color: color-mix(in srgb, var(--smx-warning) 40%, var(--smx-on-surface));
}

.alert-info a,
.alert-info .alert-link,
.alert--info a,
.alert--info .alert-link {
    color: color-mix(in srgb, var(--smx-secondary) 60%, var(--smx-on-surface));
}