.kcx-orbit-widget {
    --kcx-orbit-radius: 130px;
    --kcx-orbit-duration: 18s;
    --kcx-orbit-ring: #e4e4e4;
    --kcx-orbit-ring-width: 1px;
    position: relative;
    display: grid;
    place-items: center;
    width: 320px;
    height: 320px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
}

.kcx-orbit-rings {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.kcx-orbit-ring {
    position: absolute;
    width: calc(var(--kcx-orbit-radius) * 2 * var(--kcx-orbit-ring-scale, 1));
    height: calc(var(--kcx-orbit-radius) * 2 * var(--kcx-orbit-ring-scale, 1));
    border-radius: 50%;
    border: var(--kcx-orbit-ring-width) solid var(--kcx-orbit-ring);
    opacity: 0.9;
}

.kcx-orbit-center {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    z-index: 2;
    overflow: hidden;
}

.kcx-orbit-center img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.kcx-orbit-items {
    position: absolute;
    inset: 0;
    animation: kcx-orbit-rotate calc(var(--kcx-orbit-duration) * var(--kcx-orbit-duration-scale, 1)) linear infinite;
}

.kcx-orbit-widget.is-reverse .kcx-orbit-items {
    animation-direction: reverse;
}

.kcx-orbit-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:
        translate(-50%, -50%)
        rotate(var(--orbit-angle, 0deg))
        translate(calc(var(--kcx-orbit-radius) * var(--kcx-orbit-radius-scale, 1)))
        rotate(calc(var(--orbit-angle, 0deg) * -1));
    transform-origin: center;
}

.kcx-orbit-item-inner {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    overflow: hidden;
    animation: kcx-orbit-counter calc(var(--kcx-orbit-duration) * var(--kcx-orbit-duration-scale, 1)) linear infinite;
    animation-direction: reverse;
}

.kcx-orbit-widget.is-reverse .kcx-orbit-item-inner {
    animation-direction: normal;
}

.kcx-orbit-item-inner img {
    width: 65%;
    height: 65%;
    object-fit: contain;
}

@keyframes kcx-orbit-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes kcx-orbit-counter {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kcx-orbit-items,
    .kcx-orbit-item-inner {
        animation: none;
    }
}