<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;
      top: var(--timeline-stroke-position-top);
      left: var(--timeline-stroke-position-horizontal);
      height: var(--timeline-stroke-length);
      border-left: var(--timeline-stroke-thickness) solid
        var(--timeline-stroke-color);
    }

    @media (min-width: 64em) {
      &:nth-child(odd) {
        margin: var(--timeline-item-margin-odd);
      }

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

        &:before {
          left: auto;
          right: var(--timeline-stroke-position-horizontal);
        }

        .timeline-item__icon {
          order: 1;
        }

        .timeline-item__content {
          text-align: right;
          margin: 0 1rem 0 0;
        }
      }
    }

    &__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);
      }
    }

    &__content {
      flex: 1 0 0;
      margin: 0 0 0 1rem;
    }

    &__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>
