/**
 * @file
 * System status messages.
 */

.alert-wrapper {
  position: fixed;
  z-index: 9999;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 75vh;
}

.alert-wrapper .alert {
  overflow-y: auto;
  margin-bottom: 0;
}

.alert svg {
  max-width: 2rem;
}

/** General alert styles, also used for the info alerts which does not have its own special class **/
.alert {
  margin: 1rem 0;
  padding: 0 2rem;
  color: var(--black);
  border-left: none;
  background-color: var(--grey);
}

.alert.alert-success {
  --bs-success-bg-subtle: var(--laurier-green);
  --bs-alert-color: var(--white);

  color: var(--white);
  background-color: var(--laurier-green);
}

.alert-success svg use {
  fill: var(--white);
}

.alert-success a {
  color: var(--white);
}

.alert-success a:is(:hover,:focus, :focus-visible) {
  outline: 2px solid var(--white);
}

.alert-warning {
  --bs-alert-bg: var(--laurier-gold);
  --bs-warning-bg-subtle: var(--laurier-gold);

  color: var(--black);
  background-color: var(--laurier-gold);
}

.alert-danger {
  --bs-alert-bg: var(--laurier-orange);
  --bs-danger-bg-subtle: var(--laurier-orange);

  color: var(--black);
  background-color: var(--laurier-orange);
}

:is(.alert-success, .alert-danger, .alert-warning) button.btn-close {
  background-color: var(--white);
}