.alert {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 100%;
  margin-bottom: $spacing-xs;
  padding: $spacing-sm $spacing-lg $spacing-sm $spacing;
  text-align: left;
  color: $white;
  background-color: $info;
  border: none;
  @include media-breakpoint-up(sm) {
    flex-direction: row;
  }
}

.alert .close {
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: $btn-height;
  height: $btn-height;
  top: $spacing-xxs;
  right: $spacing-xxs;
  color: $info;
  background-color: $white;
  border-radius: $border-radius;
  .icon {
    font-size: $icon;
  }
}

.alert .close:hover, .alert .close:focus {
  color: $white;
  background-color: $link-hover-color;
  outline: none;
  .icon {
    color: $white;
  }
}

.alert .close:not(:disabled):not(.disabled):hover,
.alert .close:not(:disabled):not(.disabled):focus {
  opacity: 1;
}

.alert-info {
  background-color: $info;
}

.alert-success {
  background-color: $success;
  .icon {
    color: $success;
  }
}

.alert-warning,
.alert-danger,
.alert-error {
  background-color: $danger;
  .icon {
    color: $danger;
  }
}

.alert-message {
  flex-grow: 1;
}

.alert .btn {
  margin-top: $spacing-xs;
  color: $primary;
  background-color: $white;
  @include media-breakpoint-up(sm) {
    margin-top: $spacing-xs *-1;
    margin-bottom: $spacing-xs *-1;
  }
}