/* =========================================================================
 * The shared component of the round navigation arrows.
 *
 * Taken out of block 4 one to one: before block 11 appeared these very rules
 * lived in block4-carousel.css under the name .lmx-b4-arrow. The size is
 * parameterised by --lmx-arrow-scale — every block ties it to its own scale
 * variable (--block4-scale, --block11-scale), so the pixels of block 4 did not
 * change.
 *
 * The :disabled state is new here: the ring carousel of block 4 never had it,
 * while the finite pagination of block 11 uses it.
 * ====================================================================== */

.lmx-arrow{flex:0 0 auto;width:max(34px,calc(44px * var(--lmx-arrow-scale,1)));height:max(34px,calc(44px * var(--lmx-arrow-scale,1)));border-radius:50%;border:1px solid rgba(21,24,29,.25);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s ease,background .2s ease;color:#15181d;padding:0}
.lmx-arrow:hover{border-color:#15181d;background:#15181d;color:#fff}
/* The press, the lift, the glow and the focus ring come from the shared
   .lmx-btn-fx--icon component (assets/css/shared/buttons.css). */
.lmx-arrow svg{width:38%;height:38%;display:block}

.lmx-arrow:disabled{opacity:.35;cursor:default}
.lmx-arrow:disabled:hover{border-color:rgba(21,24,29,.25);background:transparent;color:#15181d}