@import '../animation/variables.scss';

$name: 'ivue-steps';
$steps: 'ivue-step';

:root {
  // icon
  --#{$name}-icon-size: 20px;

  // horizontal
  --#{$name}-horizontal-header-padding-left: 10px;
  --#{$name}-horizontal-header-margin-left: -10px;

  // vertical
  --#{$name}-vertical-divider-padding: 30px 0 4px 0;
  --#{$name}-vertical-divider-left: 13px;
  --#{$name}-vertical-divider-width: 1px;
  --#{$name}-vertical-header-content-margin-right: 16px;
  --#{$name}-vertical-content-slot-padding-bottom: 12px;

  // color
  --#{$name}-title-color: #666666;
  --#{$name}-border-color: #cccccc;
}

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

  .#{$name}-vertical {
    .#{$name}-item {
      display: block;
    }
  }

  // icon
  &-icon {
    font-size: var(--#{$name}-icon-size);
    top: 2px;
    width: var(--#{$name}-icon-size);
    height: var(--#{$name}-icon-size);
  }

  // 纵向
  &.#{$name}-vertical {
    display: flex;
    flex-flow: column;

    // divider
    .#{$steps}-divider {
      position: absolute;
      left: var(--#{$name}-vertical-divider-left);
      top: 0;
      padding: var(--#{$name}-vertical-divider-padding);
      height: 100%;
      width: var(--#{$name}-vertical-divider-width);

      > i {
        height: 100%;
        width: var(--#{$name}-vertical-divider-width);

        &:after {
          height: 0;
          width: 100%;
        }
      }
    }

    .#{$steps}-status-finish {
      .#{$steps}-divider > i:after {
        height: 100%;
      }
    }

    // header
    .#{$steps}-header {
      float: left;

      &-content {
        margin-right: var(--#{$name}-vertical-header-content-margin-right);
      }
    }

    .#{$steps}-content {
      min-height: 47px;
      overflow: hidden;
      display: block;
    }

    .#{$steps}-title {
      line-height: 26px;
    }

    .#{$steps}-content-slot {
      padding-bottom: var(--#{$name}-vertical-content-slot-padding-bottom);
      padding-left: 0;
    }
  }
}

// 子项
.#{$steps} {
  // 选项
  &-item {
    position: relative;
    display: flex;

    &:last-child {
      .#{$steps}-divider {
        display: none;
      }
    }
  }

  // 最后一项
  &-last {
    flex-basis: auto !important;
    flex-shrink: 0;
    flex-grow: 0;
  }

  // 图标
  &-custom {
    .#{$steps}-header-content {
      width: inherit;
      height: inherit;
      line-height: inherit;
      border-radius: 0;
      border: 0;
      background: 0 0 !important;

      .#{$steps}-icon {
        width: auto;
        min-width: auto;
        color: var(--ivue-primary-color) !important;
      }
    }
  }

  // 下划线
  &-header {
    background-color: var(--ivue-white-color);
  }

  // 下划线
  &-divider {
    position: absolute;
    left: 0;
    top: 13px;
    padding: 0 10px;
    width: 100%;

    > i {
      position: relative;
      display: inline-block;
      width: 100%;
      height: 1px;
      vertical-align: top;
      border-radius: 1px;
      background-color: var(--ivue-border-multiple-color);

      &:after {
        content: '';
        position: absolute;
        top: 0;
        opacity: 0;
        width: 0;
        height: 100%;
        background-color: var(--ivue-border-multiple-color);
        transition: all $ivue-transition-default;
      }
    }
  }

  // 标题
  &-title {
    display: inline-block;
    margin-bottom: 4px;
    padding-right: 10px;
    font-size: var(--ivue-font-base-size);
    font-weight: bold;
    color: var(--#{$name}-title-color);
    background-color: var(--ivue-white-color);
    transition: color 0.4s $ivue-transition-default-timing;
  }

  // 头部，内容
  &-header,
  &-content {
    position: relative;
    display: inline-block;
    vertical-align: top;
  }

  // 内容
  &-content {
    display: inline;
  }

  // 内容
  &-header-content {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 8px;
    text-align: center;
    font-size: var(--ivue-font-base-size);
    border-radius: 50%;
    border: 1px solid var(--#{$name}-border-color);
    width: 26px;
    height: 26px;
    line-height: 24px;
    user-select: none;
    transition: background-color $ivue-transition-default;
    cursor: pointer;

    // icon
    .#{$steps}-icon {
      font-size: var(--ivue-font-default-size);
    }
  }

  // 插槽
  &-content-slot {
    font-size: var(--ivue-font-small-size);
    color: var(--ivue-legend-color);
    transition: color 0.4s $ivue-transition-default-timing;
  }

  // 完成状态
  &-status-finish {
    // 进度标志
    .#{$steps}-header-content {
      border-color: var(--ivue-primary-color);
      background-color: var(--ivue-white-color);

      .#{$steps}-icon {
        color: var(--ivue-primary-color);
      }
    }

    // 下划线
    .#{$steps}-divider > i:after {
      opacity: 1;
      width: 100%;
      background: var(--ivue-primary-color);
    }

    .#{$steps}-title,
    .#{$steps}-content-slot {
      color: var(--ivue-primary-color);
    }
  }

  // 等待状态
  &-status-wait {
    .#{$steps}-header-content {
      background-color: var(--ivue-white-color);

      > .#{$steps}-icon,
      span {
        color: var(--#{$name}-border-color);
      }
    }

    .#{$steps}-title,
    .#{$steps}-content-slot {
      color: var(--ivue-legend-color);
    }
  }

  // 进行中状态
  &-status-process {
    .#{$steps}-header-content {
      border-color: var(--ivue-primary-color);
      background-color: var(--ivue-primary-color);

      > .#{$steps}-icon,
      span {
        color: var(--ivue-white-color);
      }
    }

    .#{$steps}-title,
    .#{$steps}-content-slot {
      color: var(--#{$name}-title-color);
    }
  }

  // 错误状态
  &-status-error {
    .#{$steps}-header-content {
      border-color: var(--ivue-error-color);
      background-color: var(--ivue-error-color);

      > .#{$steps}-icon {
        color: var(--ivue-white-color);
      }
    }

    .#{$steps}-title,
    .#{$steps}-content-slot {
      color: var(--ivue-error-color);
    }
  }

  .#{$steps}-next-error {
    .#{$steps}-divider > i,
    .#{$steps}-divider > i:after {
      background-color: var(--ivue-error-color);
    }
  }

  // 文字方向底部
  &-text-bottom,
  &-text-bottom-center {
    flex-direction: column;

    // 头部
    .#{$steps}-header {
      padding: 0 !important;
      margin: 0 !important;
      background: none;
      text-align: center;

      // 进度框
      &-content {
        position: relative;
      }
    }

    // 内容
    .#{$steps}-content {
      padding-top: 8px;
    }

    // 下划线
    .#{$steps}-divider {
      padding: 0;
    }

    .#{$steps}-divider > i:after {
      left: 0;
    }
  }

  // 文字底部居中
  &-bottom-center {
    // 头部
    .#{$steps}-header {
      background: none;
      text-align: center;

      // 进度框
      &-content {
        position: relative;
        display: inline-flex;
      }
    }

    // 内容
    .#{$steps}-content {
      text-align: center;
    }

    // 下划线
    .#{$steps}-divider {
      left: 50%;
      right: -50%;
    }
  }
}