/* Shared semantic feedback for server flashes, forms, dialogs and member notices. */
.alert,
.notice-bar {
  --feedback-bg: #edf3fa;
  --feedback-ink: #254c72;
  --feedback-line: #b5cce2;
  --feedback-accent: #4274a5;
  background: var(--feedback-bg);
  color: var(--feedback-ink);
  border: 1px solid var(--feedback-line);
  border-inline-start: 4px solid var(--feedback-accent);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.alert-success,
.notice-success {
  --feedback-bg: #edf6ef;
  --feedback-ink: #23553b;
  --feedback-line: #bad7c2;
  --feedback-accent: #368053;
}

.alert-warning,
.notice-warning {
  --feedback-bg: #fff5df;
  --feedback-ink: #765015;
  --feedback-line: #e7ce96;
  --feedback-accent: #ae761b;
}

.alert-danger,
.alert-error,
.notice-error {
  --feedback-bg: #fff0ee;
  --feedback-ink: #92382f;
  --feedback-line: #e6b8b2;
  --feedback-accent: #ba5146;
}

.alert-info,
.notice-info {
  --feedback-bg: #edf3fa;
  --feedback-ink: #254c72;
  --feedback-line: #b5cce2;
  --feedback-accent: #4274a5;
}

.alert-light,
.alert-secondary {
  --feedback-bg: var(--theme-surface-muted,#f5f3f8);
  --feedback-ink: #61616f;
  --feedback-line: #e8e5ee;
  --feedback-accent: #8c829f;
}

.alert a,
.notice-bar a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.alert a:hover,
.notice-bar a:hover {
  text-decoration-thickness: 2px;
}

.notice-bar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.notice-bar > div {
  min-width: 0;
}

.notice-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.flash-region .alert {
  margin: 0 0 20px;
}

@media (max-width: 650px) {
  .alert,
  .notice-bar {
    padding: 14px 16px;
  }
}