.item-spinner-control {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    line-height: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.item-spinner-control .trinity-item {
    pointer-events: none;
    transform-origin: 50% 50%;
    transition: border-color 120ms ease, background-color 120ms ease, filter 120ms ease;
}

.item-spinner-control:hover .trinity-item,
.item-spinner-control:focus-visible .trinity-item {
    border-color: var(--accent);
    filter: brightness(1.06);
}

.item-spinner-control[aria-busy="true"] {
    cursor: progress;
}

.item-spinner-control[aria-busy="true"] .trinity-item {
    animation: item-spinner-turn var(--item-spinner-duration) cubic-bezier(0.22, 0.72, 0.2, 1) 1;
    border-color: transparent;
    background-color: transparent;
    filter: brightness(1.08);
    will-change: transform;
}

@keyframes item-spinner-turn {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(var(--item-spinner-angle));
    }
}

@media (prefers-reduced-motion: reduce) {
    .item-spinner-control .trinity-item {
        transition: none;
    }
}