/* ============================================
   BLIP — ARROWS MODULE
   ============================================ */

/*
 * Background color, opacity, and shape (border-radius) are all set inline
 * per-button by class-blip-arrows.php, driven by the admin settings —
 * intentionally no static background/border/opacity here.
 */
.blip-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fixed, reliable stack — not inherited from the blip's own Font
       setting. The glyphs are icons, not brand text, and tying them to
       an arbitrary chosen font risks poor/missing glyph coverage for
       these characters, on top of "Inherit from Theme" being
       inherently inconsistent between the admin preview and frontend. */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1;
    transition: filter 0.25s ease, transform 0.25s ease;
}

.blip-arrow:hover {
    filter: brightness(1.15);
}

/* On Hover effects — each keeps the base translateY(-50%) that
   vertically centers the button, adding the effect's own transform on
   top instead of replacing it. */
.blip-arrow[data-hover="grow"]:hover {
    transform: translateY(-50%) scale(1.15);
}

.blip-arrow[data-hover="shrink"]:hover {
    transform: translateY(-50%) scale(0.85);
}

/* "Move" shifts in the direction the arrow points — prev points left,
   so it moves left; next points right, so it moves right. */
.blip-arrow[data-hover="move"].blip-prev:hover {
    transform: translateY(-50%) translateX(-4px);
}

.blip-arrow[data-hover="move"].blip-next:hover {
    transform: translateY(-50%) translateX(4px);
}

.blip-prev {
    left: 8px;
}

.blip-next {
    right: 8px;
}

.blip-arrow-glyph {
    display: inline-block;
}

/* The same glyph is used for both buttons — mirror it for "previous"
   instead of requiring a separate left-facing character per style. */
.blip-prev .blip-arrow-glyph {
    transform: scaleX(-1);
}

/* Reserve a gutter matching the arrows' footprint (8px offset + 28px
   width, plus a little breathing room) so a wrapped multi-line message
   doesn't run underneath either button. */
.blip-has-arrows .blip-message-inner {
    padding: 5px 40px;
}

/*
 * ADMIN: "if on" field visibility. visibility (not display) so a
 * hidden field still reserves its layout space — the row's width/wrap
 * stays constant whether Background is on or off, instead of
 * reflowing (and changing height) each time fields appear/disappear.
 */
.blip-bg-field {
    visibility: hidden;
}

.blip-bg-fields.is-bg-on .blip-bg-field {
    visibility: visible;
}