@import '~normalize.css/normalize.css';
@import '~@amber-ds/visual/src/_variables.scss';
@import '~@amber-ds/visual/src/_mixins.scss';
@import '~@amber-ds/visual/src/_base.scss';
@import '~@amber-ds/visual/src/_typography.scss';

section {
  @include sans-serif;

  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  max-height: 0;
  transition: max-height .2s cubic-bezier(.9,0,.3,.7);

  article {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    border: 0;
    padding: 2rem;

    border-top: 4px solid $grey-dark;
    background: $white;

    @media (max-width: 768px) {
      display: block;
    }

  
    .banner-header {
      margin-right: 1rem;
    }

    .banner-content {
      margin-right: 1rem;
    }

    .banner-footer {
      margin-left: auto;
      display: flex;
      justify-content: flex-end;
    }
  }

  &[active] {
    max-height: 50vh;
  }

  &.info article {
    background: $info-50;
    border-color: $info-700;
  }

  &.success article {
    background: $success-50;
    border-color: $success-700;
  }

  &.warning article {
    background: $warning-50;
    border-color: $warning-700;
  }

  &.error article {
    background: $error-50;
    border-color: $error-700;
  }
}