// Lightning Design System 2.8.0
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

.slds-spinner_container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $z-index-spinner;
  background-color: $color-background-temp-modal-tint-alt;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease, visibility 0s;
  transition-delay: 0s, 0.3s;
}

/* Follow production class names (not starting with slds-) */
/* stylelint-disable selector-class-pattern */
.slds-spinner_container.is-hidden {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0s;
  transition-delay: 0s, 0s;
}

.slds-spinner_container.hide {
  display: none;
}
/* stylelint-enable selector-class-pattern */

/**
 * @name base
 * @selector .slds-spinner
 * @restrict div
 * @support dev-ready
 * @variant
 */

.slds-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: ($z-index-spinner + 1);
  transform: translate(-50%, -50%) rotate(90deg);
}

.slds-spinner_inline {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
}

.slds-spinner,
.slds-spinner__dot-a,
.slds-spinner__dot-b {
  transform-origin: 50% 50%;
}

/**
 * This creates two of the circles
 *
 * @selector .slds-spinner__dot-a
 * @restrict .slds-spinner div
 * @required
 */

/**
 * This creates two of the circles
 *
 * @selector .slds-spinner__dot-b
 * @restrict .slds-spinner div
 * @required
 */

.slds-spinner__dot-a,
.slds-spinner__dot-b {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.slds-spinner:before,
.slds-spinner:after,
.slds-spinner__dot-a:before,
.slds-spinner__dot-b:before,
.slds-spinner__dot-a:after,
.slds-spinner__dot-b:after {
  position: absolute;
  content: '';
  background: $color-background-spinner-dot;
  border-radius: $border-radius-circle;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
}

.slds-spinner__dot-a {
  transform: rotate(60deg) translateY(0);
}

.slds-spinner__dot-b {
  transform: rotate(120deg) translateY(0);
}

.slds-spinner:before {
  animation-delay: -83.33333ms;
}

.slds-spinner__dot-a:before {
  animation-delay: 83.33333ms;
}

.slds-spinner__dot-b:before {
  animation-delay: 250ms;
}

.slds-spinner:after {
  animation-delay: 416.66667ms;
}

.slds-spinner__dot-a:after {
  animation-delay: 583.33333ms;
}

.slds-spinner__dot-b:after {
  animation-delay: 750ms;
}

/**
 * @summary Set a delay of 300ms on spinner
 * @selector .slds-spinner_delayed
 * @restrict .slds-spinner
 * @modifier
 * @group timing
 */
.slds-spinner_delayed {

  &:before {
    animation-delay: 216.66667ms;
  }

  .slds-spinner__dot-a:before {
    animation-delay: 383.33333ms;
  }

  .slds-spinner__dot-b:before {
    animation-delay: 550ms;
  }

  &:after {
    animation-delay: 716.66667ms;
  }

  .slds-spinner__dot-a:after {
    animation-delay: 883.33333ms;
  }

  .slds-spinner__dot-b:after {
    animation-delay: 1050ms;
  }
}


/**
 * This creates the blue brand spinner
 *
 * @selector .slds-spinner_brand
 * @restrict .slds-spinner
 * @modifier
 * @group color
 */

.slds-spinner_brand,
.slds-spinner--brand {

  &.slds-spinner:before,
  &.slds-spinner:after,
  .slds-spinner__dot-a:before,
  .slds-spinner__dot-b:before,
  .slds-spinner__dot-a:after,
  .slds-spinner__dot-b:after {
    background-color: $brand-primary;
  }
}

/**
 * This creates the inverse spinner
 *
 * @selector .slds-spinner_inverse
 * @restrict .slds-spinner
 */

.slds-spinner_inverse,
.slds-spinner--inverse {

  &.slds-spinner:before,
  &.slds-spinner:after,
  .slds-spinner__dot-a:before,
  .slds-spinner__dot-b:before,
  .slds-spinner__dot-a:after,
  .slds-spinner__dot-b:after {
    background-color: $color-background-alt;
  }
}


/**
 * This is the extra extra small spinner
 *
 * @selector .slds-spinner_xx-small
 * @restrict .slds-spinner
 * @modifier
 * @group size
 */

.slds-spinner_xx-small,
.slds-spinner--xx-small {
  width: 0.5rem;

  &.slds-spinner_inline {
    height: 0.5rem;
  }

  &.slds-spinner:before,
  &.slds-spinner:after,
  .slds-spinner__dot-a:before,
  .slds-spinner__dot-b:before,
  .slds-spinner__dot-a:after,
  .slds-spinner__dot-b:after {
    width: 0.125rem;
    height: 0.125rem;
  }

  &.slds-spinner:before,
  .slds-spinner__dot-a:before,
  .slds-spinner__dot-b:before {
    top: -0.0625rem;
    left: -0.0625rem;
    animation-name: dotsBounceBefore-extraExtraSmall;
  }

  &.slds-spinner:after,
  .slds-spinner__dot-a:after,
  .slds-spinner__dot-b:after {
    top: -0.0625rem;
    right: -0.0625rem;
    animation-name: dotsBounceAfter-extraExtraSmall;
  }
}

@keyframes dotsBounceBefore-extraExtraSmall {

  60% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.275, 0.0425, 0.34, 0.265);
  }

  80% {
    animation-timing-function: cubic-bezier(0, 0.555, 0.35, 0.715);
    transform: translateX(-0.125rem);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes dotsBounceAfter-extraExtraSmall {

  60% {
    animation-timing-function: cubic-bezier(0.275, 0.0425, 0.34, 0.265);
    transform: translateX(0);
  }

  80% {
    animation-timing-function: cubic-bezier(0, 0.555, 0.35, 0.715);
    transform: translateX(0.125rem);
  }

  100% {
    transform: translateX(0);
  }
}

/**
 * This is the extra small spinner
 *
 * @selector .slds-spinner_x-small
 * @restrict .slds-spinner
 * @modifier
 * @group size
 */

.slds-spinner_x-small,
.slds-spinner--x-small {
  width: 1rem;

  &.slds-spinner_inline {
    height: 1rem;
  }

  &.slds-spinner:before,
  &.slds-spinner:after,
  .slds-spinner__dot-a:before,
  .slds-spinner__dot-b:before,
  .slds-spinner__dot-a:after,
  .slds-spinner__dot-b:after {
    width: 0.25rem;
    height: 0.25rem;
  }

  &.slds-spinner:before,
  .slds-spinner__dot-a:before,
  .slds-spinner__dot-b:before {
    top: -0.125rem;
    left: -0.125rem;
    animation-name: dotsBounceBefore-extraSmall;
  }

  &.slds-spinner:after,
  .slds-spinner__dot-a:after,
  .slds-spinner__dot-b:after {
    top: -0.125rem;
    right: -0.125rem;
    animation-name: dotsBounceAfter-extraSmall;
  }
}

@keyframes dotsBounceBefore-extraSmall {

  60% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  }

  80% {
    animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
    transform: translateX(-0.25rem);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes dotsBounceAfter-extraSmall {

  60% {
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transform: translateX(0);
  }

  80% {
    animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
    transform: translateX(0.25rem);
  }

  100% {
    transform: translateX(0);
  }
}

/**
 * This is the small spinner
 *
 * @selector .slds-spinner_small
 * @restrict .slds-spinner
 * @modifier
 * @group size
 */

.slds-spinner_small,
.slds-spinner--small {
  width: 1.25rem;

  &.slds-spinner_inline {
    height: 1.25rem;
  }

  &.slds-spinner:before,
  &.slds-spinner:after,
  .slds-spinner__dot-a:before,
  .slds-spinner__dot-b:before,
  .slds-spinner__dot-a:after,
  .slds-spinner__dot-b:after {
    width: 0.25rem;
    height: 0.25rem;
  }

  &.slds-spinner:before,
  .slds-spinner__dot-a:before,
  .slds-spinner__dot-b:before {
    top: -0.125rem;
    left: -0.125rem;
    animation-name: dotsBounceBefore-small;
  }

  &.slds-spinner:after,
  .slds-spinner__dot-a:after,
  .slds-spinner__dot-b:after {
    top: -0.125rem;
    right: -0.125rem;
    animation-name: dotsBounceAfter-small;
  }
}

@keyframes dotsBounceBefore-small {

  60% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  }

  80% {
    animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
    transform: translateX(-0.375rem);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes dotsBounceAfter-small {

  60% {
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transform: translateX(0);
  }

  80% {
    animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
    transform: translateX(0.375rem);
  }

  100% {
    transform: translateX(0);
  }
}

/**
 * This is the medium spinner
 *
 * @selector .slds-spinner_medium
 * @restrict .slds-spinner
 * @modifier
 * @group size
 */

.slds-spinner_medium,
.slds-spinner--medium {
  width: 2rem;

  &.slds-spinner_inline {
    height: 2rem;
  }

  &.slds-spinner:before,
  &.slds-spinner:after,
  .slds-spinner__dot-a:before,
  .slds-spinner__dot-b:before,
  .slds-spinner__dot-a:after,
  .slds-spinner__dot-b:after {
    width: 0.5rem;
    height: 0.5rem;
  }

  &.slds-spinner:before,
  .slds-spinner__dot-a:before,
  .slds-spinner__dot-b:before {
    animation-name: dotsBounceBefore-medium;
    top: -0.25rem;
    left: -0.25rem;
  }

  &.slds-spinner:after,
  .slds-spinner__dot-a:after,
  .slds-spinner__dot-b:after {
    animation-name: dotsBounceAfter-medium;
    top: -0.25rem;
    right: -0.25rem;
  }
}

@keyframes dotsBounceBefore-medium {

  60% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  }

  80% {
    animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
    transform: translateX(-0.5rem);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes dotsBounceAfter-medium {

  60% {
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transform: translateX(0);
  }

  80% {
    animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
    transform: translateX(0.5rem);
  }

  100% {
    transform: translateX(0);
  }
}

/**
 * This is the large spinner
 *
 * @selector .slds-spinner_large
 * @restrict .slds-spinner
 * @modifier
 * @group size
 */

.slds-spinner_large,
.slds-spinner--large {
  width: 2.75rem;

  &.slds-spinner_inline {
    height: 2.75rem;
  }

  &.slds-spinner:before,
  &.slds-spinner:after,
  .slds-spinner__dot-a:before,
  .slds-spinner__dot-b:before,
  .slds-spinner__dot-a:after,
  .slds-spinner__dot-b:after {
    width: 0.625rem;
    height: 0.625rem;
  }

  &.slds-spinner:before,
  .slds-spinner__dot-a:before,
  .slds-spinner__dot-b:before {
    animation-name: dotsBounceBefore-medium;
    top: -0.3125rem;
    left: -0.3125rem;
  }

  &.slds-spinner:after,
  .slds-spinner__dot-a:after,
  .slds-spinner__dot-b:after {
    animation-name: dotsBounceAfter-medium;
    top: -0.3125rem;
    right: -0.3125rem;
  }
}

@keyframes dotsBounceBefore-large {

  60% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  }

  80% {
    animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
    transform: translateX(-0.75rem);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes dotsBounceAfter-large {

  60% {
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transform: translateX(0);
  }

  80% {
    animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
    transform: translateX(0.75rem);
  }

  100% {
    transform: translateX(0);
  }
}