.spinner-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.spinner-container .spinner {
    transform: scale(0.8);
}

.spinner-container .spinner .inner-square {
    animation: inner-pulse 1.5s infinite;
    transform-origin: center;
    transform: rotate(45deg);
    fill: var(--theme-primary-hover-color);
    stroke: var(--theme-primary-hover-color);
    x: 130px;
    y: 130px;
}

.spinner-container .spinner .outer-square {
    animation: outer-pulse 1.5s infinite;
    transform-origin: center;
    transform: rotate(45deg);
    fill: var(--theme-primary-color);
    stroke: var(--theme-primary-color);
    x: 100px;
    y: 100px;
}

.spinner-container .spinner .second-outer-square {
    animation: second-outer-pulse 1.5s infinite;
    transform-origin: center;
    transform: rotate(45deg);
    fill: var(--theme-primary-color);
    stroke: var(--theme-primary-color);
    x: 100px;
    y: 100px;
}

@keyframes inner-pulse {
    0% {
        transform: rotate(45deg) scale(1);
    }

    50% {
        transform: rotate(45deg) scale(1.6);
    }

    75% {
        transform: rotate(45deg) scale(1);
    }
}

@keyframes outer-pulse {
    0% {
        transform: rotate(45deg) scale(0.2);
    }

    50% {
        opacity: 0;
    }

    100% {
        transform: rotate(45deg) scale(2.3);
        opacity: 0;
    }
}

@keyframes second-outer-pulse {
    0% {
        transform: rotate(45deg) scale(0.2);
    }

    50% {
        opacity: 0;
        transform: rotate(45deg) scale(0.2);
    }

    75% {
        opacity: 1;
        transform: rotate(45deg) scale(1);
    }

    100% {
        transform: rotate(45deg) scale(0.2);
        opacity: 0;
    }
}