@import '../styles/mixins/index.less';
@import '../styles/themes/index.less';

.@{wux-prefix}-step {
  font-size: 0;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  padding: 0 5px;
  vertical-align: top;

  &--vertical {
    padding-bottom: 30px;

    .@{wux-prefix}-step__hd {
      float: left;
    }

    .@{wux-prefix}-step__bd {
      overflow: hidden;
      display: block;
      margin-left: 40px;
      margin-top: 0;
      text-align: left;
      clear: inherit;
    }

    .@{wux-prefix}-step__ft {
      position: absolute;
      left: 19px;
      top: 0;
      height: 100%;
      width: @steps-line-size;
      padding: 30px 0 4px;
      margin-left: 0;

      &::after {
        width: @steps-line-size;
        height: 100%;
      }
    }
  }

  &__ft {
    position: absolute;
    left: 50%;
    width: 100%;
    top: 12px;
    padding: 0 24px;
    margin-left: 3px;
    box-sizing: border-box;

    &::after {
      content: '';
      display: inline-block;
      background: @border-color-split;
      height: @steps-line-size;
      border-radius: @steps-line-size;
      width: 100%;
      transition: background 0.3s;
      position: relative;
      left: -2px;
    }
  }

  &__icon {
    box-sizing: border-box;
    font-size: @steps-icon-size / 2;
    width: @steps-icon-size;
    height: 100%;
    border-radius: 50%;
    background: @steps-default-color;
    position: relative;
    z-index: 2;
    margin: 0 auto;
    border: @steps-default-bg solid 1px;
  }

  &__thumb {
    width: 100%;
    height: 100%;
    display: inline-block;
    overflow: hidden;
  }

  &--process {
    .@{wux-prefix}-step__icon {
      border: @steps-process-bg solid 1px;
      color: @steps-default-color;
      background: @steps-process-bg;
    }

    .@{wux-prefix}-step__ft::after {
      // background: @steps-process-bg;
    }
  }

  &--wait {
    .@{wux-prefix}-step__icon {
      border: @steps-wait-bg solid 1px;
      color: @steps-wait-bg;
    }

    .@{wux-prefix}-step__ft::after {
      background: @steps-wait-bg;
    }
  }

  &--finish {
    .@{wux-prefix}-step__icon {
      border: @steps-finish-bg solid 1px;
      color: @steps-finish-bg;
    }

    .@{wux-prefix}-step__ft::after {
      background: @steps-finish-bg;
    }
  }

  &--error {
    .@{wux-prefix}-step__icon {
      border: @steps-error-bg solid 1px;
      color: @steps-error-bg;
    }

    .@{wux-prefix}-step__ft::after {
      background: @steps-error-bg;
    }
  }

  &__hd {
    width: auto;
    height: @steps-icon-size;
    line-height: @steps-icon-size;
    text-align: center;
    box-sizing: border-box;
  }

  &__bd {
    margin-top: 10px;
    text-align: center;
    clear: both;
  }

  &__title {
    font-size: @font-size-lg;
    font-weight: 700;
    color: @heading-color;
  }

  &__content {
    font-size: @font-size-sm;
    margin-top: 3px;
    color: @text-color;
  }
}