/**
 *
 * This file may have been modified by Bytedance Inc. (“Bytedance Inc.'s Modifications”). 
 * All Bytedance Inc.'s Modifications are Copyright (year) Bytedance Inc..  
 * 
 * This source code is licensed under the Apache license.
 * See LICENSE file in the project root for license information.
 *
 */
.@{ant-prefix}-sp-steps {
  .step-description {
    margin-bottom: 0;
  }

  // step 按钮样式
  .step-button {
    width: @steps-style-example-width;
    height: @steps-style-example-height;
    margin-top: @steps-style-example-margin-top;
    border-radius: @steps-style-example-border-radius;
    border: @steps-style-example-border;
    background: @steps-style-default-background;
    color: @color-primary-brand;
    cursor: pointer;
    outline: none;
  }

  // title 样式
  .@{ant-prefix}-steps-item-title {
    padding-right: @steps-style-padding-right;
    color: @color-text-icon-0;
    .fontStyle-4-normal();
  }

  // upDone title 样式
  &.@{ant-prefix}-sp-updone-steps .@{ant-prefix}-steps-item-title {
    padding-right: @steps-style-updone-padding-right;
  }

  // icon 的样式
  .@{ant-prefix}-steps-item-icon,
  .@{ant-prefix}-steps-item-custom > .@{ant-prefix}-steps-item-container > .@{ant-prefix}-steps-item-icon {
    .step-icon(@steps-icon-width, @steps-icon-height);
    margin: @steps-icon-margin;
    font-size: @steps-base-font-size;
    .step-finish-icon {
      vertical-align: top;
    }
  }

  // 修改step中间线的样式
  &:not(.@{ant-prefix}-steps-vertical)
    .@{ant-prefix}-steps-item.@{ant-prefix}-steps-item-finish
    > .@{ant-prefix}-steps-item-container
    > .@{ant-prefix}-steps-item-content
    > .@{ant-prefix}-steps-item-title::after {
    .step-base-dashed-line(@color-primary-brand);
  }

  &:not(.@{ant-prefix}-steps-vertical)
    .@{ant-prefix}-steps-item
    > .@{ant-prefix}-steps-item-container
    > .@{ant-prefix}-steps-item-content
    > .@{ant-prefix}-steps-item-title::after {
    background-color: @steps-style-default-background;
    top: @steps-title-after-top;
    content: @steps-title-after-content;
    height: @steps-title-after-height;
    .step-base-dashed-line(@color-line-0);
  }

  // 修改 上下结构 step中间线的样式
  &:not(.@{ant-prefix}-steps-vertical)
    .@{ant-prefix}-steps-item.@{ant-prefix}-steps-item-finish
    > .@{ant-prefix}-steps-item-container
    .@{ant-prefix}-steps-item-tail {
    top: @steps-title-after-top;
    margin-left: @steps-lp-vertical-steps-item-tail-ml;
    padding: @steps-lp-vertical-steps-item-tail-padding;

    &::after {
      .step-base-dashed-line(@color-primary-brand);
    }
  }

  &:not(.@{ant-prefix}-steps-vertical)
    .@{ant-prefix}-steps-item
    > .@{ant-prefix}-steps-item-container
    .@{ant-prefix}-steps-item-tail {
    top: @steps-title-after-top;
    margin-left: @steps-lp-vertical-steps-item-tail-ml;
    padding: @steps-lp-vertical-steps-item-tail-padding;
    &::after {
      background-color: @steps-style-default-background;
      content: @steps-title-after-content;
      height: @steps-title-after-height;
      .step-base-dashed-line(@color-line-0);
    }
  }

  // 修改带操作的文字大小
  .@{ant-prefix}-steps-item
    > .@{ant-prefix}-steps-item-container
    > .@{ant-prefix}-steps-item-content
    > .@{ant-prefix}-steps-item-description {
    .fontStyle-5-normal();
    margin-top: @steps-style-margin-top;
    color: @color-text-icon-2;
  }

  // 修改两个step间的距离
  &.@{ant-prefix}-steps-horizontal:not(.@{ant-prefix}-steps-label-vertical) .@{ant-prefix}-steps-item {
    margin-right: @steps-style-margin-right;
    padding-left: @steps-item-padding-left;
  }

  .sp-step {
    // icon样式
    &.@{ant-prefix}-steps-item
      > .@{ant-prefix}-steps-item-container
      .@{ant-prefix}-steps-item-icon
      > .@{ant-prefix}-steps-icon {
      display: inline-block;
      top: @steps-icon-top;
      left: @steps-icon-left;
      .step-icon(@steps-icon-width, @steps-icon-height);
      .step-finish-icon {
        font-size: @steps-icon-width;
      }
    }

    &.@{ant-prefix}-steps-item .@{ant-prefix}-steps-item-icon {
      border: none;
    }

    // active icon 样式
    &.@{ant-prefix}-steps-item-active {
      & > .@{ant-prefix}-steps-item-container > .@{ant-prefix}-steps-item-content > .@{ant-prefix}-steps-item-title {
        font-weight: @Font-Weight-2;
      }
    }

    // finish icon样式
    &.@{ant-prefix}-steps-item-finish .@{ant-prefix}-steps-item-icon > .@{ant-prefix}-steps-icon {
      background-color: @steps-icon-background-finish-bg-color;
      border-radius: @steps-icon-background-finish-bd-radius;
    }

    // 修改step 颜色
    &.@{ant-prefix}-steps-item > .@{ant-prefix}-steps-item-container > .@{ant-prefix}-steps-item-content {
      & > .@{ant-prefix}-steps-item-title {
        color: @color-text-icon-0;
      }

      &.@{ant-prefix}-steps-item-description {
        color: @color-text-icon-2;
      }
    }

    // wait icon 样式
    &.@{ant-prefix}-steps-item-wait {
      .@{ant-prefix}-steps-item-icon {
        background-color: @steps-icon-background-wait-bg-color;
      }
      & > .@{ant-prefix}-steps-item-container > .@{ant-prefix}-steps-item-content > .@{ant-prefix}-steps-item-title {
        color: @color-text-icon-2;
      }
    }
  }

  // vertical icon 样式
  &.@{ant-prefix}-steps-label-vertical .sp-step {
    .@{ant-prefix}-steps-item-icon {
      margin-left: @steps-lp-vertical-steps-item-icon-ml;
    }
  }

  .sp-step.sp-icon {
    &.@{ant-prefix}-steps-item .@{ant-prefix}-steps-item-icon {
      border: none;
    }

    // finish icon样式
    &.@{ant-prefix}-steps-item-finish .@{ant-prefix}-steps-item-icon > .@{ant-prefix}-steps-icon {
      border-radius: @steps-item-icon-border-radius;
    }

    // process 自定义icon样式
    &.@{ant-prefix}-steps-item-process .@{ant-prefix}-steps-item-icon > .@{ant-prefix}-steps-icon {
      border-radius: @steps-item-icon-border-radius;
      background-color: @steps-icon-background-finish-bg-color;
    }

    // wait icon 样式
    &.@{ant-prefix}-steps-item-wait {
      .@{ant-prefix}-steps-item-icon {
        border-radius: @steps-item-icon-border-radius;
      }
    }

    .@{ant-prefix}-steps-item-icon > .@{ant-prefix}-steps-icon {
      font-size: @steps-base-font-size;
      width: @steps-icon-width;
      height: @steps-icon-height;
    }
  }

  &.@{ant-prefix}-steps-vertical > .@{ant-prefix}-steps-item {
    min-height: 108px;
    .@{ant-prefix}-steps-item-container {
      .@{ant-prefix}-steps-item-title {
        line-height: 20px;
      }

      .@{ant-prefix}-steps-item-icon {
        margin-right: 8px;
      }

      .@{ant-prefix}-steps-item-tail {
        left: @steps-vertical-steps-item-tail-left;
        padding: @steps-vertical-steps-item-tail-padding;

        &::after {
          .step-vertical-base-dashed-line(@color-primary-brand);
        }
      }
    }

    &.@{ant-prefix}-steps-item-wait > .@{ant-prefix}-steps-item-container > .@{ant-prefix}-steps-item-tail::after {
      .step-vertical-base-dashed-line(@color-line-0);
    }

    &.@{ant-prefix}-steps-item-process > .@{ant-prefix}-steps-item-container > .@{ant-prefix}-steps-item-tail::after {
      .step-vertical-base-dashed-line(@color-line-0);
    }
  }
}