@import '../../core/constants.scss';

@mixin childrenDelay($selector, $start, $total, $modifier, $diff) {
  $index: 0;
  @while $index <= $total {
    #{$selector + ':nth-child('+($index + $start) + ')'} {
      $delay: ($index + 1) * $modifier;
      $timeDiff: ($delay + $diff) * 1;
      @if ($delay < 10) {
        $delay: #{'0' + $delay};
      }
      @if ($timeDiff < 10) {
        $timeDiff: #{'0' + $timeDiff};
      }
      transition-delay: #{'0.' + $delay + 's'}, #{'0.' + $timeDiff + 's'};
    }
    $index: $index + 1;
  }
}

.#{$root-element} {
  &__content {
    p:nth-child(n) {
      text-align: center;
      font-size: 28px;
      line-height: 36px;
      color: rgba(0, 0, 0, 0.25);

      @media all and (max-width: 600px) {
        font-size: 22px;
        line-height: 28px;
      }
      @media all and (max-width: 400px) {
        font-size: 18px;
        line-height: 24px;
      }
    }

    p:nth-child(n) {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }

    p:nth-child(n) {
      transition: transform 0.45s cubic-bezier(0.15, 0.3, 0.15, 1),
        opacity 0.35s ease-out;
    }

    @include childrenDelay('p', 2, 20, 5, 0);

    &--static {
      p:nth-child(n) {
        transition: none !important;
      }
    }
    &--exit {
      p:nth-child(n) {
        will-change: transform;
        transition: transform 0.225s cubic-bezier(0.25, 0, 0.85, 1),
          opacity 0.15s ease-in 0.1s;
      }
      @include childrenDelay('p', 2, 20, 6, 10);
    }

    &--moveLeft {
      p:nth-child(n) {
        transform: translate3d(-125px, 0, 0);
        opacity: 0;
      }
    }
    &--moveRight {
      p:nth-child(n) {
        transform: translate3d(125px, 0, 0);
        opacity: 0;
      }
    }
  }
}