$list-item-height: var(--wds-timeline-title-font-line-height, var(--wds-font-line-height-body-small, 18px));
$indicator-size: 7px;

.timeline-item {
  &__event {
    display: flex;
  }

  &__prefix {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: var(--wds-space-300, 18px);
    color: var(--wds-color-text-standard-secondary, var(--wds-color-black-200, var(--wsr-color-D30, #595d70)));
  }

  &__event:not(:last-child) &__line--line-filled {
    width: 1px;
    flex: 1;
    background-color: var(
      --wds-color-text-standard-secondary,
      var(--wds-color-black-200, var(--wsr-color-D30, #595d70))
    );
  }

  &__event:not(:last-child) &__line--line-dashed {
    width: 1px;
    flex: 1;
    background-color: transparent;
    border-left: 1px dashed
      var(--wds-color-text-standard-secondary, var(--wds-color-black-200, var(--wsr-color-D30, #595d70)));
  }

  &__event--skin-standard:not(:last-child) &__line--line-filled {
    background-color: var(--wds-color-fill-standard-primary, var(--wds-color-blue-100, var(--wsr-color-B10, #116dff)));
  }

  &__event--skin-standard:not(:last-child) &__line--line-dashed {
    border-left: 1px dashed
      var(--wds-color-fill-standard-primary, var(--wds-color-blue-100, var(--wsr-color-B10, #116dff)));
  }

  &__event--skin-neutral:not(:last-child) &__line--line-filled {
    background-color: var(--wds-color-black-500, var(--wsr-color-D50, #acafc4));
  }

  &__event--skin-neutral:not(:last-child) &__line--line-dashed {
    border-left: 1px dashed var(--wds-color-black-500, var(--wsr-color-D50, #acafc4));
  }

  &__default-indicator {
    width: $indicator-size;
    height: $indicator-size;
    border-radius: 50%;
    margin: calc(($list-item-height - $indicator-size) / 2);
  }

  &__event--skin-dark &__default-indicator {
    background: var(--wds-color-text-standard-secondary, var(--wds-color-black-200, var(--wsr-color-D30, #595d70)));
  }

  &__event--skin-standard &__default-indicator {
    background: var(--wds-color-fill-standard-primary, var(--wds-color-blue-100, var(--wsr-color-B10, #116dff)));
  }

  &__event--skin-neutral &__default-indicator {
    background: var(--wds-color-black-500, var(--wsr-color-D50, #acafc4));
  }

  &__label {
    width: 100%;
    margin-right: var(--wds-space-300, 18px);
    line-height: var(--wds-internal-timeline-item-list-item-height, #{$list-item-height});
  }

  &__label--with-suffix {
    width: 75%;
  }

  &__event:not(:last-child) &__label {
    margin-bottom: var(--wds-internal-timeline-item-margin-bottom, var(--wds-space-500, 30px));
  }

  &__label-text {
    margin-right: var(--wds-space-100, 6px);
  }

  &__suffix {
    width: 25%;
    text-align: right;
    vertical-align: top;
  }

  &__label-action {
    display: inline-block;
  }
}