/* Generic loading spinner. */
.loading-spinner {
  position: relative;
  width: 50px;
  height: 50px;
}

.loading-spinner::before,
.loading-spinner::after {
  content: '';
  display: block;
  position: absolute;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: black;
  animation-name: load;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.loading-spinner::after {
  animation-delay: -.5s;
  animation-direction: reverse;
}

bgi-loader:empty {
  display: none;
}

/* A loading button with a loading spinner in it.  See the dispLoadWhen directive. */
.loading-button {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}

.loading-button .loading-spinner {
  width: 0;
  height: 0;
  transition: width .1s linear, height .1s linear;
}

.loading-button.loading .loading-spinner {
  position: relative;
  width: 10px;
  height: 10px;
  margin-left: 5px;
}

@keyframes load {
  0%   { opacity: .5; transform: translateX(0)    translateY(0)    scale(1,  1);  }
  25%  { opacity: 1;  transform: translateX(100%) translateY(0)    scale(.5, .5); }
  50%  { opacity: .5; transform: translateX(100%) translateY(100%) scale(1,  1);  }
  75%  { opacity: 1;  transform: translateX(0)    translateY(100%) scale(.5, .5); }
  100% { opacity: .5; transform: translateX(0)    translateY(0)    scale(1,  1);  }
}