@import 'variable';
@import '../../styles/mixins';
@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';

$types: success, warning, error, notice, help;

$class-prefix: 'cn-ui-m-message';

.#{$hashClassName}.#{$class-prefix} {
  border-radius: $m-radius;
  color: $m-color-bg-heavy;
  background-color: $m-color-bg-light;

  // type
  @each $type in $types {
    &--inline-#{$type} {
      color: var(--message-#{$type}-color);
      background-color: var(--message-#{$type}-bg-color);
    }
  }

  &--inline {
    @include flex(row, flex-start, flex-start);
    padding: $m-s-12;
    box-sizing: border-box;

    &--no-content {
      align-items: center;
    }
  }

  .#{$class-prefix} {
    &-container {
      flex-grow: 1;
      flex-shrink: 1;

      &--toast {
        flex-grow: inherit;
        color: #fff;
      }
    }
    &-icon-container {
      &--toast {
        @include flex(row, center, center);
        padding-right: $m-s-6;
        box-sizing: border-box;
      }
      &--inline {
        padding-top: $m-s-1;
        line-height: $m-s-16;
      }
    }

    &-icon {
      display: block;

      @each $type in $types {
        &--#{$type} {
          color: var(--message-#{$type}-icon-color);
        }
      }

      &--inline {
        font-size: $m-s-16;
        margin-right: var(--message-spacing);
      }

      &--toast {
        color: var(--message-toast-color);
        font-size: var(--message-toast-icon-size);
        display: flex;
        margin-top: $m-s-1;
      }
    }

    &-title {
      word-break: break-all;
      white-space: pre-wrap;
      line-height: 1.3;
      margin-bottom: $m-s-3;

      @each $type in $types {
        &--#{$type} {
          color: var(--message-#{$type}-color);
          font-weight: normal;
        }
      }
    }

    &-close,
    &-action {
      padding-left: $m-s-12;
      align-self: center;

      @each $type in $types {
        &--#{$type} {
          color: var(--message-#{$type}-color);
        }
      }

      &-after-icon {
        padding-left: $m-s-8;
      }
    }

    &-action {
      .cn-ui-m-icon-remote {
        font-size: $m-s-12;
      }
    }

    &-content {
      &--inline {
        font-size: $m-s-14;
        line-height: 1.5;
        -webkit-line-clamp: 3;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: break-spaces;
      }
      &--inline-temp {
        font-size: $m-s-14;
        line-height: 1.5;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -999;
        opacity: 0;
        pointer-events: none;
        white-space: break-spaces;
      }
      &--no-title {
        margin-top: 0;
      }
      &--toast {
        color: var(--message-toast-color);
        font-size: $m-s-14;
        display: flex;
        word-break: break-all;
      }
      &-container--inline {
        position: relative;
      }
    }
  }

  &--toast {
    @each $type in $types {
      .#{$class-prefix}-icon--#{$type} {
        color: var(--message-toast-color);
      }
    }
  }

  &--loading {
    .#{$class-prefix} {
      .#{$class-prefix}-icon-container--toast {
        width: $m-s-40;
        height: $m-s-40;
        padding: 0;
        margin-bottom: $m-s-6;
      }
    }
  }

  &--toast {
    @include flex(row, center, flex-start);
    background-color: rgba(0, 0, 0, 0.7);
    padding: $m-s-8 $m-s-12;

    width: max-content;
    min-width: $m-s-30;
    max-width: 296px;
    position: fixed;
    line-height: $m-s-20;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    z-index: $cn-message-z-index;

    &-loading {
      width: $m-s-114;
      height: $m-s-118;
      padding-top: $m-s-15;
      flex-direction: column;
      align-items: center;
      .cn-ui-m-loading {
        .cn-ui-m-load-svg {
          color: #fff;
        }
      }
    }
  }
  &-mask {
    position: fixed;
    z-index: $cn-message-mask-z-index;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
  }

  &-full-notice-wrap {
    .cn-ui-m-dialog-close-wrapper {
      display: none;
    }
  }

  &--multiple {
    .cn-ui-m-message-content--inline {
      -webkit-line-clamp: inherit;
    }
  }
}