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

@steps-prefix-cls: ~'@{ant-prefix}-steps';
// MSB modify start
@process-icon-color: @white;
@process-title-color: @primary-color;
@process-description-color: @color-gray-500;
@process-icon-text-color: @primary-color;
@process-border-color: @primary-color;
@steps-process-background: @color-primary-25;
// MSB modify end

@wait-icon-color: @white;
@wait-title-color: @text-color;
@wait-description-color: @color-gray-500;
@wait-tail-color: @process-tail-color;
@steps-wait-background: @color-primary-25;

@pending-icon-color: @warning-color;
@pending-title-color: @text-color;
@pending-description-color: @color-gray-500;
@pending-tail-color: @warning-color;
@steps-pending-background: @white;

@finish-icon-color: @primary-color;
@finish-title-color: @text-color;
@finish-description-color: @color-gray-500;
@finish-tail-color: @primary-color;
@steps-finish-background: @white;

@error-icon-color: @error-color;
@error-title-color: @text-color;
@error-description-color: @color-gray-500;
@error-tail-color: @error-color;
@steps-nav-active-color: @primary-color;
@steps-error-background: @white;

.@{steps-prefix-cls} {
  .reset-component();

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

.@{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;
  }

  &-icon {
    width: @steps-icon-size;
    height: @steps-icon-size;
    margin: @steps-icon-margin;
    font-size: @steps-icon-font-size;
    font-family: @font-family;
    // MSB modified
    line-height: @steps-icon-line-height;
    // MSB modified
    text-align: center;
    border: @steps-width-base @border-style-base @wait-icon-color;
    border-radius: @steps-icon-size;
    transition: background-color 0.3s, border-color 0.3s;

    .@{steps-prefix-cls}-icon {
      position: relative;
      top: @steps-icon-top;
      color: @primary-color;
    }
  }

  &-tail {
    position: absolute;
    // MSB override
    top: 8px;
    // MSB override
    left: 0;
    width: 100%;
    padding: 0 10px;

    &::after {
      display: inline-block;
      width: 100%;
      height: 2px;
      background: @border-color-split;
      // border-radius: 1px;
      transition: background 0.3s;
      content: '';
    }
  }

  &-title {
    position: relative;
    display: inline-block;
    padding-right: 16px;
    color: @text-color;
    // MSB override
    font-size: @caption-1-size;
    // MSB override
    line-height: @steps-title-line-height;

    &::after {
      position: absolute;
      top: (@steps-title-line-height / 2);
      left: 100%;
      display: block;
      width: 9999px;
      height: 1px;
      background: @wait-tail-color;
      content: '';
    }
  }

  &-subtitle {
    display: inline;
    margin-left: 8px;
    color: @text-color-secondary;
    font-weight: normal;
    // MSB override
    font-size: @note-2-size;
    line-height: @note-line-height*1px;
    // MSB override
  }

  &-description {
    color: @text-color-secondary;
    font-size: @note-2-size;
    line-height: @note-line-height*1px;
  }

  .step-item-status(wait);
  .step-item-status(process);
  .step-item-status(finish);
  .step-item-status(error);
  // MSB override start
  .step-item-status(pending);
  // MSB override end

  &-process > &-container > &-icon {
    // background: @process-icon-color;
    border-color: @process-border-color;

    .@{steps-prefix-cls}-icon {
      color: @process-icon-text-color;
    }
  }

  &-process > &-container > &-title {
    font-weight: 500;
  }

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

  &-disabled {
    cursor: not-allowed;
  }

  // status icon
  &-finish,
  &-error,
  &-pending {
    .@{steps-prefix-cls}-icon {
      top: -2px;
      left: -2px;
      font-size: 20px;
    }
  }

  // active
  &-active {
    &.@{steps-prefix-cls}-item {
      &-error,
      &-pending {
        .@{steps-prefix-cls}-item-container {
          .@{steps-prefix-cls}-item-tail {
            &::after {
              background: @process-tail-color;
            }

            &::before {
              position: absolute;
              display: inline-block;
              width: 50%;
              height: 2px;
              transition: background 0.3s;
              content: '';
            }
          }
        }
      }

      &-error {
        .@{steps-prefix-cls}-item-container {
          .@{steps-prefix-cls}-item-tail {
            &::before {
              background: @error-tail-color;
            }
          }
        }
      }

      &-pending {
        .@{steps-prefix-cls}-item-container {
          .@{steps-prefix-cls}-item-tail {
            &::before {
              background: @pending-tail-color;
            }
          }
        }
      }
    }
  }
}

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

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

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

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

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

    // MSB override start
    &.@{steps-prefix-cls}-item-finish {
      & > .@{steps-prefix-cls}-item-container[role='button']:hover {
        .@{steps-prefix-cls}-item {
          &-icon {
            border-color: @primary-color;
          }
        }
      }
    }

    // MSB override end
  }
}

.@{steps-prefix-cls}-horizontal {
  .@{steps-prefix-cls}-item {
    &-tail {
      // MSB override start
      top: 6px;
      // MSB override end
    }

    // MSB override start
    &-process {
      .@{steps-prefix-cls}-item-tail {
        &::before {
          position: absolute;
          display: inline-block;
          width: 50%;
          height: 2px;
          background: @primary-color;
          transition: background 0.3s;
          content: '';
        }
      }
    }
  }
  // MSB override for full process
  &.@{steps-prefix-cls}-full-process {
    .@{steps-prefix-cls}-item {
      &-active {
        &.@{steps-prefix-cls}-item-process {
          .@{steps-prefix-cls}-item-tail {
            &::before {
              width: 100%;
            }
          }
        }
      }
    }
  }
  // MSB override for full process

  &:not(.@{steps-prefix-cls}-label-vertical) {
    .@{steps-prefix-cls}-item {
      padding-left: 16px;
      white-space: nowrap;

      &:first-child {
        padding-left: 0;
      }

      &:last-child .@{steps-prefix-cls}-item-title {
        padding-right: 0;
      }

      &-tail {
        // MSB override
        top: 6px;
        // MSB override
        display: none;
      }

      &-description {
        max-width: @steps-description-max-width;
        white-space: normal;
      }

      &-icon {
        line-height: 16px;
      }
    }
  }
}

.step-item-status(@status) {
  @icon-color: '@{status}-icon-color';
  @title-color: '@{status}-title-color';
  @description-color: '@{status}-description-color';
  @tail-color: '@{status}-tail-color';
  // MSB override
  @steps-status-background: 'steps-@{status}-background';

  // MSB override
  .ant-steps&-@{status}-icon {
    color: @@icon-color;
  }

  &-@{status} &-icon {
    // MSB override
    background-color: @@steps-status-background;
    // MSB override
    border-color: @white;

    & when(@status =process) {
      border-color: @@title-color;
    }

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

      & when (@status =wait) {
        color: @text-color;
      }

      .@{steps-prefix-cls}-icon-dot {
        // MSB override start
        background: @@steps-status-background;

        & when(@status =process) {
          background: @color-primary-100;
        }

        // MSB override end
      }
    }
  }

  &-@{status} > &-container > &-content > &-title {
    color: @@title-color;

    &::after {
      height: 2px;
      background-color: @@tail-color;
    }
  }

  &-@{status} > &-container > &-content > &-description {
    color: @@description-color;
  }

  &-@{status} > &-container > &-tail::after {
    background-color: @@tail-color;
  }
}

// mobile view
.@{steps-prefix-cls}-mobile-container {
  position: relative;
  z-index: 1051;
  overflow: hidden;

  .step-wrapper {
    transition: height 200ms;
  }
}

@import './custom-icon';
@import './small';
@import './vertical';
@import './label-placement';
@import './progress-dot';
@import './nav';
@import './rtl';
@import './progress.less';