/**
 * Componentes UI compartidos de Onlines.
 *
 * Hover unificado para CTAs tipo "boton redondeado con flecha" (Ver todos,
 * Contactar un tecnico, Ver mas, etc.). Cualquier bloque que renderice un
 * boton de este tipo aplica `onlines-ui-button onlines-ui-button--palette-opposite`
 * sobre su `<a>` o `<button>` ademas de su clase BEM local. El SVG debe ser
 * el de `bambi_product_card_arrow()` (viewBox 0 0 18 18) para que la
 * animacion del icono sea coherente.
 *
 * Defaults editables por variable CSS:
 * - --wp--custom--ui--button--hover-background  (default: amarillo institucional)
 * - --wp--custom--ui--button--hover-text        (default: azul institucional)
 * - --wp--custom--ui--button--arrow-shift       (default: 4px)
 * - --wp--custom--ui--button--arrow-y           (default: 1px)
 * - --wp--custom--ui--button--transition-duration (default: 220ms)
 * - --wp--custom--ui--button--arrow-transition-duration (default: 220ms)
 *
 * Regla global: el boton se queda donde esta; solo cambia color de fondo,
 * color de texto y la flecha se desplaza a la derecha. La flecha puede usar
 * `--wp--custom--ui--button--arrow-y` para un ajuste vertical estatico.
 * La unica excepcion del sitio son los logos de redes sociales del footer.
 */

.onlines-ui-button.onlines-ui-button--palette-opposite {
    transition:
        background-color var(--wp--custom--ui--button--transition-duration, 220ms) ease,
        color var(--wp--custom--ui--button--transition-duration, 220ms) ease,
        filter var(--wp--custom--ui--button--transition-duration, 220ms) ease;
}

.onlines-ui-button.onlines-ui-button--palette-opposite > svg {
    display: block;
    flex: 0 0 auto;
    transition: transform var(--wp--custom--ui--button--arrow-transition-duration, 220ms) ease;
    transform: translateY(var(--wp--custom--ui--button--arrow-y, 1px));
}

.onlines-ui-button.onlines-ui-button--palette-opposite:not([aria-disabled="true"]):hover,
.onlines-ui-button.onlines-ui-button--palette-opposite:not([aria-disabled="true"]):focus-visible {
    background: var(--wp--custom--ui--button--hover-background, var(--wp--preset--color--custom-amarillo, #FEC52D));
    color: var(--wp--custom--ui--button--hover-text, var(--wp--preset--color--custom-azul, #09364D));
    filter: none;
}

.onlines-ui-button.onlines-ui-button--palette-opposite:not([aria-disabled="true"]):hover > svg,
.onlines-ui-button.onlines-ui-button--palette-opposite:not([aria-disabled="true"]):focus-visible > svg {
    transform: translate(
        var(--wp--custom--ui--button--arrow-shift, 4px),
        var(--wp--custom--ui--button--arrow-y, 1px)
    );
}

@media (prefers-reduced-motion: reduce) {
    .onlines-ui-button.onlines-ui-button--palette-opposite > svg {
        transition: none;
    }

    .onlines-ui-button.onlines-ui-button--palette-opposite:not([aria-disabled="true"]):hover > svg,
    .onlines-ui-button.onlines-ui-button--palette-opposite:not([aria-disabled="true"]):focus-visible > svg {
        transform: translateY(var(--wp--custom--ui--button--arrow-y, 1px));
    }
}