$sm-width: 450px;
$xs-width: 300px;

.timeline-nav-mobile {
  width: 100%;
  min-height: 110px;
  position: relative;
  flex-direction: row;
  align-items: flex-start;
  overflow: hidden;
  margin: 0 auto;
  display: none;

  @include sm {
    margin-top: -25px;
    display: flex;
  }

  &__base-line {
    width: 100%;
    position: absolute;
    height: 1px;
    border-bottom: 1px solid $secondary-color;
    top: 71px;
    transition: 0.3s all;

    &.timeline-nav-mobile--first {
      left: calc((100vw - 450px) / 2);

      @include xs {
        left: calc((100vw - 300px) / 2);
      }
    }

    &.timeline-nav-mobile--last {
      left: calc((100vw - 450px) / 2 * -1);

      @include xs {
        left: calc((100vw - 300px) / 2 * -1);
      }
    }
  }

  &__container {
    margin: 0 auto;
    position: relative;
    display: flex;
    transition: transform 300ms ease-out;
  }

  &__dot-container {
    width: $sm-width;
    position: relative;
    height: 60px;
    opacity: 0;
    transition: 0.3s all;

    @include xs {
      width: $xs-width;
    }

    &.timeline-nav-mobile--current {
      left: calc((100vw - 450px) / 2);
      opacity: 1;
      z-index: 2;

      @include xs {
        left: calc((100vw - 300px) / 2);
      }
    }
    &.timeline-nav-mobile--prev {
      opacity: 1;
      left: calc( (100vw - 12px) / 2);
    }
    &.timeline-nav-mobile--next {
      opacity: 1;
      left: calc((100vw - 450px) / 2 - 219px);

      @include xs {
        left: calc((100vw - 300px) / 2 - 144px);
      }
    }
  }

  &__line {
    width: 100%;
    height: 1px;
    background-color: $secondary-color;
    position: absolute;
    top: 71px;
    transition: 0.3s background-color, 0.3s width 0.3s;

    .timeline-nav-mobile--current & {
      width: 100%;
      background-color: $white;
    }
  }

  &__dot {
    width: 32px;
    height: 32px;
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    top: 56px;
    transition: all 0.3s;

    span {
      pointer-events: none;
    }
  }

  &__dot-back {
    width: 16px;
    height: 16px;
    background-color: $white;
    position: absolute;
    z-index: 0;
    border-radius: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s;

    .timeline-nav-mobile--current & {
      width: 32px;
      height: 32px;
      background-color: $primary-color;
    }
  }

  &__dot-middle {
    width: 24px;
    height: 24px;
    background-color: rgba($color: $white, $alpha: 0.3);
    position: absolute;
    z-index: 1;
    border-radius: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0.3s;

    .timeline-nav-mobile--current & {
      opacity: 1;
    }
  }

  &__dot-front {
    width: 8px;
    height: 8px;
    background-color: $white;
    position: absolute;
    z-index: 2;
    border-radius: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0.3s;

    .timeline-nav-mobile--current & {
      opacity: 1;
    }
  }

  &__text {
    font-size: 16px;
    color: $white;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 81px;
    transition: 0.3s all;
    white-space: nowrap;

    .timeline-nav-mobile--current & {
      font-size: 21px;
      top: 87px;
      font-weight: 700;
    }
  }
}