// Growl

.growl {
  position: fixed;
  top: $growl-top;
  right: $growl-space-x;
  left: $growl-space-x;
  z-index: $zindex-growl;

  &.growl-static {
    position: relative;
    top: auto;
    right: auto;
    z-index: auto;
  }

  .alert {
    margin-bottom: $growl-alert-margin-bottom;
    animation: slide-from-top 1000ms cubic-bezier(.2, .7, .5, 1);
  }

  .alert-dismissable,
  .alert-dismissible {
    .close {
      top: $growl-alert-dismissable-top;
      color: $growl-alert-dismissable-color;
    }
  }
}

@include media-breakpoint-up(sm) {
  .growl {
    left: auto;
    width: $growl-width;
  }
}

@keyframes slide-from-top {
  0% {
    opacity: 0;
    transform: translateY(-30%);
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slide-from-right {
  0% {
    opacity: 0;
    transform: translateX(30%);
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateX(0);
  }
}