.container {
  --alert-bg: var(--color-bg-toolbar);
  --alert-fg: var(--color-fg-default);
  --alert-border: var(--color-border-subtle);

  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  inline-size: min(100%, var(--alert-max-width, 72ch));
  max-inline-size: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--alert-border);
  border-radius: var(--border-radius-default);
  background: var(--alert-bg);
  color: var(--alert-fg);
  box-sizing: border-box;
}

.fullWidth {
  inline-size: 100%;
}

.leading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.titleRow {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.leading svg {
  inline-size: var(--icon-size-md);
  block-size: var(--icon-size-md);
  color: currentColor;
}

.content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  min-width: 0;
  flex: 1 1 auto;
}

.title,
.body {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.body {
  font-size: var(--font-size-sm);
}

.neutral {
  --alert-bg: var(--color-bg-toolbar);
  --alert-fg: var(--color-fg-default);
  --alert-border: var(--color-border-subtle);
}

.success {
  --alert-bg: var(--color-status-success-bg);
  --alert-fg: var(--color-status-success-fg);
  --alert-border: var(--color-status-success-border);
}

.warning {
  --alert-bg: var(--color-status-warning-bg);
  --alert-fg: var(--color-status-warning-fg);
  --alert-border: var(--color-status-warning-border);
}

.error {
  --alert-bg: var(--color-status-error-bg);
  --alert-fg: var(--color-status-error-fg);
  --alert-border: var(--color-status-error-border);
}

.info {
  --alert-bg: var(--color-status-info-bg);
  --alert-fg: var(--color-status-info-fg);
  --alert-border: var(--color-status-info-border);
}

.brand {
  --alert-bg: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
  --alert-fg: var(--color-brand);
  --alert-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
}

.accent {
  --alert-bg: var(--color-accent-bg);
  --alert-fg: var(--color-accent-fg);
  --alert-border: var(--color-accent-border);
}