@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

.@{prefix}-steps {
  display: flex;
  width: 100%;
  .step-item-basic();

  // 水平方向
  &--horizontal {
    // 内容最大宽度
    .@{prefix}-step-content {
      max-width: 80px;
      margin-top: @spacer;
    }

    .connector-default(horizontal);

    .@{prefix}-step {
      &--default {
        .default-number-status(default);
      }

      &--finish {
        .default-number-status(finish);
      }

      &--process {
        .default-number-status(process);
      }

      &--error {
        .default-number-status(error);
      }
    }

    &.@{prefix}-steps--icon-anchor {

      .@{prefix}-step {
        &-icon {
          &__number {
            display: flex;
            width: @step-horizontal-icon-width;
            height: @step-horizontal-icon-width;
            box-sizing: border-box;
            border: 1px solid @brand-color;
            border-radius: 50%;
            margin-top: 1px;
          }
        }
      }

      .@{prefix}-step:not(:last-child) {

        .@{prefix}-step__inner:after {
          content: "";
          display: block;
          height: 1px;
          background-color: @brand-color-5;
          position: absolute;
          width: calc(100% - @step-horizontal-icon-width);
          left: calc(50% + @step-horizontal-icon-width / 2);
          top: (@step-horizontal-icon-width / 2);
        }
      }
    }
  }

  // 垂直
  &--vertical {
    flex-direction: column;
    align-items: flex-start;

    .@{prefix}-step {
      position: relative;

      &__inner {
        flex-direction: row;
        align-items: flex-start;
      }

      &-content {
        margin-left: @spacer;
      }

      &-title {
        text-align: left;
        margin-top: @step-title-content-margin-top;
        margin-bottom: @spacer;
        line-height: @font-size-base;
      }

      &-description {
        text-align: left;
      }

      &-extra {
        margin-bottom: 19px;
      }
    }

    &.@{prefix}-steps--default-anchor {

      .@{prefix}-step {
        &--default {
          .default-number-status(default);
        }

        &--finish {
          .default-number-status(finish);
        }

        &--process {
          .default-number-status(process);
        }

        &--error {
          .default-number-status(error);

          .@{prefix}-step-title {
            color: @error-color;
          }
        }
      }
    }

    .connector-default(vertical);

    &.@{prefix}-steps--dot-anchor {

      .@{prefix}-step {
        &-icon {
          &__dot {
            display: block;
            width: @step-dot-anchor-width;
            height: @step-dot-anchor-width;
            box-sizing: border-box;
            border: 1px solid @brand-color;
            border-radius: 50%;
            margin-top: 1px;
          }
        }

        &-title {
          margin-top: 0;
        }
      }

      .@{prefix}-step:not(:last-child) {

        .@{prefix}-step__inner:after {
          content: "";
          display: block;
          height: calc(100% - @step-dot-anchor-width);
          width: 1px;
          background-color: @gray-color-5;
          position: absolute;
          left: calc(@step-dot-anchor-width / 2 - .5px);
          top: calc(@step-dot-anchor-width + .5px);
        }
      }
    }
  }

  &--readonly {
    .@{prefix}-step-title {
      color: @text-color-disabled;
    }
    .@{prefix}-step-description {
      color: @text-color-disabled;
    }

    .@{prefix}-step--error,
    .@{prefix}-step--process,
    .@{prefix}-step--finish {
      .@{prefix}-step-description {
        color: @text-color-placeholder;
      }
    }

    .@{prefix}-step--finish {
      .@{prefix}-step-title {
        color: @text-color-primary;
      }
    }
  }
}