.small-prev-btn,
.small-next-btn,
.small-prev-btn:hover,
.small-next-btn:hover {
    height: var(--32);
    width: var(--32);
    padding: 0;
    border-radius: 100px;
    border: none;
    background: var(--secondary-bg-color);
}

/*
 * KOF-306: for logged-in visitors, configurable prices wait for the customer's Price Matrix price
 * (js/magento_catalog/configurable-matrix-prices). The holder keeps its space under a
 * placeholder; a price that cannot be loaded is replaced by the failure message.
 */
@keyframes price-pending-pulse {
    50% {
        opacity: 0.05;
    }
}

/* The product page holder wraps the price and its "+ Vat" suffix. As a flex row it keeps them in
   order, like an ungated price box; otherwise the floated product page price moves after the suffix. */
.price-matrix-gate {
    display: inline-flex;
}

[data-price-pending],
[data-price-failed] {
    position: relative;
    visibility: hidden;
}

/* Room for the failure message in narrow card rows */
[data-price-failed] {
    min-width: 180px;
}

/* Some widgets enable every add-to-cart button when they start; one still waiting for its
   price keeps looking and acting disabled */
[data-price-pending-disabled] {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

[data-price-pending]::before {
    content: "";
    visibility: visible;
    position: absolute;
    top: 0.15em;
    bottom: 0.15em;
    left: 0;
    right: 0;
    min-width: 64px;
    border-radius: 4px;
    background-color: currentColor;
    opacity: 0.12;
    animation: price-pending-pulse 1.5s ease-in-out infinite;
}

[data-price-failed] > .price-matrix-failed {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-size: 13px;
    font-weight: normal;
    line-height: 16px;
    white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
    [data-price-pending]::before {
        animation: none;
    }
}