@include export-module('timeline-theme') {
  .e-timeline {
    .e-dot {
      @if ($skin-name == 'fluent2') {
        background-color: $content-bg-color;
      }
      @else {
        background-color: $timeline-dot-border-color;
      }
      border-color: $timeline-dot-border-color;
      color: $timeline-dot-color;
      outline-color: $timeline-dot-background-color;
    }

    &.e-outline .e-dot {
      background-color: $timeline-dot-background-color;
    }

    .e-timeline-item.e-connector::after {
      border-color: $timeline-dot-border-color;
    }

    .e-content {
      color: $timeline-content-font-color;
    }

    .e-opposite-content {
      color: $timeline-opposite-content-font-color;
    }

    .e-item-disabled .e-content,
    .e-item-disabled .e-opposite-content {
      color: $timeline-item-disabled-color;
    }

    @if ($skin-name == 'fluent2') {
      .e-disabled .e-content,
      .e-disabled .e-opposite-content {
        color: $timeline-item-disabled-color;
      }
    }
  }
}