@use '../../scss/spacers' as spacers;
@use '../../scss/palette' as palette;
@use '../../scss/screen-reader' as *;

@mixin keyframes($name) {
  @keyframes #{$name} {
    @content;
  }
}

@mixin animate($name, $animation, $duration, $times) {
  animation: $animation $duration $times;
  animation-name: $name;
}

@mixin loader-dot-scale($name, $scale-start, $scale-end) {
  @include animate($name, scale, 0.6s, infinite);

  @include keyframes($name) {
    0% {
      transform: scale($scale-start);
    }

    100% {
      transform: scale($scale-end);
    }
  }
}

@mixin loader-dot-translate($name, $distance) {
  @include animate($name, translate, 0.6s, infinite);

  @include keyframes($name) {
    0% {
      transform: translate(0, 0);
    }

    100% {
      transform: translate($distance, 0);
    }
  }
}

.loader-wrapper {
  &--center {
    text-align: center;
  }

  &--inline {
    align-self: center;
    padding-left: spacers.getSpacer(2xs);
  }

  &--overlay {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &--overlay-screen {
    background: palette.$transparent-grey;
    position: fixed;
    inset: 0;
  }

  &--overlay-parent {
    position: absolute;
    top: 0;
    left: 0;
    background: palette.$transparent-grey;
    height: 100%;
    width: 100%;
  }
}

.loader {
  display: inline-block;
  position: relative;
  width: 8 * 5px;
  height: 8px;

  &--small {
    width: 12 * 5px;
    height: 12px;
  }

  &--medium {
    width: 18 * 5px;
    height: 18px;
  }

  &--large {
    width: 24 * 5px;
    height: 24px;
  }

  &__hidden-text {
    @include sr-only;
  }

  &__dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: palette.$blueberry500;
    border-radius: 50%;

    // Sets a form of easing animation curve
    animation-timing-function: cubic-bezier(0, 1, 1, 0);

    &--small {
      width: 12px;
      height: 12px;
    }

    &--medium {
      width: 18px;
      height: 18px;
    }

    &--large {
      width: 24px;
      height: 24px;
    }

    &--banana {
      background-color: palette.$banana500;
    }

    &--cherry {
      background-color: palette.$cherry500;
    }

    &--kiwi {
      background-color: palette.$kiwi500;
    }

    &--neutral {
      background-color: palette.$neutral500;
    }

    &--plum {
      background-color: palette.$plum500;
    }

    &--black {
      background-color: palette.$black;
    }

    &--white {
      background-color: palette.$white;
    }

    // Scales up the first dot
    &:nth-child(1) {
      @include loader-dot-scale(scale-regular, 0, 1);
    }

    // Translates the dots rightwards depending on size
    &:nth-child(2),
    &:nth-child(3) {
      @include loader-dot-translate(translate-tiny, 16px);
    }

    &:nth-child(3) {
      left: 16px;
    }

    &--small:nth-child(2),
    &--small:nth-child(3) {
      @include loader-dot-translate(translate-small, 24px);
    }

    &--medium:nth-child(2),
    &--medium:nth-child(3) {
      @include loader-dot-translate(translate-medium, 36px);
    }

    &--large:nth-child(2),
    &--large:nth-child(3) {
      @include loader-dot-translate(translate-large, 48px);
    }

    &--small:nth-child(3) {
      left: 24px;
    }

    &--medium:nth-child(3) {
      left: 36px;
    }

    &--large:nth-child(3) {
      left: 48px;
    }

    // Scales down the last dot
    &:nth-child(4) {
      left: 32px;

      @include loader-dot-scale(scale-reverse, 1, 0);
    }

    &--small:nth-child(4) {
      left: 48px;
    }

    &--medium:nth-child(4) {
      left: 72px;
    }

    &--large:nth-child(4) {
      left: 96px;
    }
  }
}