/* dependencies icon */
@import "../vars.less";

@message-backgroud-color-success: #D6FAEB;
@message-backgroud-color-error: #FFE6D1;
@message-backgroud-color-warning: #FFF0D1;
@message-backgroud-color-info: #D6FAFA;
@message-backgroud-color-dark: #636363;

.ten-message {
  display: flex;
  align-items: top;
  margin-top: 14px;
  margin-left: calc(50vw);
  padding: @message-padding;
  min-width: 340px;
  max-width: 500px;
  color: @text-color;
  box-shadow: @shadow-level-1;
  transform: translate(-50%, 0);
  border-radius: @message-border-radius-default;
  background: #fff;
  justify-content: space-between;

  &__content {
    flex: 1;
    word-break: break-all;
    line-height: 18px;
  }

  &--success {
    background: @message-backgroud-color-success;
    .ten-message__icon {
      color: @success-color;
    }
  }

  &--error {
    background: @message-backgroud-color-error;
    .ten-message__icon {
      color: @error-color;
    }
  }

  &--info {
    background: @message-backgroud-color-info;
    .ten-message__icon {
      color: #102C53;
    }
  }

  &--warning {
    background: @message-backgroud-color-warning;
    .ten-message__icon {
      color: @warning-color;
    }
  }

  &--dark {
    background: @message-backgroud-color-dark;
    color: #fff;
  }

  &__icon {
    flex: none;
    margin-right: 6px;
    font-size: 18px;
  }

  &__icon&__close {
    flex: none;
    margin-left: 6px;
    margin-right: 0px;
    color: @icon-color;
  }
}