:root {
    --placd-spinner-dot-color: var(--placd-purple);
}

.spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.25rem, 1.5vw, 0.75rem);
    width: clamp(3.75rem, 24%, 8rem);
    max-width: 100%;
    aspect-ratio: 3 / 1;
}

.tm-ajax-throbber .spinner {
    flex: 0 0 auto;
}

.spinner > div {
    width: clamp(0.55rem, 25%, 2rem);
    height: clamp(0.55rem, 75%, 2rem);
    background-color: var(--placd-spinner-dot-color);
    border-radius: 50%;
    flex: 0 0 auto;
    display: block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0)
    }
    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}