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

@yee-steps-prefix-cls: ~'@{yee-prefix}-steps';
@yee-process-icon-color: @yee-primary-color;
@yee-process-title-color: @yee-heading-color;
@yee-process-description-color: @yee-text-color;
@yee-process-tail-color: @yee-border-color-split;
@yee-process-icon-text-color: @yee-text-color-inverse;
@yee-wait-icon-color: @yee-disabled-color;
@yee-wait-title-color: @yee-text-color-secondary;
@yee-wait-description-color: @yee-wait-title-color;
@yee-wait-tail-color: @yee-process-tail-color;
@yee-finish-icon-color: @yee-process-icon-color;
@yee-finish-title-color: @yee-text-color;
@yee-finish-description-color: @yee-text-color-secondary;
@yee-finish-tail-color: @yee-primary-color;
@yee-error-icon-color: @yee-error-color;
@yee-error-title-color: @yee-error-color;
@yee-error-description-color: @yee-error-color;
@yee-error-tail-color: @yee-wait-tail-color;
@yee-steps-background: @yee-component-background;
@yee-steps-nav-arrow-color: fade(@yee-black, 25%);
@yee-steps-nav-active-color: @yee-primary-color;

@yee-steps-icon-size: 32px;
@yee-steps-small-icon-size: 24px;
@yee-steps-dot-size: 8px;
@yee-steps-current-dot-size: 10px;
@yee-steps-desciption-max-width: 140px;
@yee-steps-nav-content-max-width: auto;

.@{yee-steps-prefix-cls} {
  .yee-reset-component;

  display: flex;
  width: 100%;
  font-size: 0;
}

.@{yee-steps-prefix-cls}-item {
  position: relative;
  display: inline-block;
  flex: 1;
  overflow: hidden;
  vertical-align: top;

  &-container {
    outline: none;
  }

  &:last-child {
    flex: none;
  }

  &:last-child > &-container > &-tail,
  &:last-child > &-container > &-content > &-title::after {
    display: none;
  }

  &-icon,
  &-content {
    display: inline-block;
    vertical-align: top;
  }

  &:not(.@{yee-steps-prefix-cls}-item-active) &-icon {
    border: @yee-border-width-base @yee-border-style-base @yee-wait-icon-color;
  }

  &-icon {
    width: @yee-steps-icon-size;
    height: @yee-steps-icon-size;
    margin-right: 8px;
    font-size: @yee-font-size-lg;
    font-family: @yee-font-family;
    line-height: @yee-steps-icon-size;
    text-align: center;

    border-radius: @yee-steps-icon-size;
    transition:
      background-color 0.3s,
      border-color 0.3s;

    > .@{yee-steps-prefix-cls}-icon {
      position: relative;
      top: -1px;
      color: @yee-primary-color;
      line-height: 1;
    }
  }
  &-tail {
    position: absolute;
    top: 12px;
    left: 0;
    width: 100%;
    padding: 0 10px;
    &::after {
      display: inline-block;
      width: 100%;
      height: 1px;
      background: @yee-border-color-split;
      border-radius: 1px;
      transition: background 0.3s;
      content: '';
    }
  }
  &-title {
    position: relative;
    display: inline-block;
    padding-right: 16px;
    color: @yee-text-color;
    font-size: @yee-font-size-lg;
    line-height: @yee-steps-icon-size;
    &::after {
      position: absolute;
      top: @yee-steps-icon-size / 2;
      left: 100%;
      display: block;
      width: 9999px;
      height: 1px;
      background: @yee-wait-tail-color;
      content: '';
    }
  }
  &-subtitle {
    display: inline;
    margin-left: 8px;
    color: @yee-text-color-secondary;
    font-weight: normal;
    font-size: @yee-font-size-base;
  }
  &-description {
    color: @yee-text-color-secondary;
    font-size: @yee-font-size-base;
  }
  .yee-step-item-status(wait);
  .yee-step-item-status(process);
  &-process &-icon {
    background: @yee-process-icon-color;
    > .@{yee-steps-prefix-cls}-icon {
      color: @yee-process-icon-text-color;
    }
  }
  &-process &-title {
    font-weight: 500;
  }
  .yee-step-item-status(finish);
  .yee-step-item-status(error);

  &.@{yee-steps-prefix-cls}-next-error .@{yee-steps-prefix-cls}-item-title::after {
    background: @yee-error-icon-color;
  }
}

// ===================== Clickable =====================
.@{yee-steps-prefix-cls} .@{yee-steps-prefix-cls}-item {
  &:not(.@{yee-steps-prefix-cls}-item-active) {
    & > .@{yee-steps-prefix-cls}-item-container[role='button'] {
      cursor: pointer;

      .@{yee-steps-prefix-cls}-item {
        &-title,
        &-description,
        &-icon .@{yee-steps-prefix-cls}-icon {
          transition: color 0.3s;
        }
      }

      &:hover {
        .@{yee-steps-prefix-cls}-item {
          &-title,
          &-subtitle,
          &-description {
            color: @yee-primary-color;
          }
        }
      }
    }

    &:not(.@{yee-steps-prefix-cls}-item-process) {
      & > .@{yee-steps-prefix-cls}-item-container[role='button']:hover {
        .@{yee-steps-prefix-cls}-item {
          &-icon {
            border-color: @yee-primary-color;

            .@{yee-steps-prefix-cls}-icon {
              color: @yee-primary-color;
            }
          }
        }
      }
    }
  }
}

.@{yee-steps-prefix-cls}-horizontal:not(.@{yee-steps-prefix-cls}-label-vertical) {
  .@{yee-steps-prefix-cls}-item {
    margin-right: 16px;
    white-space: nowrap;
    &:last-child {
      margin-right: 0;
    }
    &:last-child .@{yee-steps-prefix-cls}-item-title {
      padding-right: 0;
    }
    &-tail {
      display: none;
    }
    &-description {
      max-width: @yee-steps-desciption-max-width;
      white-space: normal;
    }
  }
}

.yee-step-item-status(@status) {
  @yee-icon-color: '@{status}-icon-color';
  @yee-title-color: '@{status}-title-color';
  @yee-description-color: '@{status}-description-color';
  @yee-tail-color: '@{status}-tail-color';
  &-@{status} &-icon {
    background-color: @yee-steps-background;
    border-color: @yee-icon-color;
    > .@{yee-steps-prefix-cls}-icon {
      color: @yee-icon-color;
      .@{yee-steps-prefix-cls}-icon-dot {
        background: @yee-icon-color;
      }
    }
  }
  &-@{status} > &-container > &-content > &-title {
    color: @yee-title-color;
    &::after {
      background-color: @yee-tail-color;
    }
  }
  &-@{status} > &-container > &-content > &-description {
    color: @yee-description-color;
  }
  &-@{status} > &-container > &-tail::after {
    background-color: @yee-tail-color;
  }
}

@import 'custom-icon';
@import 'small';
@import 'vertical';
@import 'label-placement';
@import 'progress-dot';
@import 'nav';
@import 'compatibility';