@keyframes slideInRightShort {
  0% {
    transform: translate3d(10%,0,0);
  }
  100% {
    transform: translate3d(0,0,0);
  }
}

@keyframes slideInDownShort {
  0% {
    transform: translate3d(0,-10%,0);
  }
  100% {
    transform: translate3d(0,0,0);
  }
}

.flashMessage {
  position: fixed;
  text-align: left;
  top: 1rem;
  right: 1rem;
  border-radius: 3px;
  padding: .7rem 1rem;
  font-size: font-size(body);
  max-width: 320px;
  z-index: 99999;
  background-color: $white;
  display: flex;
  align-items: center;
  padding-right: 3rem;
  box-shadow: rgba(0,0,0,.25) 0 2px 3px 0;

  animation: slideInRightShort .3s ease;
  animation-fill-mode: both;
  transition: 500ms ease;

  &.exiting {
    opacity: 0;
    transform: translate3d(0,-100%,0);
  }

  @include gmq(palm) {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: inherit;
    animation: slideInDownShort .3s ease;
    border-radius: 0;
    box-shadow: rgba(0,0,0,.25) 0 1px 1px 0;
  }
}

.flashMessageIcon {
  height: 100%;
  margin-right: .75rem;
  display: inline-block;
  font-size: 2.25rem;
}

.flashMessageContent {
  padding: .5rem 0;

  p {
    margin: 0;
  }
}

.flashMessageClose {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 3rem;

  i {
    top: 1rem;
    color: palette(gray);
    @include center(h);
  }
}


@each $theme, $color in $ui-colors {
  .flashMessage--#{$theme} {
    font-weight: 300;
    color: palette(gray, x-dark);

    h5 {
      color: darken($color, 10%);
    }

    .flashMessageIcon {
      color: darken($color, 10%);
    }
  }
}