@import "../styles/vars.less";
@import "../styles/mixins.less";
@prefixCls : cuke-steps;
@step-prefixCls : cuke-step;
.@{prefixCls} {
  &-header {
    overflow: hidden;
    position: relative;
    display: flex;
    .flex-center(space-between);
  }
  &-step {
    height: 100%;
    position: relative;
    box-sizing: border-box;
    text-decoration: none;
    text-align: center;
    transition: all @default-transition;
    display: inline-flex;
    overflow: hidden;
    flex: 1 1 auto;
    margin-right: @cuke-steps-offset-right;
    &.@{prefixCls}-step-error {
      .@{prefixCls}-step-icon {
        color: @error-color;
      }
      .@{prefixCls}-step-content {
        &-title {
          color: @error-color;
          &::after {
            background-color: @error-color;
          }
        }
        &-description {
          color: @error-color;
        }
      }
    }
    &.@{prefixCls}-step-active {
      color: @primary-color;
      .@{prefixCls}-content-title {
        &::after {
          background-color: @primary-color;
        }
      }
    }
    &-icon {
      margin-right: @cuke-steps-icon-offset;
      &, svg {
        font-size: @cuke-steps-icon-font-size;
      }
    }
    &-done {
      .@{prefixCls}-step-icon {
        color: @primary-color;
      }
      .@{prefixCls}-step-content {
        &-title {
          color: @cuke-steps-done-title-color;
          &::after {
            background-color: @primary-color;
          }
        }
      }
    }
    &-wait {
      color: @disabled-font-color;
    }
    &-process {
      .@{prefixCls}-step-content {
        &-title {
          font-weight: bold;
        }
        &-description {
          color: @font-color;
        }
      }
    }
    &-content {
      text-align: left;
      &-title {
        position: relative;
        padding-top: 14px;
        &.@{prefixCls}-no-description {
          padding-right: @cuke-steps-offset-right;
        }
        &::after {
          content: " ";
          height: 1px;
          width: 9999px;
          background-color: @border-color;
          position: absolute;
          top: 23px;
          left: 100%;
          transition: background-color @default-transition;
        }
      }
      &-description {
        color: @disabled-font-color;
        transition: color @default-transition;
      }
    }
  }
  .@{step-prefixCls} {
    margin-top: @cuke-step-offset-top;
    border: 1px solid @border-color;
    border-radius: @border-radius;
    padding: @cuke-step-padding;
  }
}
