/* ============================================
   BLIP — GRADIENTS MODULE
   ============================================ */

/*
 * Admin layout. display: none so a hidden field fully collapses its
 * space instead of leaving a gap. min-height is the actual guarantee
 * against a height jump when the taller angle field appears — sized to
 * fit it so the row doesn't grow only once Gradient is toggled on.
 */
.blip-row.blip-bg-row {
    min-height: 40px;
}

.blip-gradient-field {
    display: none;
}

.blip-bg-row.is-gradient .blip-gradient-field {
    display: inline-flex;
    align-items: center;
}

/* Matches the row's 26px swatches / 24px toggle track so this input
   doesn't grow the row-item's height only once it becomes visible. */
.blip-gradient-angle input {
    width: 4em;
    height: 26px;
    box-sizing: border-box;
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
}

/* appearance:auto above doesn't reliably bring Chrome's spin buttons
   back on its own — WP core's mobile CSS (forms.css) strips them at
   the pseudo-element level too, same issue blip-admin.css's
   .blip-num-sm/.blip-num-md fields hit. */
.blip-gradient-angle input::-webkit-outer-spin-button,
.blip-gradient-angle input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button !important;
    opacity: 1;
}

/*
 * Frontend gradient application. background-color is set explicitly
 * (not just via the `background` shorthand, which only ever writes to
 * background-image for a gradient value) because some mobile browsers'
 * UI-chrome-tinting heuristics read background-color directly rather
 * than sampling rendered pixels — without this they see "transparent"
 * for any gradient blip regardless of its actual colors.
 */
.blip-message[data-gradient]::before {
    background-color: var(--blip-bg, #222222);
    background-image: var(--blip-gradient);
}