@import "../common/varible";
@import "../common/function";
@import "../common/animation";


.yu-message {
  @include messageFadeInTransition();

  font-family: $font-family;
  padding: $space-small $space;
  width: $message-width;
  border-radius: $radius;
  font-size: $normal;
  position: fixed;
  left: 50%;
  transform: translateX(-$message-width/2);
  top: 0;
  z-index: 1000;
  box-sizing: border-box;

  i.iconfont:not(.icon-close) {
    font-size: $big;
    margin-right: 5px;
    vertical-align: top;
  }
  .content {
    vertical-align: top;
    display: inline-block;
  }
  .icon-close {
    margin-top: 2px;
    float: right;
    cursor: pointer;
  }
  background-color: lighten($info, 35);
  color: $info;
  border: 1px solid lighten($info, 30);

  @include generalAllColorMessage();

  &.center {
    text-align: center;
  }
}