.timeline-list {
  --col-left: minmax(0, 1fr);
  --col-middle: 40px;
  --col-right: minmax(0, 2fr);
  --connector-width: 2px;
  --item-min-space-after: 24px;

  @include list-unstyled();
  margin: 0;

  &__item {
    display: grid;
    column-gap: $grid-gap;
    row-gap: 0;
    grid-template-columns: var(--col-left) var(--col-middle) var(--col-right);

    &:last-child {
      .timeline-list {
        &__connector {
          height: 0;
        }

        &__icon-wrapper,
        &__text {
          padding-bottom: 0;
        }
      }
    }
  }

  &__label-wrapper {
    grid-column: 1/2;
  }

  &__label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    height: var(--col-middle);
  }

  &__connector {
    position: absolute;
    top: 0;
    left: calc(50% - (var(--connector-width) / 2));
    height: 100%;
    width: var(--connector-width);
  }

  &__icon-wrapper {
    grid-column: 2/3;
    position: relative;
    padding-bottom: var(--item-min-space-after);
  }

  &__icon-bg {
    position: relative;
    z-index: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--col-middle);
    @include mat.elevation(8, black, 0.6);
  }

  &__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-bottom: var(--item-min-space-after);
  }
}