.banner {

  @mixin bannerTheme ($color) {
    background: $color;
    .banner__close {
      background: $color;
    }
  }

  padding: em-calc(8px) em-calc(40px);
  pointer-events: all;
  user-select: none;
  line-height: 1.2;
  color: #fff;

  @include bannerTheme($brand-color);
  &__container {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: $above-z-index;
  }
  &__icon {
    @include font-size(24px);
  }
  &__close {
    margin-left: auto;
  }
  &__close div {
    @include border(#fff);
    border-radius: 3px;
    padding: 3px 5px;
    &:hover {
      opacity: 0.9;
    }
    .icon {
      position: relative;
      top: 1px;
    }
  }
  a:link, a:active, a:hover, a:focus {
    color: inherit;
  }

  &--warning {
    @include bannerTheme($flash-warning-color);
    color: $warning-text-color;
    .banner__close div {
      @include border($warning-text-color);
    }
  }
  &--alert {
    @include bannerTheme($flash-error-color);
  }
  &--success {
    @include bannerTheme($flash-success-color);
  }
}