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

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

.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;
  border-left: none;
  padding: 0 2rem;
  background-color: var(--grey);
  color: var(--black);
}

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

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

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

.alert-success a:is(:hover, :focus) {
  background-color: var(--white);
  color: var(--laurier-purple);
}

.alert-warning {
  --bs-alert-bg: var(--laurier-gold);
  --bs-warning-bg-subtle: var(--laurier-gold);
  background-color: var(--laurier-gold);
  color: var(--black);
}

.alert-danger {
  --bs-alert-bg: var(--laurier-orange);
  --bs-danger-bg-subtle: var(--laurier-orange);
  background-color: var(--laurier-orange);
  color: var(--black);
}

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