@import './mixins';

.message {
  &-enter {
    &-from {
      opacity: 0;
      transform: translate3d(0, -75px, 0);
    }

    &-active {
      transition: all 0.3s;
    }

    &-to {
      opacity: 1;
      transform: none;
    }
  }
}

.t-message {
  position: absolute;
  top: 6%;
  left: 50%;
  z-index: 9999;
  display: inline-block;
  max-height: 50px;
  padding: 10px;
  white-space: nowrap;
  border-radius: 8px;
  transform: translateX(-50%);
  background-color: var(--uikit-color-white-2);
  color: var(--uikit-color-gray-light-5);

  .t-message-text {
    font-size: .875rem;
    vertical-align: middle;
  }

  .t-message-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    vertical-align: middle;
    background-size: cover;
  }
}

.t-message.t-message-error {
  @include err_color;
}

.t-message.t-message-success {
  @include success_color;
}

.t-message.t-message-warning {
  @include warning_color;
}

.t-message.t-message-info {
  @include info_color;
}