<template>
  <li class="timeline-item">
    <div class="timeline-item__icon">
      <slot name="icon"></slot>
    </div>
    <section class="timeline-item__content">
      <h2 class="timeline-item__headline">
        <slot name="headline"></slot>
      </h2>

      <div class="timeline-item__text">
        <slot name="content"></slot>
      </div>
    </section>
  </li>
</template>

<style lang="scss">
.timeline {
  &-item {
    display: flex;
    flex-flow: row nowrap;

    margin: var(--timeline-item-margin);

    position: relative;

    &:not(:last-child):before {
      content: '';
      position: absolute;
      inset: var(--timeline-stroke-position-odd);
      height: var(--timeline-stroke-length);
      border-left: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
    }

    &:nth-child(odd) {
      margin: var(--timeline-item-margin-odd);
    }

    &:nth-child(even) {
      margin: var(--timeline-item-margin-even);

      &:before {
        inset: var(--timeline-stroke-position-even);
      }
    }

    &__icon {
      flex: 0 0 var(--timeline-circle-size);
      display: flex;
      align-items: center;
      justify-content: center;

      width: var(--timeline-circle-size);
      height: var(--timeline-circle-size);

      background-color: var(--timeline-circle-background);

      margin: 0;
      border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
      border-radius: 100%;
      padding: var(--timeline-circle-padding);

      svg {
        fill: var(--timeline-icon-color);
        flex: 1 1 auto;
      }
    }

    &:nth-child(even) &__icon {
      order: var(--timeline-item-flex-order);
    }

    &__content {
      flex: 1 0 0;
      margin: 0;
      padding: var(--timeline-item-content-padding-odd);
    }

    &:nth-child(even) &__content {
      text-align: var(--timeline-item-text-align-even);
      padding: var(--timeline-item-content-padding-even);
    }

    &__headline {
      font-size: calc(var(--timeline-circle-size) / 2);
      line-height: calc(var(--timeline-circle-size) / 2);
      margin: calc(var(--timeline-circle-size) / 4) 0;
    }

    &__text {
      line-height: 1.5;
    }
  }
}
</style>
