// Loading Animation
//      
// Loading text with animated svg. Optional modifier of .loading--fullscreen for a fullscreen takeover

.loading {
  text-align: center;
  padding: $spacer;
  cursor: wait;
  margin: $spacer 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading--fullscreen {
  background-color:  rgba($body-bg,.95);
  height: 100vh;
  margin: 0;
  @extend .position-fixed;
}

.loading--inline {
  padding: 0;
  margin: 0;
  text-align: left;
  display: inline-block;
  line-height: $spacer * 2;
  height: $spacer * 2;

  & .loading__text {
    display: inline-block;
    vertical-align: top;
  }
}

.loading__bubble {
  fill: $brand-primary;
}

.loading__bubble--muted {
  fill: $gray-light;
}

.loading__dot {
  opacity: 0.25;
  fill: $text-light;
  animation: hideshow 1.5s ease infinite;
  
  &:nth-of-type(2){
    animation-delay: .25s;
  }
  
  &:nth-of-type(3){
    animation-delay: .5s;
  }
}

@keyframes hideshow {
  0%   { opacity: 0.25; }
  50%  { opacity: 1; }
  100% { opacity: 0.25; }
}