@import './variables.scss';
@import '~@alifd/next/lib/core/index-noreset'; // next core style
@import '~@alifd/next/lib/timeline/scss/variable';
@import '~@alifd/next/lib/timeline/scss/mixin';

// active状态
.#{$css-prefix}timeline-item-icon {
  background: transparent;
}

.#{$css-prefix}timeline-item {
  .#{$css-prefix}timeline-item-content {
    .#{$css-prefix}timeline-item-title {
      // height: $s-6;
      line-height: $s-6;
      margin-top: 0;
    }

    .#{$css-prefix}timeline-item-body {
      line-height: 18px;
      margin-top: $s-1;
    }

    .#{$css-prefix}timeline-item-time {
      line-height: 16px;
      margin-top: $s-1;
      margin-bottom: $s-5;
    }
  }
  .#{$css-prefix}timeline-item-timeline
    .#{$css-prefix}timeline-item-node
    .#{$css-prefix}timeline-item-icon {
    line-height: 16px;
  }
}

.#{$css-prefix}timeline-item-process,
.#{$css-prefix}timeline-item-success {
  .#{$css-prefix}timeline-item-content {
    .#{$css-prefix}timeline-item-title {
      color: $b-design-timeline-active-title-color;
      font-weight: bold;
    }
  }
}

// error状态
.#{$css-prefix}timeline-item-error {
  .#{$css-prefix}timeline-item-content {
    .#{$css-prefix}timeline-item-title {
      color: $b-design-timeline-error-title-color;
      font-weight: bold;
    }
  }
}

// disabled状态
.#{$css-prefix}timeline-item-disabled {
  .#{$css-prefix}timeline-item-content {
    .#{$css-prefix}timeline-item-title,
    .#{$css-prefix}timeline-item-body,
    .#{$css-prefix}timeline-item-time {
      font-weight: normal;
      color: $b-design-timeline-disabled-color;
    }

    .#{$css-prefix}timeline-item-tail i {
      background: $b-design-timeline-disabled-line-color;
    }

    .#{$css-prefix}timeline-item-dot {
      border: 1px solid $b-design-timeline-disabled-color;
    }

    .#{$css-prefix}timeline-item-icon {
      background: $b-design-timeline-disabled-color;
    }
  }
}

// dot调整
.#{$css-prefix}timeline-item-done .#{$css-prefix}timeline-item-dot {
  background-color: #fff;
  border: 1px solid $b-design-timeline-dot-done-color;
}

// 左侧有内容
.#{$css-prefix}timeline-item-content-onleft,
.#{$css-prefix}timeline-item-onleft {
  .#{$css-prefix}timeline-item-left-content {
    width: $b-design-timeline-left-margin-l;
  }

  .#{$css-prefix}timeline-item-timeline {
    margin-left: $b-design-timeline-left-margin-l;
  }

  .#{$css-prefix}timeline-item-content {
    width: $b-design-timeline-left-margin-l;
    margin-left: calc(
      #{$b-design-timeline-left-leftmargein} + #{$b-design-timeline-left-margin-l}
    );

    .#{$css-prefix}timeline-item-body {
      margin-top: 0;
      color: $b-design-timeline-left-content-color;
    }
  }
}

.#{$css-prefix}timeline-item-content-onleft {
  .#{$css-prefix}timeline-item-content {
    margin-left: 0;
    padding: 0 $b-design-timeline-padding;
  }
}

.#{$css-prefix}timeline-item-process {
  .#{$css-prefix}timeline-item-content {
    .#{$css-prefix}timeline-item-body {
      color: $b-design-timeline-left-active-color;
    }
  }
}

.#{$css-prefix}timeline-item {
  &.#{$css-prefix}timeline-item-has-left-content {
    .#{$css-prefix}timeline-item-left-content {
      margin-top: 2px;
    }
  }
}

.#{$css-prefix}timeline-item {
  .#{$css-prefix}timeline-item-timeline {
    .#{$css-prefix}timeline-item-icon {
      line-height: $s-3;
    }
  }
}