@import "../../theme/default";

.mx-notice{
  padding:8px 10px;
  display: flex;
  align-items: center;
  background-color: #eee;
  .mx-notice-type{
    margin-right: 8px;
  }
  .mx-notice-content{
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &.mx-notice-success{
    background-color: $color-bg-success;
    color:$color-success;
  }

  &.mx-notice-error{
    background-color: $color-bg-error;
    color:$color-error;
  }

  &.mx-notice-warn{
    background-color: $color-bg-warn;
    color:$color-warn;
  }

  &.mx-notice-question{
    background-color: $color-bg-question;
    color:$color-question;
  }

  &.mx-notice-info{
    background-color: $color-bg-info;
    color:$color-info;
  }
}