/*
 * esop-resizable.css — sizing behavior for the <esop-resizable> web component and the
 * matching .esop-resizable utility class.
 *
 * Two modes (see esop-resizable.js + the ResizableViewComponent):
 *   "user"    — the user drags the native resize grip; the box is bounded by its parent
 *               (default, via max-width:100%) or by an explicit max-width / max-height.
 *   "content" — the content determines the height; the box is collapsed to an initial cap
 *               and can be dragged up to the content's natural height (max-height:max-content).
 *
 * The bare <esop-resizable> tag selector applies the base behavior even before the custom
 * element upgrades, so there is never a flash of non-resizable content. Plain elements can
 * opt in with class="esop-resizable" when a web component is overkill.
 *
 * When CSS @layer infrastructure lands (P2 of UI Framework Modernization Plan), wrap these
 * rules in @layer components.
 */

esop-resizable,
.esop-resizable {
    display: block;
    box-sizing: border-box;
    overflow: auto;                                  /* required for `resize` to render a grip */
    resize: var(--esop-resize-axis, both);
    min-width:  var(--esop-resize-min-w, 0);
    min-height: var(--esop-resize-min-h, 0);
    max-width:  var(--esop-resize-max-w, 100%);      /* default ceiling = parent's content width */
    max-height: var(--esop-resize-max-h, none);
}

/* --- Axis variants (also settable directly via --esop-resize-axis) --------- */
.esop-resizable--vertical   { --esop-resize-axis: vertical; }
.esop-resizable--horizontal { --esop-resize-axis: horizontal; }
.esop-resizable--both       { --esop-resize-axis: both; }
.esop-resizable--none       { --esop-resize-axis: none; }

/*
 * --- Content mode ----------------------------------------------------------
 * The content's natural height is the resize ceiling, so the user can never drag
 * past the content into empty space. esop-resizable.js sets the *initial* height to
 * the collapsed-height cap when the content is taller than it.
 */
.esop-resizable--content {
    --esop-resize-axis: vertical;
    max-height: var(--esop-resize-max-h, max-content);
}