/*
ALERTS
*/

@import '~styles/common';

$close-button-width: 20px;

.BannerAlert {
  @include transition(0.3s ease);
  align-items: center;
  box-shadow: $box-shadow;
  box-sizing: border-box;
  display: flex;
  margin: 2px; // room for the box-shadow
  padding: $pad-mar-med $pad-mar-large;
  width: 100%;

  &-background {
    @include transition(0 ease max-height 0);
    max-height: 100px;

    &.is-hidden {
      @include transition(0.2s ease 0.3s);
      max-height: 0px;
      overflow: hidden;
    }
  }

  &-text {
    margin-right: -$close-button-width;
    text-align: center;
    width: 100%;
  }

  &-close {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/4c/Grey_close_x.svg');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    height: $close-button-width;
    right: 10px;
    top: 10px;
    width: $close-button-width;
  }

  &-fade-entering {
    opacity: 0.5;
  }
  &-fade-entered {
    opacity: 1;
  }
  &-fade-exiting {
    opacity: 0.5;
  }
  &-fade-exited {
    opacity: 0;
  }
}