@import '../variables.scss';
@import '~@alifd/next/lib/core/index-noreset'; // next core style
@import '~@alifd/next/lib/step/scss/variable';
@import '~@alifd/next/lib/step/scss/mixin';
@import './variables.scss';
.#{$css-prefix}step {
  /* 正在进行 */
  > .#{$css-prefix}step-item-process {
    > .#{$css-prefix}step-item-body {
      > .#{$css-prefix}step-item-content {
        /* 后面再改成变量 备注文字在三种形态下都是一样的style */
        color: $color-text1-2;
      }
    }
  }
  /* 已完成的 */
  > .#{$css-prefix}step-item-finish {
    > .#{$css-prefix}step-item-body {
      > .#{$css-prefix}step-item-title {
        color: $color-text1-3;
      }
    }
  }
  /* 未完成的 */
  > .#{$css-prefix}step-item-wait {
    > .#{$css-prefix}step-item-body {
      > .#{$css-prefix}step-item-title {
        opacity: 0.87;
        color: $color-text1-2;
      }
    }
  }
}

/* 点线形式 */
.#{$css-prefix}step-dot {
  /* 水平模式 */
  &.#{$css-prefix}step-horizontal {
    display: flex;
    flex-direction: row;
    /* 三种状态平分 */
    .#{$css-prefix}step-item-process {
      .#{$css-prefix}step-item-tail-overlay {
        background: $color-brand1-6;
      }
      flex: 1;
    }
    .#{$css-prefix}step-item-finish {
      .#{$css-prefix}step-item-tail-overlay {
        background: $color-brand1-6;
      }
      flex: 1;
    }
    .#{$css-prefix}step-item-wait {
      flex: 1;
    }
    .#{$css-prefix}step-item-node-dot {
      display: none;
    }
    .#{$css-prefix}step-item-body {
      left: 0 !important;
    }
    /* 中间距离 */
    .#{$css-prefix}step-item-tail {
      width: 100% !important;
      padding-right: 2px;
      .#{$css-prefix}step-item-tail-overlay {
        /* 具体高度不确定，需要important */
        height: 2px !important;
      }
    }
  }

  /* 垂直模式 */
  &.#{$css-prefix}step-vertical {
    .#{$css-prefix}step-item-finish {
      .#{$css-prefix}step-item-node-dot {
        background-color: $color-fill1-4;
        border-color: $color-fill1-4;
      }
    }
    .#{$css-prefix}step-item-process {
      .#{$css-prefix}step-item-node-dot {
        background-color: $color-brand1-6;
        border-color: $color-brand1-6;
      }
    }
    .#{$css-prefix}step-item-wait {
      .#{$css-prefix}step-item-node-dot {
        border-color: $color-text1-2;
      }
    }

    /* 线条颜色 */
    .#{$css-prefix}step-item-tail-overlay {
      background: $color-fill1-3;
    }
  }
}

/* 圆形进度条模式 */
.#{$css-prefix}step-arrow {
  /* 第一个li的左外边距和左半圆 */
  > .#{$css-prefix}step-item {
    margin-left: 0;
  }
  > .#{$css-prefix}step-item-first {
    margin-left: $b-design-step-circle-medium-margin !important;
  }
  .#{$css-prefix}step-item-first::before {
    border: $b-design-step-circle-medium-margin solid
      $b-design-step-circle-finished-color;
    border-radius: $b-design-step-circle-left-half-circle-border;
  }
  /* 正在进行的li的左外边距和左半圆 */
  .#{$css-prefix}step-item-process {
    background: $b-design-step-circle-process-color;
  }
  .#{$css-prefix}step-item-process::before {
    border: $b-design-step-circle-medium-margin solid $color-brand1-4;
    border-radius: $b-design-step-circle-left-half-circle-border;
  }
  .#{$css-prefix}step-item-process::after {
    border: $b-design-step-circle-medium-margin solid $color-brand1-6;
    border-radius: $b-design-step-circle-right-half-circle-border;
  }
  /* 最后一个右半圆 */
  .#{$css-prefix}step-item-last {
    background-color: $b-design-step-circle-wait-color;
    margin-right: $b-design-step-circle-medium-margin;
  }
  .#{$css-prefix}step-item-last::after {
    border: $b-design-step-circle-medium-margin solid
      $b-design-step-circle-wait-color;
    border-radius: $b-design-step-circle-right-half-circle-border;
  }
  /* 其他已完成和未完成的调整 */
  .#{$css-prefix}step-item-finish::after {
    border: $b-design-step-circle-medium-margin solid
      $b-design-step-circle-finished-color;
    z-index: 0;
  }

  /* 未完成的颜色调整 */
  .#{$css-prefix}step-item-wait {
    background-color: $b-design-step-circle-wait-color;
  }
  .#{$css-prefix}step-item-wait::before {
    border: $b-design-step-circle-medium-margin solid
      $b-design-step-circle-wait-color;
    z-index: 0;
  }
  .#{$css-prefix}step-item-wait::after {
    border-color: $b-design-step-circle-wait-color;
  }
}
