@import '../../../style/mixin.less';

.@{prefix}-ellipsis {
    .use-var(font-size, ellipsis-default-text-size);

    &-native.ellipsis,
    &-js-content-initial {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
        -webkit-box-orient: vertical;
        position: relative;
    }

    &-native-ellipsis-node {
        position: absolute;
        right: 0;
        bottom: 0;
        .use-var(background, ellipsis-float-ellipsis-node-background);
        .use-var(padding-left, ellipsis-float-ellipsis-node-padding-left);
    }

    &-js-content-text-pre {
        white-space: pre-line;
    }
    
    &-js-content-ellipsis {
        display: none;
    }
}

/***************************************************
 *                                                 *
 *               Arco Theme Style                  *
 *                                                 *
 ***************************************************/
& when (@use-dark-mode = 1) {
    
  .process-bg-color-with-config,
  .process-custom-icon-bg-color-with-config {
    @{arco-dark-mode-selector} & {
      .use-var(color, dark-steps-process-with-config-item-icon-color);
      .use-var(color, dark-steps-process-with-config-item-icon-color);
    }
  }
  .wait-custom-icon-bg-color-with-config {
    @{arco-dark-mode-selector} & {
      .use-var(background, dark-steps-wait-icon-num-background);
      .use-var(color, dark-sub-info-font-color);
      .use-var(background, dark-steps-wait-icon-num-background);
      .use-var(color, dark-sub-info-font-color);
    }
  }
  .@{prefix}-ellipsis {
    &-native-ellipsis-node {
      @{arco-dark-mode-selector} & {
        .use-var(background, dark-ellipsis-float-ellipsis-node-background);
      }
    }
  }
}
/********************* End *************************/