@mixin alert-component($color, $border, $bg) {
  color: darken($color, 25%);
  border-color: $border;
  background: $bg;
  a {
    color: darken($color, 25%);
  }
}

.section-banner {
  overflow: hidden;

  &-banner {
    margin-bottom: 15px;
    border-radius: 4px;
  }

  &-icon {
    align-self: center;
    padding-right: 10px;
  }
}

.banner {
  display: flex;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;

  &-warning {
    @include alert-component($alertOrange, $alertOrangeBorder, $alertOrangeBg);
  }

  &-error {
    @include alert-component($alertRed, $alertRedBorder, $alertRedBg);
  }

  &-success {
    @include alert-component($alertBlue, $alertBlueBorder, $alertBlueBg);
  }

  &-info {
    @include alert-component($alertGreen, $alertGreenBorder, $alertGreenBg);
  }

  &-clear {
    margin-left: auto;
    cursor: pointer;
    font-size: 14px;
    align-self: center;
    padding-left: 15px;
  }

  &-is-small {
    background: none;
    border: none;
    font-size: 14px;
    padding: 15px 15px 15px 0;
    margin-bottom: 0px;
  }

}

aside .banner-success {
  @include alert-component($alertGreen, $alertGreenBorder, fade($alertGreen, 5%));
}

aside .banner-warning {
  @include alert-component($alertOrange, $alertOrangeBorder, fade($alertOrange, 5%));
}

aside .banner-danger {
  @include alert-component($alertRed, $alertRedBorder, fade($alertRed, 5%));
}

aside .banner-info {
  @include alert-component($alertBlue, $alertBlueBorder, fade($alertBlue, 5%));
}