.modal__overlay {
  background: $color-brand--two;
  bottom: 0;
  left: 0;
  max-height: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  transition: opacity $transition-duration--fast, max-height 0s $transition-duration--fast;
  top: 0;
  z-index: 2;

  &--active {
    max-height: 100%;
    opacity: 0.7;
    transition: opacity $transition-duration--fast, max-height 0s 0s;

    &.modal__overlay--light {
      opacity: 0.3;
    }
  }
}