.itsec-spinner {
    width: var(--itsec-size, 40px);
    height: var(--itsec-size, 40px);
    position: relative;

    * {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: var(--itsec-color, $medium-text);
        opacity: 0.6;
        position: absolute;
        top: 0;
        left: 0;
        animation: itsec-spinner-bounce 2s infinite ease-in-out;
        transition: opacity 400ms;
    }

    *:nth-child(2) {
        animation-delay: -1.0s;
    }

    &.itsec-spinner--paused * {
        animation-play-state: paused;
        opacity: 0;
    }
}


@keyframes itsec-spinner-bounce {
    0%, 100% {
        transform: scale(0);
    }
    45%, 55% {
        transform: scale(1);
    }
}