.hui-FlashMessage {
  width: 100%;
  height: 0;
  position: fixed;
  top: -$x-19;
  text-align: center;
  transition: $ease-in-out-fast;
  z-index: 1001;
  transform: translateZ(200px);
}

.hui-FlashMessage__message {
  display: inline-block;
  position: relative;
  padding: $x-5 $x-10 $x-5 $x-5;
  text-align: center;
  font-weight: bold;
  border-radius: 0 0 $border-radius $border-radius;
  color: $grey-dark;
  font-family: $font-copy;
}

.hui-FlashMessage__message--success {
  background-color: $flash-success-background;
}

.hui-FlashMessage__message--alert {
  background-color: $flash-alert-background;
}

.hui-FlashMessage__message--error {
  background-color: $flash-error-background;
}

.hui-FlashMessage__icon {
  float: left;
  color: white;
  margin-right: $x-5;
  font-size: $x-4;
}

.hui-FlashMessage__dismiss {
  @extend %hui-button-reset;
  color: white;
  cursor: pointer;
  height: $x-13;
  width: $x-13;
  position: absolute;
  right: 0px;
  top: 2px;
  font-size: $x-4;
  color: $grey;
  &:hover {
    color: white;
  }
}

.hui-FlashMessage--show {
  transition: $ease-in-out-slow;
  top: 0px;
}