/* Code extracted and adapted from Lightning Design System 2.16.2 */

:host(.spinner_container) {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9050;
}

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

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

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

.spinner::before,
.spinner::after,
.spinner_dot-a::before,
.spinner_dot-b::before,
.spinner_dot-a::after,
.spinner_dot-b::after {
    content: "";
    position: absolute;
    background: #b0adab;
    border-radius: 50%;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    transform: translate3d(0, 0, 0);
}

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

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

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

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

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

.spinner::after {
    animation-delay: 416.6667ms;
}

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

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

.spinner_brand.spinner::before,
.spinner_brand.spinner::after,
.spinner_brand .spinner_dot-a::before,
.spinner_brand .spinner_dot-b::before,
.spinner_brand .spinner_dot-a::after,
.spinner_brand .spinner_dot-b::after {
    background-color: #1b96ff;
}

.spinner_inverse.spinner::before,
.spinner_inverse.spinner::after,
.spinner_inverse .spinner_dot-a::before,
.spinner_inverse .spinner_dot-b::before,
.spinner_inverse .spinner_dot-a::after,
.spinner_inverse .spinner_dot-b::after {
    background-color: white;
}

.spinner_x-small.spinner::before,
.spinner_x-small.spinner::after,
.spinner_x-small .spinner_dot-a::before,
.spinner_x-small .spinner_dot-b::before,
.spinner_x-small .spinner_dot-a::after,
.spinner_x-small .spinner_dot-b::after {
    width: 0.25rem;
    height: 0.25rem;
}

.spinner_x-small.spinner::before,
.spinner_x-small .spinner_dot-a::before,
.spinner_x-small .spinner_dot-b::before {
    top: -0.125rem;
    left: -0.125rem;
    animation-name: dotsbouncebefore-extrasmall;
}

.spinner_x-small.spinner::after,
.spinner_x-small .spinner_dot-a::after,
.spinner_x-small .spinner_dot-b::after {
    top: -0.125rem;
    right: -0.125rem;
    animation-name: dotsbounceafter-extrasmall;
}

.spinner_x-small {
    width: 1rem;
}

.spinner_x-small.spinner_inline {
    height: 1rem;
}

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

.spinner_small {
    width: 1.25rem;
}

.spinner_small.spinner_inline {
    height: 1.25rem;
}

.spinner_small.spinner::before,
.spinner_small.spinner::after,
.spinner_small .spinner_dot-a::before,
.spinner_small .spinner_dot-b::before,
.spinner_small .spinner_dot-a::after,
.spinner_small .spinner_dot-b::after {
    width: 0.25rem;
    height: 0.25rem;
}

.spinner_small.spinner::before,
.spinner_small .spinner_dot-a::before,
.spinner_small .spinner_dot-b::before {
    top: -0.125rem;
    left: -0.125rem;
    animation-name: dotsbouncebefore-small;
}

.spinner_small.spinner::after,
.spinner_small .spinner_dot-a::after,
.spinner_small .spinner_dot-b::after {
    top: -0.125rem;
    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 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 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);
    }
}

.spinner_medium {
    width: 2rem;
}

.spinner_medium.spinner::before,
.spinner_medium.spinner::after,
.spinner_medium .spinner_dot-a::before,
.spinner_medium .spinner_dot-b::before,
.spinner_medium .spinner_dot-a::after,
.spinner_medium .spinner_dot-b::after {
    width: 0.5rem;
    height: 0.5rem;
}

.spinner_medium.spinner::before,
.spinner_medium .spinner_dot-a::before,
.spinner_medium .spinner_dot-b::before {
    animation-name: dotsbouncebefore-medium;
    top: -0.25rem;
    left: -0.25rem;
}

.spinner_medium.spinner::after,
.spinner_medium .spinner_dot-a::after,
.spinner_medium .spinner_dot-b::after {
    animation-name: dotsbounceafter-medium;
    top: -0.25rem;
    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 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 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);
    }
}

.spinner_large {
    width: 2.75rem;
}

.spinner_large.spinner::before,
.spinner_large.spinner::after,
.spinner_large .spinner_dot-a::before,
.spinner_large .spinner_dot-b::before,
.spinner_large .spinner_dot-a::after,
.spinner_large .spinner_dot-b::after {
    width: 0.625rem;
    height: 0.625rem;
}

.spinner_large.spinner::before,
.spinner_large .spinner_dot-a::before,
.spinner_large .spinner_dot-b::before {
    animation-name: dotsbouncebefore-medium;
    top: -0.3125rem;
    left: -0.3125rem;
}

.spinner_large.spinner::after,
.spinner_large .spinner_dot-a::after,
.spinner_large .spinner_dot-b::after {
    animation-name: dotsbounceafter-medium;
    top: -0.3125rem;
    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 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);
    }
}

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