div#ph-wave {
  .dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #999;
    animation: wave 1.3s linear infinite;

    &:nth-child(2) {
      animation-delay: -1.1s;
    }

    &:nth-child(3) {
      animation-delay: -0.9s;
    }
  }
}

@keyframes wave {
  0%,
  60%,
  100% {
    transform: initial;
  }

  30% {
    transform: translateY(-8px);
  }
}

$second-dot: 16px;
$last-dot: 32px;

.ph-loading-image {
  text-align: center;

  .ph-loading-image-dots {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    -webkit-animation: typing 1s linear infinite normal;
    -moz-animation: typing 1s linear infinite normal;
    animation: typing 1s linear infinite normal;
    position: relative;
    display: inline-block;
    margin-left: -$last-dot;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: $second-dot 0px 0px 0px rgba(255, 255, 255, 0.2),
      $last-dot 0px 0px 0px rgba(255, 255, 255, 0.2);
  }

  &.light {
    .ph-loading-image-dots {
      background-color: rgba(0, 0, 0, 1);
      box-shadow: $second-dot 0px 0px 0px rgba(0, 0, 0, 0.2),
        $last-dot 0px 0px 0px rgba(0, 0, 0, 0.2);
      -webkit-animation: typing-light 1s linear infinite normal;
      -moz-animation: typing-light 1s linear infinite normal;
      animation: typing-light 1s linear infinite normal;
    }
  }
}

@-webkit-keyframes typing {
  0% {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: $second-dot 0px 0px 0px rgba(255, 255, 255, 0.2),
      $last-dot 0px 0px 0px rgba(255, 255, 255, 0.2);
  }
  45% {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: $second-dot 0px 0px 0px rgba(255, 255, 255, 1),
      $last-dot 0px 0px 0px rgba(255, 255, 255, 0.2);
  }
  75% {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: $second-dot 0px 0px 0px rgba(255, 255, 255, 0.2),
      $last-dot 0px 0px 0px rgba(255, 255, 255, 1);
  }
}

@-moz-keyframes typing {
  0% {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: $second-dot 0px 0px 0px rgba(255, 255, 255, 0.2),
      $last-dot 0px 0px 0px rgba(255, 255, 255, 0.2);
  }
  45% {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: $second-dot 0px 0px 0px rgba(255, 255, 255, 1),
      $last-dot 0px 0px 0px rgba(255, 255, 255, 0.2);
  }
  75% {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: $second-dot 0px 0px 0px rgba(255, 255, 255, 0.2),
      $last-dot 0px 0px 0px rgba(255, 255, 255, 1);
  }
}

@keyframes typing {
  0% {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: $second-dot 0px 0px 0px rgba(255, 255, 255, 0.2),
      $last-dot 0px 0px 0px rgba(255, 255, 255, 0.2);
  }
  45% {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: $second-dot 0px 0px 0px rgba(255, 255, 255, 1),
      $last-dot 0px 0px 0px rgba(255, 255, 255, 0.2);
  }
  75% {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: $second-dot 0px 0px 0px rgba(255, 255, 255, 0.2),
      $last-dot 0px 0px 0px rgba(255, 255, 255, 1);
  }
}

@-webkit-keyframes typing-light {
  0% {
    background-color: rgba(0, 0, 0, 1);
    box-shadow: $second-dot 0px 0px 0px rgba(0, 0, 0, 0.2),
      $last-dot 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
  45% {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: $second-dot 0px 0px 0px rgba(0, 0, 0, 1),
      $last-dot 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
  75% {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: $second-dot 0px 0px 0px rgba(0, 0, 0, 0.2),
      $last-dot 0px 0px 0px rgba(0, 0, 0, 1);
  }
}

@-moz-keyframes typing-light {
  0% {
    background-color: rgba(0, 0, 0, 1);
    box-shadow: $second-dot 0px 0px 0px rgba(0, 0, 0, 0.2),
      $last-dot 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
  45% {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: $second-dot 0px 0px 0px rgba(0, 0, 0, 1),
      $last-dot 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
  75% {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: $second-dot 0px 0px 0px rgba(0, 0, 0, 0.2),
      $last-dot 0px 0px 0px rgba(0, 0, 0, 1);
  }
}

@keyframes typing-light {
  0% {
    background-color: rgba(0, 0, 0, 1);
    box-shadow: $second-dot 0px 0px 0px rgba(0, 0, 0, 0.2),
      $last-dot 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
  45% {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: $second-dot 0px 0px 0px rgba(0, 0, 0, 1),
      $last-dot 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
  75% {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: $second-dot 0px 0px 0px rgba(0, 0, 0, 0.2),
      $last-dot 0px 0px 0px rgba(0, 0, 0, 1);
  }
}

@keyframes ph-spinner {
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes ph-spinner {
  to {
    -webkit-transform: rotate(360deg);
  }
}

.ph-spinner {
  min-width: 24px;
  min-height: 24px;
}

.ph-spinner:before {
  content: "Loading";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-top: -10px;
  margin-left: -10px;
}

.ph-spinner:before {
  content: "";
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-top-color: rgba(0, 0, 0, 0.6);
  animation: ph-spinner 0.6s linear infinite;
  -webkit-animation: ph-spinner 0.6s linear infinite;
}
.ph-spinner.ph-spinner-dark:before {
  content: "";
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: rgba(255, 255, 255, 0.6);
  animation: ph-spinner 0.6s linear infinite;
  -webkit-animation: ph-spinner 0.6s linear infinite;
}
