.flash-success,
.flash-error,
.flash-warning,
.flash-info {
  font-family: var(--font-family);
  font-size: var(--text-md);
  text-align: center;

  background-color: var(--secondary-bg);
  color: var(--primary-text);

  border-radius: var(--radius-md);

  margin: var(--space-sm);
  padding: var(--space-md) var(--space-lg);

  box-shadow: var(--shadow-sm);
}
.flash-success {
  background-color: var(--form-success);
}
.flash-error {
  background-color: var(--form-error);
}
.flash-warning {
  background-color: var(--form-warning);
}
.flash-info {
  background-color: var(--primary-selection);
}
/* Close button for flash messages */
.flash-close {
  background: var(--primary-bg);
  border-radius: 50%;

  min-width: var(--space-lg);
  min-height: var(--space-lg);

  cursor: pointer;
}
.flash-close:hover,
.flash-close:focus-visible {
  background: inherit;
  box-shadow: var(--shadow-sm);

  transition: background 0.2s, box-shadow 0.2s;
}
.flash-close:hover svg,
.flash-close:focus-visible svg {
  fill: var(--primary-text);
  stroke: var(--primary-text);
}