.banner {
  display: flex;
  align-items: flex-start;
  background: $light-gray-2;
  color: $dark-gray-2;
  padding: $spacing-md;
  padding-right: 3.5rem;
  border-radius: $border-radius;
  position: relative;
  overflow: hidden;

  &.banner--hidden {
    display: none;
  }

  &:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: $dark-gray-2;
  }

  .banner__status-icon {
    align-self: flex-start;
    padding-right: $spacing-md;

    .banner__status-icon__wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: $light;
      border-radius: 50%;
      height: 24px;
      width: 24px;
    }
  }

  &.banner--info {
    background: lighten($primary, 70%);
    color: darken($primary, 10%);

    .btn--outline {
      color: inherit;
      border-color: darken($primary, 10%);
    }

    &:after {
      background: $primary;
    }

    .banner__status-icon__wrapper {
      background: lighten($primary, 78%);
    }
  }

  &.banner--success {
    background: lighten($success, 40%);
    color: darken($success, 30%);

    .btn--outline {
      color: inherit;
      border-color: darken($success, 30%);
    }

    &:after {
      background: $success;
    }

    .banner__status-icon__wrapper {
      background: lighten($success, 52%);
    }
  }

  &.banner--attention {
    background: lighten($warning, 20%);
    color: darken($warning, 55%);

    .btn--outline {
      color: inherit;
      border-color: darken($warning, 55%);
    }

    &:after {
      background: $warning;
    }

    .banner__status-icon__wrapper {
      background: lighten($warning, 52%);
    }
  }

  &.banner--alert {
    background: lighten($danger, 35%);
    color: darken($danger, 30%);

    .btn--outline {
      color: inherit;
      border-color: darken($danger, 30%);
    }

    &:after {
      background: $danger;
    }

    .banner__status-icon__wrapper {
      background: lighten($danger, 52%);
    }
  }

  .banner__description {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    font-size: 14px;

    + button {
      margin-top: $spacing-md;
    }
  }

  .banner__close-button {
    padding: 0;
    margin-left: $spacing-md;
    min-height: 0;
    color: inherit;
    position: absolute;
    top: $spacing-md;
    right: $spacing-md;
    z-index: 10;
  }
}