.timeline-nav {
  display: flex;
  justify-content: center;

  @include sm {
    display: none;
  }

  svg {
    overflow: visible;
  }

  path {
    fill: none;
    stroke: $white;
  }

  g {
    fill: $white;
    cursor: pointer;

    .back {
      r: 8;
      fill: $white;
      transform-origin: 0 0;
      transition: fill 300ms ease-out 200ms, r 300ms ease-out 200ms;
    }

    .middle {
      transition: fill 300ms ease-out 200ms;
    }

    .front {
      transition: fill 300ms ease-out 200ms;
    }

    text {
      transition: all 300ms ease-out;
    }

    &:hover,
    &.js-active {
      .back {
        fill: $primary-color;
        r: 16;
      }

      .middle {
        fill: rgba($color: $white, $alpha: 0.3);
      }

      .front {
        fill: $white;
      }
    }

    &.js-active {
      text {
        font-size: 20px;
        font-weight: 700;
      }
    }
  }

  text {
    size: 16px;
  }
}