@include export-module('timeline-bigger') {
  .e-bigger.e-timeline,
  .e-bigger .e-timeline {
    [class ^= 'e-dot ']::before {
      min-width: $timeline-bigger-dot-icon-size;
      min-height: $timeline-bigger-dot-icon-size;
      font-size: $timeline-bigger-dot-font-size;
    }

    .e-dot-item {
      flex: 0 1 calc(var(--dot-size) * 4);
    }

    &.e-vertical {
      &.e-align-before.e-opposite-content-only .e-connector::after,
      &.e-align-after.e-rtl.e-opposite-content-only .e-connector::after,
      &.e-align-before.e-rtl.e-content-only .e-connector::after,
      &.e-align-after.e-content-only .e-connector::after {
        left: calc((var(--dot-size) * 4) / 2 - var(--connector-size));
      }
      &.e-align-before.e-content-only .e-connector::after,
      &.e-align-before.e-rtl.e-opposite-content-only .e-connector::after,
      &.e-align-after.e-opposite-content-only .e-connector::after,
      &.e-align-after.e-rtl.e-content-only .e-connector::after {
        right: calc((var(--dot-size) * 4) / 2 - var(--connector-size));
      }
    }

    .e-dot {
      min-width: $timeline-bigger-dot-size;
      min-height: $timeline-bigger-dot-size;
    }

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

    .e-content {
      font-size: $timeline-bigger-content-font-size;
      @if ($skin-name == 'fluent2' or $skin-name == 'bootstrap5.3') {
        font-weight: 600;
      }
      @else {
        font-weight: 500;
      }
    }
  }
}