$iconWidth: 36px;

.vuiTimelineContainer {
  margin-left: $iconWidth;
  border-left: 1px solid transparent;
}

.vuiTimelineContainer--spacing-none {
  padding-bottom: 0;
}

.vuiTimelineContainer--spacing-s {
  padding-bottom: $sizeS;
}

.vuiTimelineContainer--spacing-m {
  padding-bottom: $sizeM;
}

.vuiTimelineContainer--spacing-l {
  padding-bottom: $sizeL;
}

.vuiTimelineContainer--bordered {
  border-left: 2px solid var(--vui-color-border-light);
}

.vuiTimelineItem {
  margin-left: -$iconWidth * 0.5;
}

.vuiTimelineItem__icon {
  border-radius: 100%;
  padding: $sizeXs;
  background-color: var(--vui-color-empty-shade);
}

.vuiTimelineItem__content {
  padding: $sizeXxs $sizeM $sizeS;
  width: 100%;
}