/*
  Alert (hláška): a message about a state, e.g. a form was sent or something is missing. Rules: hlasky.html.

  <div class="alert alert--success">
    <svg class="icon" viewBox="0 -960 960 960" aria-hidden="true">…check_circle…</svg>
    <div><p class="alert__title">Prihláška je odoslaná</p><p>Potvrdenie príde e-mailom.</p></div>
  </div>

  - Types and their icons: --info (info), --success (check_circle), --warning (warning), --error (error).
  - Subtle background and border of the type colour, black text, icon in --fg-{color}.
  - Icon is 36 px (2.25rem), between the text icon and --icon-size-large; only alerts use this size.
  - A message that appears without reloading the page gets role="status", an error role="alert".
*/

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  color: var(--fg-neutral);
  background: var(--bg-subtle-neutral);
  border: var(--border-width) solid var(--border-subtle-neutral);
  border-radius: var(--radius-medium);
}

.alert > .icon {
  width: 2.25rem;
  height: 2.25rem;
}

.alert p {
  margin: 0;
}

.alert p + p {
  margin-top: var(--space-1);
}

.alert__title {
  font-weight: var(--font-weight-semibold);
}

.alert--info {
  background: var(--bg-subtle-blue);
  border-color: var(--border-subtle-blue);
}

.alert--info > .icon {
  color: var(--fg-blue);
}

.alert--success {
  background: var(--bg-subtle-green);
  border-color: var(--border-subtle-green);
}

.alert--success > .icon {
  color: var(--fg-green);
}

.alert--warning {
  background: var(--bg-subtle-yellow);
  border-color: var(--border-subtle-yellow);
}

.alert--warning > .icon {
  color: var(--fg-yellow);
}

.alert--error {
  background: var(--bg-subtle-red);
  border-color: var(--border-subtle-red);
}

.alert--error > .icon {
  color: var(--fg-red);
}