.wrapper {
  > div {
    &.flash-message {
      height: 50px;
      min-height: 50px;
      max-height: 50px;
    }
  }
}

.flash-message {
  @include display(flex);
  @include align-items(center);
  @include justify-content(center);
  @include position(fixed, 0 0 null $nav-width);
  color: $white;
  padding: $pad-half;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  background-color: #3d4758;
  min-width: $min-width;

  @include breakpoint(smalldesk) {
    left: $nav-tablet-width;
  }

  &--full-width {
    left: 0;
  }

  &--success {
    .kolidecon {
      color: $success;
    }
  }

  &--error {
    .kolidecon {
      color: $alert;
    }
  }

  &__content {
    @include flex-grow(1);
    text-align: center;

    span {
      margin-left: 15px;
      margin-right: 15px;
    }

    .kolidecon {
      font-size: 24px;
    }
  }

  &__undo {
    color: $white;
    cursor: pointer;
    font-size: 16px;
    text-decoration: underline;
    text-transform: uppercase;
  }

  &__remove {
    @include size(30px);
    cursor: pointer;
    text-align: center;
    margin-left: 15px;

    .kolidecon {
      @include transition(color 150ms ease-in-out);
      color: $text-light;
      font-size: 24px;

      &:hover {
        color: $white;
      }
    }
  }
}