
@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 {
  &.#{$css-prefix}medium {
    padding: $b-design-message-padding;
    .#{$css-prefix}message-close {
      line-height: $b-design-message-content-line-height;
    }
    &.#{$css-prefix}bg-white {
      &.#{$css-prefix}inline {
        &.#{$css-prefix}message-success,
        &.#{$css-prefix}message-warning,
        &.#{$css-prefix}message-notice,
        &.#{$css-prefix}message-error,
        &.#{$css-prefix}message-help,
        &.#{$css-prefix}message-loading {
          background-color: #fff;
          border-color: #fff;
        }
      }
    }
    .#{$css-prefix}message-title,
    .#{$css-prefix}message-content {
      letter-spacing: $b-design-message-letter-space;
    }

    // 调整图标
    &.#{$css-prefix}inline,
    .#{$css-prefix}toast {
      &.#{$css-prefix}message-help {
        .#{$css-prefix}message-symbol-icon::before {
          content: url('data:image/svg+xml; utf8, <svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Icon-/-Filled-/-Status-/-Help-/-16" transform="translate(-1.000000, -1.000000)" fill="rgba(27,88,244)"> <path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,11.8659932 11.8659932,15 8,15 C4.13400675,15 1,11.8659932 1,8 C1,4.13400675 4.13400675,1 8,1 Z M8,11 C7.72385763,11 7.5,11.2238576 7.5,11.5 C7.5,11.7761424 7.72385763,12 8,12 C8.27614237,12 8.5,11.7761424 8.5,11.5 C8.5,11.2238576 8.27614237,11 8,11 Z M8,4 C6.61928813,4 5.5,5.11928813 5.5,6.5 C5.5,6.77614237 5.72385763,7 6,7 C6.25641792,7 6.46775358,6.8069799 6.49663613,6.55831056 L6.5,6.5 C6.5,5.67157288 7.17157288,5 8,5 C8.8346141,5 9.50256243,5.66409237 9.50002175,6.49847753 C9.49894785,6.8471788 9.32970067,7.11292063 8.86136936,7.52544557 L8.76367652,7.60997574 L8.5424797,7.79545141 L8.26643944,8.02862658 C7.99295156,8.26564462 7.7948031,8.46163204 7.61250793,8.68650592 C7.55490932,8.75755785 7.518183,8.84268493 7.50568984,8.93243164 L7.50091621,9.00046011 L7.5,9.5032417 L7.50325853,9.56155829 C7.52950139,9.79114738 7.71129333,9.97360247 7.94078535,10.0006812 L7.99908969,10.0041512 L8.05740628,10.0008935 C8.28699537,9.97465061 8.46945047,9.79285867 8.4965298,9.56336666 L8.5,9.50506232 L8.5,9.187 L8.58600006,9.09621684 C8.68242246,8.99759289 8.7932384,8.89522718 8.9279671,8.7786227 L9.03364602,8.68833556 L9.38089055,8.39765886 L9.52629455,8.27232715 C10.1926301,7.68417823 10.4978441,7.20710679 10.500029,6.50153986 C10.5042491,5.11167617 9.38611818,4 8,4 Z" id="形状"></path></g></g></svg>');
        }
      }

      &.#{$css-prefix}message-loading {
        .#{$css-prefix}message-symbol-icon::before {
          content: url('data:image/svg+xml; utf8, <svg width="14px" height="14px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="40.-✅-Message-信息提示-*--⭐️" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="-Message-信息提示" transform="translate(-131.000000, -1389.000000)"><g id="loading-/-circle-type-/-18px" transform="translate(130.000000, 1388.000000)"><g id="编组备份" transform="translate(1.125000, 1.125000)"><path d="M7.875,0 C3.5257576,0 0,3.5257576 0,7.875 C0,12.2242424 3.5257576,15.75 7.875,15.75 C12.2242424,15.75 15.75,12.2242424 15.75,7.875 C15.75,3.5257576 12.2242424,0 7.875,0 Z M7.875,2.25 C10.9816017,2.25 13.5,4.76839828 13.5,7.875 C13.5,10.9816017 10.9816017,13.5 7.875,13.5 C4.76839828,13.5 2.25,10.9816017 2.25,7.875 C2.25,4.76839828 4.76839828,2.25 7.875,2.25 Z" id="椭圆形" fill="rgba(151,151,151)" fill-rule="nonzero" opacity="0"></path><path d="M7.875,0 C12.2242424,0 15.75,3.5257576 15.75,7.875 C15.75,12.2242424 12.2242424,15.75 7.875,15.75 C6.15901718,15.75 4.52349194,15.1984349 3.1753703,14.1944675 C2.67705293,13.8233627 2.57392675,13.1185568 2.94503153,12.6202394 C3.31613632,12.1219221 4.02094224,12.0187959 4.51925961,12.3899007 C5.48226252,13.1070641 6.64741351,13.5 7.875,13.5 C10.9816017,13.5 13.5,10.9816017 13.5,7.875 C13.5,4.76839828 10.9816017,2.25 7.875,2.25 C7.25367966,2.25 6.75,1.74632034 6.75,1.125 C6.75,0.503679656 7.25367966,0 7.875,0 Z" id="路径" fill="rgba(27,88,244)"></path></g></g></g></g></svg>');
        }
      }
    }

    &.#{$css-prefix}toast:not(.#{$css-prefix}message-wrapper) {
      padding: $s-6;
      .#{$css-prefix}message-close {
        right: $s-3;
      }
      &.#{$css-prefix}title-content {
        border-width: 0;
        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 {
          line-height: $b-design-message-toast-title-line-height;
        }

        .#{$css-prefix}message-symbol-icon {
          margin-right: $s-2;
          line-height: $s-6;
        }

        .#{$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,
      &.#{$css-prefix}message-help {
        &: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,
      &.#{$css-prefix}message-help {
        &:before {
          background-image: $b-design-message-toast-top-line-notice-img;
        }
        .#{$css-prefix}message-symbol-icon {
          color: $color-notice-3;
        }
      }

      &.#{$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;
          border-color: $color-success-1;
        }

        &.#{$css-prefix}message-warning {
          background-color: $b-design-message-warning-color;
          border-color: $b-design-message-warning-color;
        }

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

        &.#{$css-prefix}message-notice,
        &.#{$css-prefix}message-help {
          background-color: $b-design-message-notice-color;
          border-color: $b-design-message-notice-color;
        }
        &.#{$css-prefix}message-loading {
          background-color: $b-design-loading-color;
          border-color: $b-design-loading-color;
        }
      }
    }
    /* 全局消息提示 */
    &.#{$css-prefix}message-wrapper {
      padding-top: $s-3;
      padding-bottom: $s-3;
      height: $b-design-message-global-height;
      /* 统一设置标题格式 */
      &.#{$css-prefix}overlay-inner {
        &.#{$css-prefix}toast {
          .#{$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;
            height: 18px;
            line-height: 18px;
          }

          .#{$css-prefix}message-content {
            height: 18px;
            line-height: 18px;
          }
        }
      }

      /* 既有标题又有内容的全局消息 */
      &.#{$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;
          }
          .#{$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: 18px;
        }
        &.#{$css-prefix}close-add:not(.#{$css-prefix}with-content) {
          .#{$css-prefix}message-title {
            padding-right: $b-design-message-titleandcontent-padding-right;
            line-height: $b-design-message-content-line-height;
          }
        }
        .#{$css-prefix}message-close {
          line-height: 18px;
        }
      }
      /* 带叉号的右padding要更宽保证叉号和文案之间的距离 */
      .#{$css-prefix}message-content {
        margin-top: 0px;
        line-height: $b-design-message-content-line-height;
        padding: $b-design-message-content-padding;
      }

      &.#{$css-prefix}message-notice,
      &.#{$css-prefix}message-help {
        .#{$css-prefix}message-symbol-icon {
          color: $color-notice-3;
        }
      }
    }

    &.#{$css-prefix}addon {
      .#{$css-prefix}message-close {
        right: $b-design-close-icon-right;
      }
      &.#{$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}message-notice,
      &.#{$css-prefix}message-help {
        .#{$css-prefix}message-symbol-icon {
          color: $color-notice-3;
        }
      }
    }

    // inline 消息提示
    &.#{$css-prefix}inline {
      height: $b-design-message-inline-height;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      .#{$css-prefix}message-close {
        right: $b-design-close-icon-right;
        top: $b-design-message-with-close-icon;
      }
      &.#{$css-prefix}title-content {
        display: flex;
        flex-direction: row;
        border-radius: $b-design-message-corner;
        box-shadow: $b-design-message-line-shadow;

        .#{$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;
          color: $b-design-message-inline-content-color;
        }
      }

      &.#{$css-prefix}message-loading {
        background-color: $b-design-loading-color;
        border-color: $b-design-loading-color;
      }

      &.#{$css-prefix}message-success {
        .#{$css-prefix}message-title {
          color: $color-success-2;
        }
      }
      &.#{$css-prefix}message-warning {
        background-color: $b-design-message-warning-color;
        border-color: $b-design-message-warning-color;
        .#{$css-prefix}message-title {
          color: $b-design-message-warning-title-color;
        }
      }
      &.#{$css-prefix}message-error {
        .#{$css-prefix}message-title {
          color: $color-error-3;
        }
      }
      &.#{$css-prefix}message-notice,
      &.#{$css-prefix}message-help {
        .#{$css-prefix}message-title,
        .#{$css-prefix}message-symbol-icon {
          color: $color-notice-3;
        }
        background-color: $b-design-message-notice-color;
        border-color: $b-design-message-notice-color;
      }
    }
  }
}
