.alert {
  padding: 8px 32px 8px 16px;
  background-color: $danger-low;
  color: $primary;
  position: relative;

  .close {
    position: absolute;
    top: 8px;
    right: 8px;
    line-height: $line-height-small;
    font-size: $font-up-3;
    color: $primary-low-mid;
    @include hover {
      color: $primary-medium;
      cursor: pointer;
    }
  }
  button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
  }
  &.alert-success {
    background-color: $success-low;
    color: $primary;
  }
  &.alert-error {
    background-color: $danger-low;
    color: $primary;
  }
  &.alert-info {
    background-color: $tertiary-low;
    color: $primary;
    &.clickable {
      color: $tertiary;
    }
  }
}