.@{css-prefix}message {
  padding: 6px;
  text-align: center;
  &:first-child {
    margin-top: -6px;
  }
  .bui-message-content {
    display: inline-block;
    pointer-events: all;
    background-color: @message-bg;
    box-shadow: @message-box-shadow;
    border-radius: @border-radius-base;
    padding: @message-padding-base-vertical @message-padding-base-horizontal;
    font-size: @font-size-md;
    line-height: @line-height-md;
    color: @text-color-1;
    .glyphicon-ok-circle {
      color: @success-color;
    }
    .glyphicon-remove-circle {
      color: @danger-color;
    }
  }
  .bui-message-icon{
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    &+.bui-message-text{
      margin-left: @message-text-margin-left;
    }
  }
  .bui-message-text{
    display: inline-block;
  }
  &-info {
    .bui-message-icon{
      fill: @info-color;
    }
  }
  &-success {
    .bui-message-icon{
      fill: @success-color;
    }
  }
  &-warning {
    .bui-message-icon{
      fill: @warning-color;
    }
  }
  &-error {
    .bui-message-icon{
      fill: @danger-color;
    }
  }
}
#bui_message_container{
  position: fixed;
  z-index: @message-z-index;
  width: 100%;
  top: 16px;
  left: 0;
  pointer-events: none;
}
.@{css-prefix}message-rtl {
  direction: rtl;
  .bui-message-icon +.bui-message-text {
    margin-left: 0;
    margin-right: @message-text-margin-left;
  }
}

.okee-message-fade-enter,
.okee-message-fade-leave-to {
  opacity: 0;
  transform: translate(0, -100%);
}

.okee-message-fade-enter-active,
.okee-message-fade-leave-active {
  transition: all .3s;
}