@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '../../styles/mixins.scss';
/*! rtl:begin:ignore */
@mixin hairlineBorderColor($color: transparentize()) {
  &:after {
    border-color: $color;
  }
}

$class-prefix: 'cn-ui-m-step-item';

$cur: '.cn-ui-m-step-item';

.#{$hashClassName}.#{$class-prefix} {
  position: relative;
  display: flex;
  flex-direction: column;

  .#{$class-prefix} {
    &-indicator {
      @include flex(row, center, center);
    }

    &-node {
      position: relative;
      box-sizing: border-box;
      border-radius: 50%;
      border-style: solid;
      border-width: $m-line;
      margin-left: $m-s-4;
      margin-right: $m-s-4;

      word-wrap: break-word;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &-body {
      display: flex;
      flex-direction: column;
      margin-top: $m-s-10;
      text-align: center;

      padding-left: $m-s-10;
      padding-right: $m-s-10;
    }

    // 仅在垂直模式出现
    &-body-header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      #{$cur}-title {
        text-align: left;
        flex: 1 1 auto;
      }

      #{$cur}-extra {
        padding-left: $m-s-12;
        text-align: right;
        flex: 0 0 auto;

        color: $m-color-text-tip;
        font-size: $m-font-size-body-1;
        line-height: $m-font-lineheight-1;
        font-weight: $m-font-weight;
      }
    }

    &-title {
      display: inline;
      color: $m-color-text-tip;
      font-size: $m-font-size-body-1;
      min-height: $m-font-size-body-1;
      line-height: $m-font-lineheight-1;
      font-weight: $m-font-weight-medium;

      word-wrap: break-word;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &-content {
      display: inline;
      margin-top: $m-s-4;
      color: $m-color-text-tip;
      font-size: $m-font-size-caption;
      line-height: $m-font-lineheight-2;
      text-align: center;
      box-sizing: border-box;
    }

    // 连线相关
    &-horn {
      border: 0 solid transparent;
      border-top-width: $m-line;
      border-left-width: $m-line;
      border-top-color: $m-color-secondary-lightest;
      border-left-color: $m-color-secondary-lightest;
      flex: 1;

      &--hide {
        visibility: hidden;
      }
    }
  }

  // 横向内容
  &--hoz .#{$class-prefix}-body {
    // 最大设定
    min-width: $m-s-78;
    max-width: $m-s-112;
  }

  &--process .#{$class-prefix}-title {
    color: $m-color-primary;
  }

  &--shape-circle .#{$class-prefix}-horn {
    border-top-color: $m-color-primary;
    border-left-color: $m-color-primary;
  }

  &-process .#{$class-prefix}-horn {
    &--right {
      border-color: $m-color-secondary-lightest;
    }
  }
  &--process .#{$class-prefix}-horn--right,
  &--wait .#{$class-prefix}-horn {
    border-top-color: $m-color-bg;
    border-left-color: $m-color-bg;
  }
  &--error .#{$class-prefix}-horn {
    border-top-color: $m-color-bg;
    border-left-color: $m-color-bg;
  }

  // for circle
  &--process .#{$class-prefix}-node {
    background-color: $m-color-primary;
    border: none;
    color: $m-color-bg-white;
  }

  &--wait .#{$class-prefix}-node {
    background-color: $m-color-bg-white;
    //border-color: ;
    @include hairlineBorderColor($m-color-bg);
    color: $m-color-bg;
  }

  &--finish .#{$class-prefix}-node {
    background-color: $m-color-bg-white;
    @include hairlineBorderColor($m-color-primary);
    color: $m-color-primary;
  }

  &--error .#{$class-prefix}-node {
    background-color: $m-color-bg-white;
    @include hairlineBorderColor($m-color-bg);
    color: $m-color-error;
  }
  &--error .#{$class-prefix}-title {
    color: $m-color-error;
  }

  // dot 特殊样式
  &--shape-dot .#{$class-prefix}-node {
    width: $m-s-8;
    height: $m-s-8;
  }

  &--shape-dot#{$cur}--finish .#{$class-prefix}-node {
    background: $m-color-secondary-lightest;
    border: none;
  }
  &--shape-dot#{$cur}--wait .#{$class-prefix}-node {
    background: $m-color-bg;
    border: none;
  }

  &--shape-dot#{$cur}--process .#{$class-prefix}-node,
  &--shape-circle#{$cur}--process .#{$class-prefix}-node {
    animation: cn-ui-m-step-blink 0.25s ease;
    transition: all 0.1s linear;
  }

  // circle 特殊样式
  &--shape-circle .#{$class-prefix}-node {
    @include flex(row, center);
    width: $m-s-18;
    height: $m-s-18;
    font-size: $m-font-size-caption;
  }

  // vertical (dot)
  &--ver {
    flex-direction: row;
    width: 100%;
    .#{$class-prefix} {
      &-indicator {
        flex-direction: column;
        justify-content: flex-start;
      }
      &-node {
        margin: $m-s-4 0;
      }
      &-horn--hide,
      &-horn--left {
        display: none;
      }
      &-horn--right {
        padding-bottom: $m-s-12;
      }

      &-body {
        flex: 1;
        // 保障子元素宽度不超出父元素宽度
        min-width: 0;
        margin: 0 $m-s-8;
        padding-bottom: $m-s-24;
        padding-left: 0;
        padding-right: 0;
      }
      &-content {
        text-align: left;
        padding: 0;
        word-break: break-word;
      }

      &-addon {
        margin-right: $m-s-12;
        max-width: $m-s-38;
        font-size: $m-font-size-body-1;
        color: $m-color-text;
        line-height: $m-font-lineheight-1;
      }
    }
  }

  &--ver#{$cur}--last {
    .#{$class-prefix}-body {
      padding-bottom: 0;
    }
  }

  &--ver#{$cur}--shape-circle {
    .#{$class-prefix}-body-header {
      margin-top: $m-s-6;
    }
  }
  &--ver#{$cur}--shape-dot {
    .#{$class-prefix}-body-header {
      margin-top: $m-s-1;
    }
  }

  // disabled
  &--disabled#{$cur}--shape-circle .#{$class-prefix}-node,
  &--disabled#{$cur}--shape-dot .#{$class-prefix}-node {
    //border-color: var(--step-node-disabled-border-color);
    @include hairlineBorderColor($m-color-text-disabled);
    border-style: solid;
    background-color: $m-color-bg-white;
    border-color: $m-color-text-disabled;
    color: $m-color-text-disabled;
  }

  &--pre-disabled#{$cur}--shape-circle .#{$class-prefix}-horn--left,
  &--pre-disabled#{$cur}--shape-dot .#{$class-prefix}-horn--left,
  &--disabled#{$cur}--shape-circle .#{$class-prefix}-horn--right,
  &--disabled#{$cur}--shape-dot .#{$class-prefix}-horn--right {
    border-color: $m-color-text-disabled;
  }

  &--disabled .#{$class-prefix}-title,
  &--disabled .#{$class-prefix}-content {
    color: $m-color-text-disabled;
    border-color: $m-color-text-disabled;
  }

  &--disabled .#{$class-prefix}-node {
    @include hairlineBorderColor($m-color-text-disabled);
  }

  &--ver#{$cur}--shape-circle .#{$class-prefix}-addon {
    margin-top: $m-s-6;
  }
  &--ver#{$cur}--shape-dot .#{$class-prefix}-addon {
    margin-top: $m-s-1;
  }
}
/*! rtl:end:ignore */

/* prettier-ignore */
[dir=rtl] .#{$hashClassName} .cn-ui-m-step-item--ver .cn-ui-m-step-item-content {
  text-align: right;
}
/* prettier-ignore */
[dir=rtl] .#{$hashClassName}.cn-ui-m-step-item .cn-ui-m-step-item-body-header {
  #{$cur}-title {
     text-align: right;
  }
  #{$cur}-extra {
    padding-left: 0;
    padding-right: $m-s-12;
  }
}