/*
 * 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-c-spinner-color-background), 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);
  transform-origin: 50% 50%;
  will-change: transform;

  /**
   * 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;
  }

  /**
   * 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%;
    transform-origin: 50% 50%;
    will-change: transform;
  }

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

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

  /**
   * Six animated dots, painted by the spinner root and dot-a/dot-b pseudo-elements
   */
  &::before,
  &::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-color: var(--slds-c-spinner-color-foreground);
    border-radius: var(--slds-c-spinner-radius-border);
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    transform: translate3d(0, 0, 0);
  }

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

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

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

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

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

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

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

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

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

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

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

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

  /**
   * Extra extra small spinner
   */
  &.slds-spinner_xx-small {
    width: var(--slds-c-spinner-size);

    &.slds-spinner_inline {
      height: var(--slds-c-spinner-size);
    }

    &::before,
    &::after,
    & .slds-spinner__dot-a::before,
    & .slds-spinner__dot-b::before,
    & .slds-spinner__dot-a::after,
    & .slds-spinner__dot-b::after {
      width: var(--slds-c-spinner-dot-size);
      height: var(--slds-c-spinner-dot-size);
    }

    &::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;
    }

    &::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;
    }
  }

  /**
   * Extra small spinner
   */
  &.slds-spinner_x-small {
    width: var(--slds-c-spinner-size);

    &.slds-spinner_inline {
      height: var(--slds-c-spinner-size);
    }

    &::before,
    &::after,
    & .slds-spinner__dot-a::before,
    & .slds-spinner__dot-b::before,
    & .slds-spinner__dot-a::after,
    & .slds-spinner__dot-b::after {
      width: var(--slds-c-spinner-dot-size);
      height: var(--slds-c-spinner-dot-size);
    }

    &::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;
    }

    &::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;
    }
  }

  /**
   * Small spinner
   */
  &.slds-spinner_small {
    width: var(--slds-c-spinner-size);

    &.slds-spinner_inline {
      height: var(--slds-c-spinner-size);
    }

    &::before,
    &::after,
    & .slds-spinner__dot-a::before,
    & .slds-spinner__dot-b::before,
    & .slds-spinner__dot-a::after,
    & .slds-spinner__dot-b::after {
      width: var(--slds-c-spinner-dot-size);
      height: var(--slds-c-spinner-dot-size);
    }

    &::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;
    }

    &::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;
    }
  }

  /**
   * Medium spinner
   */
  &.slds-spinner_medium {
    width: var(--slds-c-spinner-size);

    &.slds-spinner_inline {
      height: var(--slds-c-spinner-size);
    }

    &::before,
    &::after,
    & .slds-spinner__dot-a::before,
    & .slds-spinner__dot-b::before,
    & .slds-spinner__dot-a::after,
    & .slds-spinner__dot-b::after {
      width: var(--slds-c-spinner-dot-size);
      height: var(--slds-c-spinner-dot-size);
    }

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

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

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

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

  /**
   * Large spinner
   */
  &.slds-spinner_large {
    width: var(--slds-c-spinner-size);

    &.slds-spinner_inline {
      height: var(--slds-c-spinner-size);
    }

    &::before,
    &::after,
    & .slds-spinner__dot-a::before,
    & .slds-spinner__dot-b::before,
    & .slds-spinner__dot-a::after,
    & .slds-spinner__dot-b::after {
      width: var(--slds-c-spinner-dot-size);
      height: var(--slds-c-spinner-dot-size);
    }

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

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

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

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

@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);
  }
}

@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);
  }
}

@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);
  }
}

@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);
  }
}

@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);
  }
}