$dotSize: 20px;

.#{$CLASS_PREFIX}-timeline {
  display: flex;
  flex-direction: column;
}

.#{$CLASS_PREFIX}-timeline-item {
  display: flex;
  &:last-child {
    .#{$CLASS_PREFIX}-timeline__line {
      display: none;
    }
  }
}

.#{$CLASS_PREFIX}-timeline-block {
  display: flex;
  span {
    color: #595959;
  }
}

.#{$CLASS_PREFIX}-timeline__chain {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-right: 14px;
}

.#{$CLASS_PREFIX}-timeline__dot {
  width: $dotSize;
  height: $dotSize - 2px;
  display: flex;
  justify-content: center;
  padding-top: 2px;
}

.#{$CLASS_PREFIX}-timeline__circle {
  width: calc(#{$dotSize} * 0.4);
  height: calc(#{$dotSize} * 0.4);
  border: 2px solid colorUsage("blue", "main");
  border-radius: 999px;
}
.#{$CLASS_PREFIX}-timeline__icon {
  svg {
    color: colorUsage("blue", "main");
  }
}

.#{$CLASS_PREFIX}-timeline__line {
  min-height: 20px;
  width: 2px;
  margin: 10px auto;
  background: #e8e8e8;
}

.#{$CLASS_PREFIX}-timeline--alternate {
  .#{$CLASS_PREFIX}-timeline-block {
    width: 50%;
  }

  .#{$CLASS_PREFIX}-timeline-item {
    &:nth-child(odd) {
      justify-content: flex-end;
      .#{$CLASS_PREFIX}-timeline-block {
        margin-right: calc(#{$dotSize} / 2);
      }
    }
    &:nth-child(even) {
      .#{$CLASS_PREFIX}-timeline-block {
        justify-content: flex-end;
        margin-left: calc(#{$dotSize} / 2);
        span {
          text-align: right;
        }
      }
      .#{$CLASS_PREFIX}-timeline__chain {
        order: 2;
        margin-right: 0;
        margin-left: 14px;
      }
    }
  }
}