/* Follows existing player state. The pause control remains visible. */
.catalog-preview-button,
.vox-play {
    position: relative;
}

.catalog-preview-button {
    padding-inline: 38px;
    white-space: normal;
}

.catalog-preview-button::after,
.vox-play::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 20px;
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: left center, center center, right center;
    background-size: 4px 40%, 4px 90%, 4px 60%;
    opacity: 0;
    pointer-events: none;
}

.catalog-preview-button::after {
    inset-inline-end: 12px;
    top: calc(50% - 10px);
}

.vox-play::after {
    height: 10px;
    bottom: 4px;
    left: calc(50% - 9px);
}

.catalog-preview-button.is-playing::after,
.vox-play[aria-pressed="true"]::after {
    opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
    .catalog-preview-button.is-playing::after,
    .vox-play[aria-pressed="true"]::after {
        animation: va-audio-levels 850ms ease-in-out infinite alternate;
    }

    @keyframes va-audio-levels {
        0% { background-size: 4px 35%, 4px 90%, 4px 55%; }
        50% { background-size: 4px 85%, 4px 45%, 4px 100%; }
        100% { background-size: 4px 55%, 4px 100%, 4px 30%; }
    }
}