/* stylelint-disable order/order */

@import './../theme/vars.scss';

$stepsPrefixClass: #{$vender-prefix}-steps;
$stepDescriptionMaxWidth: 100px;

$process-icon-color: var(--primary-color);
$process-title-color: $step-process-title-color;
$process-description-color: $process-title-color;
$process-tail-color: $step-tail-color;

$wait-icon-color: $step-wait-icon-color;
$wait-title-color: $step-wait-title-color;
$wait-description-color: $step-wait-title-color;
$wait-tail-color: $step-tail-color;

$finish-icon-color: var(--primary-color);
$finish-title-color: $step-wait-title-color;
$finish-description-color: $step-wait-title-color;
$finish-tail-color: var(--primary-color);

$error-icon-color: var(--error-color);
$error-title-color: var(--error-color);
$error-description-color: var(--error-color);
$error-tail-color: $step-tail-color;

$icon-colors: (
  process: $process-icon-color,
  wait: $wait-icon-color,
  finish: $finish-icon-color,
  error: $error-icon-color
);
$title-colors: (
  process: $process-title-color,
  wait: $wait-title-color,
  finish: $finish-title-color,
  error: $error-title-color
);
$description-colors: (
  process: $process-description-color,
  wait: $wait-description-color,
  finish: $finish-description-color,
  error: $error-description-color
);
$tail-colors: (
  process: $process-tail-color,
  wait: $wait-tail-color,
  finish: $finish-tail-color,
  error: $error-tail-color
);

@mixin step-item-status($status) {
  // $icon-color: '#{$status}-icon-color'; -> 取值： #{$icon-color}; 方式，获取到的是具体的变量名称

  $icon-color: map-get($icon-colors, $status);
  $title-color: map-get($title-colors, $status);
  $description-color: map-get($description-colors, $status);
  $tail-color: map-get($tail-colors, $status);

  &-#{$status} &-icon {
    background-color: white;
    border-color: $icon-color;

    > .#{$stepsPrefixClass}-icon {
      color: $icon-color;

      .#{$stepsPrefixClass}-icon-dot {
        background: $icon-color;
      }
    }
  }

  &-#{$status} &-title {
    color: $title-color;

    &::after {
      background-color: $tail-color;
    }
  }

  &-#{$status} &-description {
    color: $description-color;
  }

  &-#{$status} &-tail::after {
    background-color: $tail-color;
  }
}

.#{$stepsPrefixClass} {
  display: flex;
  width: 100%;
  font-size: 0;
  line-height: 1.5;

  &,
  * {
    box-sizing: border-box;
  }
}

.#{$stepsPrefixClass}-item {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  flex: 1;

  &:last-child {
    flex: none;
  }

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

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

  &-icon {
    width: 26px;
    height: 26px;
    margin-right: 8px;
    font-size: 14px;
    line-height: 26px;
    text-align: center;
    border: 1px solid $wait-icon-color;
    border-radius: 26px;
    transition: background-color 0.3s, border-color 0.3s;

    > .#{$stepsPrefixClass}-icon {
      position: relative;
      top: -1px;
      line-height: 1;
      color: var(--primary-color);

      &.rcicon {
        position: relative;
        top: -2px;
        font-size: 12px;
      }
    }
  }

  &-tail {
    position: absolute;
    top: 12px;
    left: 0;
    width: 100%;
    padding: 0 10px;

    &::after {
      display: inline-block;
      width: 100%;
      height: 1px;
      background: $wait-tail-color;
      border-radius: 1px;
      content: '';
      transition: background 0.3s;
    }
  }

  &-content {
    margin-top: 3px;
  }

  &-title {
    position: relative;
    display: inline-block;
    padding-right: 10px;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: bold;
    color: #666;

    &::after {
      position: absolute;
      top: 0.55em;
      left: 100%;
      display: block;
      width: 1000px;
      height: 1px;
      background: $wait-tail-color;
      content: '';
    }
  }

  &-description {
    font-size: 12px;
    color: #999;
  }

  @include step-item-status(wait);
  @include step-item-status(process);

  &-process &-icon {
    background: $process-icon-color;

    > .#{$stepsPrefixClass}-icon {
      color: white;
    }
  }

  @include step-item-status(finish);
  @include step-item-status(error);

  &.#{$stepsPrefixClass}-next-error .#{$stepsPrefixClass}-item-title::after {
    background: $error-icon-color;
  }
}

.#{$stepsPrefixClass}-horizontal:not(.#{$stepsPrefixClass}-label-vertical) {
  .#{$stepsPrefixClass}-item {
    margin-right: 10px;

    &:last-child {
      margin-right: 0;
    }

    &-tail {
      display: none;
    }

    &-description {
      max-width: $stepDescriptionMaxWidth;
    }
  }
}

.#{$stepsPrefixClass}-vertical {
  display: block;

  .#{$stepsPrefixClass}-item {
    display: block;
    overflow: visible;

    &-icon {
      float: left;

      &-inner {
        margin-right: 16px;
      }
    }

    &-content {
      display: block;
      min-height: 48px;
      overflow: hidden;
    }

    &-title {
      line-height: 26px;

      &::after {
        display: none;
      }
    }

    &-description {
      padding-bottom: 12px;
    }

    &-tail {
      position: absolute;
      top: 0;
      left: 13px;
      width: 1px;
      height: 100%;
      padding: 30px 0 4px;

      &::after {
        width: 1px;
        height: 100%;
      }
    }
  }

  &.#{$stepsPrefixClass}-small {
    .#{$stepsPrefixClass}-item-tail {
      position: absolute;
      top: 0;
      left: 9px;
      padding: 22px 0 4px;
    }

    .#{$stepsPrefixClass}-item-title {
      line-height: 18px;
    }
  }
}

.#{$stepsPrefixClass}-item-custom {
  .#{$stepsPrefixClass}-item-icon {
    width: auto;
    height: auto;
    background: none;
    border: 0;

    > .#{$stepsPrefixClass}-icon {
      top: 1px;
      width: 20px;
      height: 20px;
      font-size: 20px;
    }
  }

  &.#{$stepsPrefixClass}-item-process {
    .#{$stepsPrefixClass}-item-icon > .#{$stepsPrefixClass}-icon {
      color: $process-icon-color;
    }
  }
}

.#{$stepsPrefixClass}-small {
  .#{$stepsPrefixClass}-item-icon {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    border-radius: 18px;

    > .#{$stepsPrefixClass}-icon {
      top: -1px;
      font-size: 12px;
      transform: scale(0.75);
    }

    > *[class*='icon'] {
      font-size: 12px;
    }
  }

  .#{$stepsPrefixClass}-item-content {
    margin-top: 0;
  }

  .#{$stepsPrefixClass}-item-title {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: bold;
    color: #666;
  }

  .#{$stepsPrefixClass}-item-description {
    font-size: 12px;
    color: #999;
  }

  .#{$stepsPrefixClass}-item-tail {
    top: 8px;
    padding: 0 8px;

    &::after {
      width: 100%;
      height: 1px;
      border-radius: 1px;
    }
  }

  .#{$stepsPrefixClass}-item-custom .#{$stepsPrefixClass}-item-icon {
    width: inherit;
    height: inherit;
    line-height: inherit;
    background: none;
    border: 0;
    border-radius: 0;

    > .#{$stepsPrefixClass}-icon {
      top: -2.5px;
      font-size: 20px;
      transform: none;
    }
  }
}

.#{$stepsPrefixClass}-label-vertical {
  .#{$stepsPrefixClass}-item {
    overflow: visible;

    &-tail {
      padding: 0 24px;
      margin-left: 48px;
    }

    &-content {
      display: block;
      width: $stepDescriptionMaxWidth;
      margin-top: 8px;
      text-align: center;
    }

    &-icon {
      display: inline-block;
      margin-left: 36px;
    }

    &-title {
      padding-right: 0;

      &::after {
        display: none;
      }
    }

    &-description {
      text-align: left;
    }
  }
}

.#{$stepsPrefixClass}-dot {
  .#{$stepsPrefixClass}-item {
    &-tail {
      top: 1px;
      width: 100%;
      padding: 0;
      margin: 0 0 0 $stepDescriptionMaxWidth / 2;

      &::after {
        height: 3px;
      }
    }

    &-icon {
      width: 5px;
      height: 5px;
      padding-right: 0;
      margin-left: 48px;
      line-height: 5px;
      border: 0;

      .#{$stepsPrefixClass}-icon-dot {
        float: left;
        width: 100%;
        height: 100%;
        border-radius: 2.5px;
      }
    }

    &-process &-icon {
      top: -1px;
      width: 7px;
      height: 7px;
      line-height: 7px;

      .#{$stepsPrefixClass}-icon-dot {
        border-radius: 3.5px;
      }
    }
  }
}

.hidden {
  display: none;
}