/***********************************************************************
 *          yui_inputs.css
 *
 *      Styling for the editable-input helpers in yui_inputs.js.
 *
 *      The clear button itself is Bulma's `.delete`; here we only
 *      position it over the input's right padding and reveal it only
 *      while the field has content AND is focused for editing — so a
 *      form full of pre-filled fields shows the ✕ on just the field the
 *      user is on, not on every populated one at once.
 *
 *          Copyright (c) 2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/
.control.has-clear {
    position: relative;
}
.control.has-clear input.input {
    padding-right: 2.25em;
}
/*  Descendant selector (3 classes) so these win over Bulma's own
 *  `.delete` rules (position:relative; display:inline-block) regardless
 *  of which stylesheet loads last.  */
.control.has-clear .yui-input-clear {
    position: absolute;
    top: 50%;
    right: 0.5em;
    transform: translateY(-50%);
    display: none;
    z-index: 4;
}
/*  `.is-visible` (JS-toggled) means "has content"; the ✕ only actually
 *  appears while the control also holds focus, so an edit form doesn't
 *  light up an ✕ on every filled field — only on the one being edited.  */
.control.has-clear:focus-within .yui-input-clear.is-visible {
    display: inline-block;
}