/* ==========================================================================
   Component: Notification
   Spec: components/notification.md
   Never conveys state through color alone — icon + status word + message.
   ========================================================================== */

.notification {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--border-width-sm) solid;
    border-radius: var(--radius-md);
}

.notification__icon {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    flex-shrink: 0;
    margin-top: 2px;
}

.notification__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.notification__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.notification__message {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

.notification__actions {
    margin-top: var(--space-2);
}

.notification--success {
    background-color: var(--notification-success-bg);
    border-color: var(--notification-success-border);
}

.notification--success .notification__icon {
    color: var(--notification-success-text);
}

.notification--error {
    background-color: var(--notification-error-bg);
    border-color: var(--notification-error-border);
}

.notification--error .notification__icon {
    color: var(--notification-error-text);
}

.notification--warning {
    background-color: var(--notification-warning-bg);
    border-color: var(--notification-warning-border);
}

.notification--warning .notification__icon {
    color: var(--notification-warning-text);
}

.notification--info {
    background-color: var(--notification-info-bg);
    border-color: var(--notification-info-border);
}

.notification--info .notification__icon {
    color: var(--notification-info-text);
}

.notification[hidden] {
    display: none;
}