.#{$message-prefix-cls} {
  position: fixed;
  top: $message-top;
  left: 0;
  width: 100%;
  // transform: translateX(-50%);
  z-index: $zindex-message;
  font-size: $message-font-size;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  padding: 0 8px;

  &-notice {
    position: relative;
    margin-bottom: 10px;
    
    &-close {
      position: absolute;
      top: 6px;
      right: $notice-padding-x;
      cursor: pointer;
      outline: none;

      i {
        font-size: $notice-close-icon-font-size;
        color: $notice-close-icon-color;
        transition: color $transition-time ease;

        &:hover {
          color: $notice-close-icon-hover-color;
        }
      }
    }

    &-content {
      @include border-radius($border-radius);
      display: block;
      padding: $message-content-padding-y $message-content-padding-x;
      line-height: $message-height;
      background: $message-content-bg-color;
      box-shadow: $shadow-base;
    }

    &-closable &-content {
      padding-right: 65px;
    }
  }

  &-custom-content {
    display: flex;
    span{
      word-break: break-all;
    }
  }

  &-loading .#{$icon-prefix}-icon {
    color: $brand-primary;
  }
  .#{$icon-prefix}-icon {
    margin-right: $message-icon-spacer-x;
  }
  // Alternate styles
  @each $key, $val in $color-status {
    &-#{$key} .#{$icon-prefix}-icon {
      font-size: $message-icon-font-size;
      color: nth($val, 1);
    }
  }
}