.horizontal-timeline {
  display: table;
  table-layout: fixed;
  width: 100%;

  & &__line--line-dashed {
    margin-right: 2px;
    height: 0;
    background-color: transparent;
    border-bottom: 1px dashed var(--wds-color-black-500, var(--wsr-color-D50, #acafc4));
  }

  &--skin-dark &__line--skin-dark#{&}__line--line-dashed {
    background-color: var(--wds-color-black-100, var(--wsr-color-D20, #333853));
    border-color: transparent;
    margin: 0;
  }

  &--skin-dark &__line--line-filled {
    background-color: var(--wds-color-black-100, var(--wsr-color-D20, #333853));
  }

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

  &__column {
    display: table-cell;
    vertical-align: baseline;
  }

  &__column:first-child &__line:first-child,
  &__column:last-child &__line:last-child {
    background-color: transparent;
    border-color: transparent;
  }

  &__item {
    display: flex;
    flex-direction: column;
  }

  &__line-icon-line {
    display: flex;
    align-items: center;
  }

  &__icon {
    display: flex;
    box-sizing: border-box;
    height: 24px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  &__line {
    height: 1px;
    flex-grow: 1;
  }

  &__label {
    box-sizing: border-box;
    padding-top: 3px;
    padding-bottom: var(--wds-space-100, 6px);
    display: flex;
  }

  &__label--align-label-center {
    padding-left: var(--wds-space-100, 6px);
    padding-right: var(--wds-space-100, 6px);
    justify-content: center;
  }

  &__label--align-label-start {
    justify-content: flex-start;
    padding-left: 0;
    padding-right: var(--wds-space-100, 6px);
    transform: translateX(calc(100% / 2));
  }

  &__column:last-child &__label--align-label-start {
    margin-left: 0;
    justify-content: flex-end;
    padding-right: 0;
    padding-left: var(--wds-space-100, 6px);
    transform: translateX(calc(100% / -2));
  }
}