@import "../common/varible";

.yu-steps-item {
  font-family: $font-family;
  position: relative;
  font-size: 0;
  color: $text-light;
  display: inline-block;
  z-index: 100;
  & > .line {
    position: absolute;
    top: $steps-circle-length / 2;
    width: 100%;
    & > i {
      background: $background;
      display: block;
      height: 1px;
      border-radius: 1px;
      width: 100%;
      &::after {
        top: 0;
        width: 0;
        height: 0;
        background: $primary;
        position: absolute;
        content: "";
        display: block;
      }
    }
    z-index: -1;
  }
  & > .head {
    background: #fff;
    display: inline-block;
    font-size: $normal;
    & > .inner {
      box-sizing: content-box;
      display: inline-block;
      height: $steps-circle-length;
      width: $steps-circle-length;
      border-radius: $steps-circle-length;
      border: 1px solid $border;
      line-height: $steps-circle-length;
      text-align: center;
      color: $text-light;
      transition: background-color .4s linear;
    }
  }
  & > .main {
    padding: 0 $space;
    font-size: $normal;
    background: #fff;
    display: inline-block;
    line-height: $steps-circle-length;
    vertical-align: top;
    & > .title {
      font-size: $normal;
      font-weight: normal;
      margin: 0;
      padding: 0;
      border: none;
    }
    & > .description {
      font-size: $small;
      margin: 0;
    }
  }

  &.active {
    & > .head {
      & > .inner {
        background-color: $primary;
        color: #fff;
        border-color: $primary;
      }
    }

    & > .main {
      color: $text-dark;
    }
  }

  &.finished {
    & > .line {
      & > i {
        &::after {
          width: 100%;
          height: 1px;
          transition: width 1s ease;
        }
      }
    }
    & > .head {
      & > .inner {
        border-color: $primary;
        color: $primary;
      }
    }
  }

  &.small {
    & > .line {
      top: $steps-small-circle-length / 2;
    }
    & > .head {
      & > .inner {
        height: $steps-small-circle-length;
        width: $steps-small-circle-length;
        border-radius: $steps-small-circle-length;
        line-height: $steps-small-circle-length;
        font-size: $small;
        i {
          font-size: $small;
        }
      }
    }
    & > .main {
      padding: 0 $space;
      font-size: $small;
      background: #fff;
      display: inline-block;
      line-height: $steps-small-circle-length;
      vertical-align: top;
      & > .description {
        font-size: $tiny;
      }
    }
  }
}

.yu-steps {
  &.vertical {
    & > .yu-steps-item {
      display: block;
      height: $steps-vertical-height;
      & > .head {
        padding-bottom: $space-tiny;
        &:nth-child(n+2) {
          padding-left: 0;
        }
        & > .inner {
          transition: background-color .4s linear;
        }
      }

      & > .line {
        top: $steps-circle-length;
        left: $steps-circle-length / 2;
        height: $steps-vertical-height / 2;
        & > i {
          width: 1px;
          height: 100%;
          &::after {
            width: 0;
            height: 0;
          }
        }
      }
      &.small {
        & > .line {
          left: $steps-small-circle-length / 2;
        }
      }
      &.finished {
        & > .line {
          & > i {
            &::after {
              width: 1px;
              height: 100%;
              transition: height $transition-time ease;
            }
          }
        }
      }
    }
  }

  & > .yu-steps-item {
    &:nth-child(n+2) > .head {
      padding-left: $space;
    }
    &:last-child {
      & > .line {
        display: none;
      }
    }
  }
}