// ────────────────────────────────────────────────────────────────
// Komponente · Alert / Callout
// ────────────────────────────────────────────────────────────────

.alert {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r-md);

  &__icon {
    flex: 0 0 auto;
    color: inherit;
  }

  &__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  &__title {
    color: var(--fg);
    font-weight: var(--fw-medium);
  }
}

@each $name in (accent, ember, ok, warn, danger, off) {
  .alert--#{$name} {
    border-left-color: var(--#{$name});
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--#{$name}) 8%, transparent), transparent 60%);

    .alert__title {
      color: var(--#{$name});
    }
  }
}