@import '../variables.scss';
@import './variables.scss';
@import '~@alifd/next/lib/core/index-noreset'; // next core style
@import '~@alifd/next/lib/message/scss/variable';
@import '~@alifd/next/lib/message/scss/mixin';

.#{$css-prefix}message {
  padding: $b-design-message-padding !important;
  .#{$css-prefix}message-close {
    line-height: $b-design-message-content-line-height;
  }
  &.#{$css-prefix}bg-white {
    background-color: #fff !important;
    border-color: #fff !important;
  }
  .#{$css-prefix}message-title,
  .#{$css-prefix}message-content {
    letter-spacing: $b-design-message-letter-space;
  }

  &.#{$css-prefix}toast:not(.#{$css-prefix}message-wrapper) {
    .#{$css-prefix}message-close {
      right: $b-design-message-with-close-icon !important;
    }
    &.#{$css-prefix}title-content {
      border-width: 0 !important;
      box-shadow: $b-design-message-toast-shadow;
      border-radius: $b-design-message-corner;
      max-width: $b-design-message-toast-max-width;

      .#{$css-prefix}message-title {
        margin-top: $b-design-message-toast-title-margin-top;
        padding-left: $b-design-message-title-padding-left;
        line-height: $b-design-message-toast-title-line-height;
      }

      .#{$css-prefix}message-symbol-icon {
        margin: $b-design-message-toast-symbol-icon-margin;
      }

      .#{$css-prefix}message-content {
        line-height: $b-design-message-toast-content-line-height;
        padding: $b-design-message-toast-content-padding;
      }
    }

    &.#{$css-prefix}message-success,
    &.#{$css-prefix}message-warning,
    &.#{$css-prefix}message-error,
    &.#{$css-prefix}message-notice,
    &.#{$css-prefix}message-loading {
      &:before {
        content: '';
        width: 100%;
        height: $b-design-message-toast-top-line-height;
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    &.#{$css-prefix}message-success {
      &:before {
        background-image: $b-design-message-toast-top-line-success-img;
      }
    }

    &.#{$css-prefix}message-warning {
      &:before {
        background-image: $b-design-message-toast-top-line-warning-img;
      }
    }

    &.#{$css-prefix}message-error {
      &:before {
        background-image: $b-design-message-toast-top-line-error-img;
      }
    }

    &.#{$css-prefix}message-notice {
      &:before {
        background-image: $b-design-message-toast-top-line-notice-img;
      }
    }

    &.#{$css-prefix}message-loading {
      background-color: $b-design-loading-color;
      &:before {
        background-image: $b-design-message-toast-top-line-loading-img;
      }
    }

    &.#{$css-prefix}bg-colorful {
      &.#{$css-prefix}message-success {
        background-color: $color-success-1;
      }

      &.#{$css-prefix}message-warning {
        background-color: $color-warning-1;
      }

      &.#{$css-prefix}message-error {
        background-color: $color-error-1;
      }

      &.#{$css-prefix}message-notice {
        background-color: $color-notice-1;
      }
      &.#{$css-prefix}message-loading {
        background-color: $b-design-loading-color;
      }
    }
  }
  /* 全局消息提示 */
  &.#{$css-prefix}message-wrapper {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    /* 统一设置标题格式 */
    .#{$css-prefix}message-title {
      font-family: PingFangSC-Regular;
      font-weight: normal;
      padding-right: 0;
      line-height: $b-design-message-content-line-height;
      font-size: $b-design-content-font-size;
      color: $color-fill1-6 !important;
    }
    /* 既有标题又有内容的全局消息 */
    &.#{$css-prefix}with-content {
      &.#{$css-prefix}title-content {
        display: flex;
        flex-direction: row;
        border-radius: $b-design-message-corner;
        .#{$css-prefix}message-symbol-icon {
          margin: $b-design-message-symbol-icon-margin;
          line-height: $b-design-message-content-line-height;
        }
        .#{$css-prefix}message-title {
          padding-left: 0;
          padding-right: $b-design-message-wrapper-title-padding;
          // line-height: $b-design-message-content-line-height;
          // font-size: $b-design-content-font-size;
          // color: $color-fill1-6;
        }
        .#{$css-prefix}message-content {
          padding-right: $b-design-message-titleandcontent-padding-right;
          font-family: PingFangSC-Regular;
          color: $color-fill1-6;
        }
      }
      .#{$css-prefix}message-content {
        white-space: nowrap;
      }
    }
    /* 只有内容没有标题的全局消息 */
    &.#{$css-prefix}only-content {
      /* 带有叉号的，右侧的padding更宽 */
      &.#{$css-prefix}close-add {
        .#{$css-prefix}message-content {
          padding-right: $s-10;
        }
      }
      /* 不管带叉号与否，左边icon与右侧content之间的距离都是4px*/
      .#{$css-prefix}message-symbol-icon {
        margin-right: 4px;
      }
    }

    /* 带有叉号的全局提示 */
    &.#{$css-prefix}close-add {
      .#{$css-prefix}message-symbol-icon {
        line-height: $b-design-message-content-line-height;
      }
      .#{$css-prefix}message-title {
        padding-right: $b-design-message-titleandcontent-padding-right;
        line-height: $b-design-message-content-line-height;
      }
    }
    /* 带叉号的右padding要更宽保证叉号和文案之间的距离 */
    .#{$css-prefix}message-content {
      margin-top: 0px;
      line-height: $b-design-message-content-line-height;
      padding: $b-design-message-content-padding;
    }
  }

  &.#{$css-prefix}addon {
    .#{$css-prefix}message-close {
      right: $b-design-close-icon-right !important;
    }
    &.#{$css-prefix}title-content {
      .#{$css-prefix}message-title {
        line-height: $b-design-message-toast-title-line-height;
      }
      .#{$css-prefix}message-symbol-icon {
        line-height: $s-6;
      }
    }
  }
  &.#{$css-prefix}inline {
    .#{$css-prefix}message-close {
      right: $b-design-close-icon-right !important;
      top: $b-design-message-with-close-icon !important;
    }
    &.#{$css-prefix}title-content {
      display: flex;
      flex-direction: row;
      border-radius: $b-design-message-corner;

      .#{$css-prefix}message-symbol-icon {
        margin: $b-design-message-symbol-icon-margin;
        line-height: $b-design-message-content-line-height;
      }

      .#{$css-prefix}message-title {
        font-weight: bold;
        padding: 0;
        line-height: $b-design-message-content-line-height;
      }

      .#{$css-prefix}message-content {
        margin-top: 0px;
        line-height: $b-design-message-content-line-height;
        padding: $b-design-message-content-padding;
      }
    }
  }

  &.#{$css-prefix}inline {
    &.#{$css-prefix}message-loading {
      background-color: $b-design-loading-color;
      border-color: $b-design-loading-color;
    }
    &.#{$css-prefix}title-content {
      box-shadow: $b-design-message-line-shadow;
    }
    &.#{$css-prefix}message-success {
      .#{$css-prefix}message-title {
        color: $color-success-2;
      }
    }
    &.#{$css-prefix}message-warning {
      .#{$css-prefix}message-title {
        color: $color-other-2;
      }
    }
    &.#{$css-prefix}message-error {
      .#{$css-prefix}message-title {
        color: $color-error-2;
      }
    }
  }
}
