/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

.slds-spinner_container {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  z-index: 9050;
  background-color: color-mix(in oklab, var(--slds-g-color-surface-container-1, #fff), transparent 25%);
  visibility: visible;
  opacity: 1;
  transition:
    opacity 0.2s ease,
    visibility 0s;
  transition-delay: 0s, 0.3s;
}

.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;
}

.slds-spinner {
  position: absolute;
  inset-block-start: 50%;

  /* RTL: physical (mirrors SLDS1 @noflip) — centering paired with translate */
  left: 50%;
  z-index: 9051;
  transform: translate(-50%, -50%) rotate(90deg);
}

/**
 * Returns the spinner back into the document flow
 */
.slds-spinner_inline {
  position: relative;
  inset-block-start: auto;
  inset-inline-start: auto;
  inset-inline-end: auto;
  inset-block-end: auto;
  transform: none;
}

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

/**
 * This creates two of the circles
 */
.slds-spinner__dot-a,
.slds-spinner__dot-b {
  position: absolute;
  inset-block-start: 0;

  /* RTL: physical — matches SLDS 1's shipped CSS (rotation-driven glyph, direction-agnostic). */
  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 {
  content: '';
  position: absolute;
  background: var(--slds-g-color-neutral-base-50);
  border-radius: var(--slds-g-radius-border-circle);
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  transform: translate3d(0, 0, 0);
}

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

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

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

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

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

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

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

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

/**
 * Set a delay of 300ms on spinner
 */
.slds-spinner_delayed {
  &::before {
    animation-delay: 216.6666ms;
  }

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

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

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

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

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

/**
 * This creates the blue brand spinner
 */
.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: var(--slds-g-color-accent-1);
  }
}

/**
 * This creates the inverse spinner
 */
.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: var(--slds-g-color-surface-container-1);
  }
}

/**
 * This is the extra extra small spinner
 */
.slds-spinner_xx-small {
  width: var(--slds-g-sizing-3);

  &.slds-spinner_inline {
    height: var(--slds-g-sizing-3);
  }

  &.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 {
    inset-block-start: -0.0625rem;

    /* RTL: physical — matches SLDS 1's shipped CSS (rotation-driven glyph, direction-agnostic). */
    left: -0.0625rem;
    animation-name: dotsBounceBefore-extraExtraSmall;
  }

  &.slds-spinner::after,
  .slds-spinner__dot-a::after,
  .slds-spinner__dot-b::after {
    inset-block-start: -0.0625rem;

    /* RTL: physical — matches SLDS 1's shipped CSS (rotation-driven glyph, direction-agnostic). */
    right: -0.0625rem;
    animation-name: dotsBounceAfter-extraExtraSmall;
  }
}

@keyframes dotsBounceBefore-extraExtraSmall {
  0% {
    transform: translate3d(0, 0, 0);
  }

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

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

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes dotsBounceAfter-extraExtraSmall {
  0% {
    transform: translate3d(0, 0, 0);
  }

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

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

  100% {
    transform: translate3d(0, 0, 0);
  }
}

/**
 * This is the extra small spinner
 */

.slds-spinner_x-small {
  width: var(--slds-g-sizing-5);

  &.slds-spinner_inline {
    height: var(--slds-g-sizing-5);
  }

  &.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: var(--slds-g-sizing-2);
    height: var(--slds-g-sizing-2);
  }

  &.slds-spinner::before,
  .slds-spinner__dot-a::before,
  .slds-spinner__dot-b::before {
    inset-block-start: -0.125rem;

    /* RTL: physical — matches SLDS 1's shipped CSS (rotation-driven glyph, direction-agnostic). */
    left: -0.125rem;
    animation-name: dotsBounceBefore-extraSmall;
  }

  &.slds-spinner::after,
  .slds-spinner__dot-a::after,
  .slds-spinner__dot-b::after {
    inset-block-start: -0.125rem;

    /* RTL: physical — matches SLDS 1's shipped CSS (rotation-driven glyph, direction-agnostic). */
    right: -0.125rem;
    animation-name: dotsBounceAfter-extraSmall;
  }
}

@keyframes dotsBounceBefore-extraSmall {
  0% {
    transform: translate3d(0, 0, 0);
  }

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

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

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes dotsBounceAfter-extraSmall {
  0% {
    transform: translate3d(0, 0, 0);
  }

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

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

  100% {
    transform: translate3d(0, 0, 0);
  }
}

/**
 * This is the small spinner
 */
.slds-spinner_small {
  width: var(--slds-g-sizing-6);

  &.slds-spinner_inline {
    height: var(--slds-g-sizing-6);
  }

  &.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: var(--slds-g-sizing-2);
    height: var(--slds-g-sizing-2);
  }

  &.slds-spinner::before,
  .slds-spinner__dot-a::before,
  .slds-spinner__dot-b::before {
    inset-block-start: -0.125rem;

    /* RTL: physical — matches SLDS 1's shipped CSS (rotation-driven glyph, direction-agnostic). */
    left: -0.125rem;
    animation-name: dotsBounceBefore-small;
  }

  &.slds-spinner::after,
  .slds-spinner__dot-a::after,
  .slds-spinner__dot-b::after {
    inset-block-start: -0.125rem;

    /* RTL: physical — matches SLDS 1's shipped CSS (rotation-driven glyph, direction-agnostic). */
    right: -0.125rem;
    animation-name: dotsBounceAfter-small;
  }
}

@keyframes dotsBounceBefore-small {
  0% {
    transform: translate3d(0, 0, 0);
  }

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

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

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes dotsBounceAfter-small {
  0% {
    transform: translate3d(0, 0, 0);
  }

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

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

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

/**
 * This is the medium spinner
 */

.slds-spinner_medium {
  width: var(--slds-g-sizing-9);

  &.slds-spinner_inline {
    height: var(--slds-g-sizing-9);
  }

  &.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: var(--slds-g-sizing-3);
    height: var(--slds-g-sizing-3);
  }

  &.slds-spinner::before,
  .slds-spinner__dot-a::before,
  .slds-spinner__dot-b::before {
    animation-name: dotsBounceBefore-medium;
    inset-block-start: -0.25rem;

    /* RTL: physical — matches SLDS 1's shipped CSS (rotation-driven glyph, direction-agnostic). */
    left: -0.25rem;
  }

  &.slds-spinner::after,
  .slds-spinner__dot-a::after,
  .slds-spinner__dot-b::after {
    animation-name: dotsBounceAfter-medium;
    inset-block-start: -0.25rem;

    /* RTL: physical — matches SLDS 1's shipped CSS (rotation-driven glyph, direction-agnostic). */
    right: -0.25rem;
  }
}

@keyframes dotsBounceBefore-medium {
  0% {
    transform: translate3d(0, 0, 0);
  }

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

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

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes dotsBounceAfter-medium {
  0% {
    transform: translate3d(0, 0, 0);
  }

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

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

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

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

.slds-spinner_large {
  width: calc(var(--slds-g-sizing-9) + var(--slds-g-sizing-4));

  &.slds-spinner_inline {
    height: calc(var(--slds-g-sizing-9) + var(--slds-g-sizing-4));
  }

  &.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: calc(var(--slds-g-sizing-3) + var(--slds-g-sizing-1));
    height: calc(var(--slds-g-sizing-3) + var(--slds-g-sizing-1));
  }

  &.slds-spinner::before,
  .slds-spinner__dot-a::before,
  .slds-spinner__dot-b::before {
    animation-name: dotsBounceBefore-medium;
    inset-block-start: -0.3125rem;

    /* RTL: physical — matches SLDS 1's shipped CSS (rotation-driven glyph, direction-agnostic). */
    left: -0.3125rem;
  }

  &.slds-spinner::after,
  .slds-spinner__dot-a::after,
  .slds-spinner__dot-b::after {
    animation-name: dotsBounceAfter-medium;
    inset-block-start: -0.3125rem;

    /* RTL: physical — matches SLDS 1's shipped CSS (rotation-driven glyph, direction-agnostic). */
    right: -0.3125rem;
  }
}

@keyframes dotsBounceBefore-large {
  0% {
    transform: translate3d(0, 0, 0);
  }

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

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

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

@keyframes dotsBounceAfter-large {
  0% {
    transform: translate3d(0, 0, 0);
  }

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

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

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