@import '../../../style/themes/index';
@import '../../../style/mixins/index';

@steps-prefix-cls: ~'@{fc-prefix}-steps';

.@{steps-prefix-cls} {
  margin: 12px;
  .ant-steps-item-icon {
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 32px;
    margin-right: 12px;
  }

  .ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item {
    margin-right: 12px;
  }

  .ant-steps-item-title {
    line-height: 28px;
    padding-right: 12px;
  }

  .ant-steps-item-finish {
    .ant-steps-item-icon {
      background: @blue-1;
      border: none;
      .ant-steps-icon {
        color: @primary-6;
      }
      .ant-steps-icon-dot {
        background: @primary-6;
      }
    }

    > .ant-steps-item-container > .ant-steps-item-content {
      > .ant-steps-item-title {
        color: @black-10;
      }
      > .ant-steps-item-title::after {
        background-color: @primary-6;
      }
    }
  }

  .ant-steps-item-process {
    .ant-steps-item-icon {
      background: @primary-6;
      border: none;
    }
    > .ant-steps-item-container > .ant-steps-item-content {
      > .ant-steps-item-title::after {
        background-color: @black-3;
      }
      > .ant-steps-item-title {
        color: @black-10;
      }
    }
  }

  .ant-steps-item-wait {
    .ant-steps-item-icon {
      background: @black-2;
      border: none;
      > .ant-steps-icon {
        color: @black-8;
      }
      .ant-steps-icon-dot {
        background: @black-4;
      }
    }
    > .ant-steps-item-container > .ant-steps-item-content {
      > .ant-steps-item-title {
        color: @black-8;
        font-weight: 400;
      }
      > .ant-steps-item-title::after {
        background-color: @black-3;
      }
    }
  }

  .ant-steps-item-finish,
  .ant-steps-item-process,
  .ant-steps-item-wait {
    > .ant-steps-item-container > .ant-steps-item-content {
      .ant-steps-item-description {
        font-size: 12px;
        line-height: 20px;
        color: @black-6;
      }
      > .ant-steps-item-title::after {
        top: 14px;
      }
    }
  }

  .ant-steps-small {
    .ant-steps-item-icon {
      width: 24px;
      height: 24px;
      line-height: 24px;
    }
    .ant-steps-item-title {
      line-height: 24px;
      padding-right: 12px;
    }

    .ant-steps-item-finish,
    .ant-steps-item-process,
    .ant-steps-item-wait {
      > .ant-steps-item-container > .ant-steps-item-content {
        .ant-steps-item-description {
          font-size: 12px;
          line-height: 20px;
          color: @black-6;
        }
        > .ant-steps-item-title::after {
          top: 12px;
        }
      }
    }
  }

  .ant-steps-vertical {
    .ant-steps-item-description {
      /** min-height: 100px; */
    }
    .ant-steps-item-container > .ant-steps-item-tail {
      left: 14px;
      padding: 32px 0 4px;
    }
    .ant-steps-item-finish {
      .ant-steps-item-tail::after {
        background: @primary-6;
      }
    }
  }

  .ant-steps-vertical.ant-steps-small {
    .ant-steps-item-container > .ant-steps-item-tail {
      left: 12px;
      padding: 28px 0 4px;
    }
  }

  .ant-steps-dot {
    .ant-steps-item-icon {
      width: 10px;
      height: 10px;
      line-height: 10px;
      background: none;
    }
    .ant-steps-item-tail {
      top: 4px;
    }
    .ant-steps-item-tail::after {
      height: 1px;
      background: @black-3;
    }
    .ant-steps-item-finish {
      .ant-steps-item-tail::after {
        background: @primary-6;
      }
    }
    .ant-steps-item-process {
      .ant-steps-item-icon {
        background: @primary-6;
        border: none;
        .ant-steps-icon-dot {
          background: none;
        }
      }
    }
    .ant-steps-item-title {
      padding: 0;
    }
  }
  .ant-steps-vertical.ant-steps-dot {
    .ant-steps-item > .ant-steps-item-container > .ant-steps-item-tail {
      left: -8px;
      padding: 22px 0 0;
    }
  }
  .ant-steps-small .ant-steps-item-tail::after {
    height: 1px;
  }
}

.@{steps-prefix-cls}.not-line {
  .ant-steps-item-finish,
  .ant-steps-item-process,
  .ant-steps-item-wait {
    > .ant-steps-item-container > .ant-steps-item-content {
      > .ant-steps-item-title::after {
        display: none;
      }
    }
  }
  .ant-steps-vertical {
    .ant-steps-item-finish,
    .ant-steps-item-process,
    .ant-steps-item-wait {
      .ant-steps-item-tail::after {
        display: none;
      }
    }
  }
}