/* ==========================================================================
   Turbo Themes - Notifications / Alerts
   ========================================================================== */

.notification {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--turbo-brand-primary);
  background: color-mix(
    in srgb,
    var(--turbo-brand-primary) 10%,
    var(--turbo-bg-surface)
  );
}

.notification-success {
  border-left-color: var(--turbo-state-success);
  background: color-mix(
    in srgb,
    var(--turbo-state-success) 10%,
    var(--turbo-bg-surface)
  );
}

.notification-warning {
  border-left-color: var(--turbo-state-warning);
  background: color-mix(
    in srgb,
    var(--turbo-state-warning) 10%,
    var(--turbo-bg-surface)
  );
}

.notification-danger {
  border-left-color: var(--turbo-state-danger);
  background: color-mix(
    in srgb,
    var(--turbo-state-danger) 10%,
    var(--turbo-bg-surface)
  );
}

.notification-info {
  border-left-color: var(--turbo-state-info);
  background: color-mix(in srgb, var(--turbo-state-info) 10%, var(--turbo-bg-surface));
}

/* ==========================================================================
   Messages (with header/body structure)
   ========================================================================== */

.message {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--turbo-border-default);
  background: var(--turbo-bg-surface);
}

.message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  font-weight: 600;
  background: var(--turbo-bg-overlay);
}

.message-header p {
  margin: 0;
}

.message-body {
  padding: var(--space-lg);
  color: var(--turbo-text-secondary);
}

/* Color variants */
.message-primary .message-header {
  background: color-mix(
    in srgb,
    var(--turbo-brand-primary) 20%,
    var(--turbo-bg-surface)
  );
  color: var(--turbo-brand-primary);
}

.message-info .message-header {
  background: color-mix(in srgb, var(--turbo-state-info) 20%, var(--turbo-bg-surface));
  color: var(--turbo-state-info);
}

.message-success .message-header {
  background: color-mix(
    in srgb,
    var(--turbo-state-success) 20%,
    var(--turbo-bg-surface)
  );
  color: var(--turbo-state-success);
}

.message-warning .message-header {
  background: color-mix(
    in srgb,
    var(--turbo-state-warning) 20%,
    var(--turbo-bg-surface)
  );
  color: var(--turbo-state-warning);
}

.message-danger .message-header {
  background: color-mix(
    in srgb,
    var(--turbo-state-danger) 20%,
    var(--turbo-bg-surface)
  );
  color: var(--turbo-state-danger);
}

/* ==========================================================================
   Alert (inline variant)
   ========================================================================== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--turbo-bg-overlay);
  border: 1px solid var(--turbo-border-default);
}

.alert-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.alert-description {
  color: var(--turbo-text-secondary);
  font-size: 0.875rem;
}

.alert-primary {
  background: color-mix(
    in srgb,
    var(--turbo-brand-primary) 10%,
    var(--turbo-bg-surface)
  );
  border-color: var(--turbo-brand-primary);
}

.alert-success {
  background: color-mix(
    in srgb,
    var(--turbo-state-success) 10%,
    var(--turbo-bg-surface)
  );
  border-color: var(--turbo-state-success);
}

.alert-warning {
  background: color-mix(
    in srgb,
    var(--turbo-state-warning) 10%,
    var(--turbo-bg-surface)
  );
  border-color: var(--turbo-state-warning);
}

.alert-danger {
  background: color-mix(
    in srgb,
    var(--turbo-state-danger) 10%,
    var(--turbo-bg-surface)
  );
  border-color: var(--turbo-state-danger);
}

.alert-info {
  background: color-mix(in srgb, var(--turbo-state-info) 10%, var(--turbo-bg-surface));
  border-color: var(--turbo-state-info);
}