.sxs-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--_size);
    height: var(--_size);
    max-width: 100%;
    border-radius: 50%;
    --_size: 2.5rem;

    &>.icon.icon {
        font-size: calc(.625 * var(--_size));
        font-weight: 400;
    }

    &--v1 {
        background-color: $primaryClear;

        &>.icon.icon {
            color: $duller;
        }
    }

    &--v2 {
        --_size: 3rem;

        &>.icon.icon {
            color: $primaryClear;
        }
    }

    &--has-ani {
        &>.icon.icon {
            animation: _io-n1lik 3000ms infinite;
        }

        @keyframes _io-n1lik {
            0% {
                transform: rotate(0deg);
            }

            2.5% {
                transform: rotate(15deg);
            }

            5% {
                transform: rotate(0deg);
            }

            7.5% {
                transform: rotate(-15deg);
            }

            10% {
                transform: rotate(0deg);
            }

            12.5% {
                transform: rotate(15deg);
            }

            15% {
                transform: rotate(0deg);
            }

            17.5% {
                transform: rotate(-15deg);
            }

            20% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(0deg);
            }
        }
    }
}