@use 'sass:math';

$animationDuration: 0.8s;
// Percent duration of fade transition between characters
$fadeDuration: 0.22;

@function pDown($p) {
  @return percentage($p - math.div($fadeDuration, 2));
}

@function pUp($p) {
  @return percentage($p + math.div($fadeDuration, 2));
}
:global {
  .loader {
    width: 60px;
    height: 60px;
    path {
      fill: currentColor;
      animation-duration: $animationDuration;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    .upSmallE,
    .bigE,
    .downSmallV {
      opacity: 0;
    }

    .downSmallE,
    .downSmallV {
      animation-direction: reverse;
    }

    &:not(.stop) {
      .upSmallV,
      .downSmallV {
        animation-name: smallUpV;
      }
      .upSmallE,
      .downSmallE {
        animation-name: smallUpE;
      }

      .bigV {
        animation-name: bigV;
      }

      .bigE {
        animation-name: bigE;
      }
    }

    @keyframes :global(smallUpV) {
      #{pUp(0)} {
        opacity: 1;
      }
      #{pDown(0.66)} {
        opacity: 1;
      }
      #{pUp(0.66)} {
        opacity: 0;
      }
      #{pDown(1)} {
        opacity: 0;
      }
    }
    @keyframes :global(smallUpE) {
      #{pUp(0)} {
        opacity: 0;
      }
      #{pDown(0.66)} {
        opacity: 0;
      }
      #{pUp(0.66)} {
        opacity: 1;
      }
      #{pDown(1)} {
        opacity: 1;
      }
    }
    @keyframes :global(bigE) {
      #{pDown(0.33)} {
        opacity: 0;
      }
      #{pUp(0.33)} {
        opacity: 1;
      }
      #{pDown(0.66)} {
        opacity: 1;
      }
      #{pUp(0.66)} {
        opacity: 0;
      }
    }
    @keyframes :global(bigV) {
      #{pDown(0.33)} {
        opacity: 1;
      }
      #{pUp(0.33)} {
        opacity: 0;
      }
      #{pDown(0.66)} {
        opacity: 0;
      }
      #{pUp(0.66)} {
        opacity: 1;
      }
    }
  }
}