/*
 * shared/controls.css — ONE control vocabulary for the space-editing webviews
 * (toolbar, view controls, context menu). Import AFTER design-tokens.css and
 * scaling.css.
 *
 * Before this file each webview page rolled its own button classes
 * (.action-button, .vc-btn, .icon-button), so square-ness, radius, hover, and
 * shadow drifted apart across surfaces (AB#4427 QA findings 1,3,5,6,8). This
 * gives all three pages a single definition with Figma-style SIZE VARIANTS:
 *   --ctl-size-s = 36px  (Figma "Small"  — menu / hamburger / segmented)
 *   --ctl-size-m = 48px  (Figma "Medium" — primary action, e.g. undo/redo)
 * Both track --ui-scale through the underlying scaling.css tokens.
 *
 * Flat icon buttons are SQUARE by construction (width == height == size), so a
 * flat button is identical on every surface — there is no longer an ad-hoc
 * "less wide than tall" variant (answers the reuse question / finding 6).
 */

:root {
    /* Figma-style size variants. */
    --ctl-size-s: var(--ctl-height-menu);   /* 36 */
    --ctl-size-m: var(--ctl-height);         /* 48 */

    /* ONE window/pill radius + ONE elevation, shared by every surface so the
       corner radius and shadow are identical everywhere (findings 3, 8). */
    --ctl-surface-radius: var(--ctl-radius); /* 12 */
    --ctl-elevation:
        0 calc(1px * var(--ui-scale)) calc(3px * var(--ui-scale)) rgba(0, 0, 0, 0.12),
        0 calc(1px * var(--ui-scale)) calc(2px * var(--ui-scale)) rgba(0, 0, 0, 0.08);
    /* Raised (elevated) control — the toolbar menu button sits above the pill. */
    --ctl-elevation-raised:
        0 calc(4px * var(--ui-scale)) calc(8px * var(--ui-scale)) calc(3px * var(--ui-scale)) rgba(0, 0, 0, 0.15),
        0 calc(1px * var(--ui-scale)) calc(3px * var(--ui-scale)) rgba(0, 0, 0, 0.30);

    /* Flat-button state layer, inset a few px so the hover/press highlight never
       reaches the surface edge (finding 5). */
    --ctl-hover-inset: calc(3px * var(--ui-scale));
    --ctl-hover-bg:   rgba(var(--mdui-color-on-surface), 0.08);
    --ctl-pressed-bg: rgba(var(--mdui-color-on-surface), 0.12);
}

/* ---- Surface: the rounded pill/frame a webview sits in (uniform radius + shadow). ---- */
.hc-surface {
    border-radius: var(--ctl-surface-radius);
    box-shadow: var(--ctl-elevation);
}

/* ---- Flat square icon button ---- */
.hc-icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--ctl-size-m);
    height: var(--ctl-size-m);
    padding: 0;
    border: none;
    border-radius: var(--ctl-surface-radius);
    background: transparent;   /* flat: no container until interacted */
    color: rgb(var(--mdui-color-on-surface));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.hc-icon-btn--s { width: var(--ctl-size-s); height: var(--ctl-size-s); }
.hc-icon-btn--m { width: var(--ctl-size-m); height: var(--ctl-size-m); }

/* Inset hover/press state layer (finding 5) — a pseudo-element so it never
   changes the button's box or the icon centring. The corner radius is the SMALL
   token (8px), NOT the button's own 12px: on the smaller Small buttons (36px)
   a 12px radius on the inset 30px layer left only ~6px of flat edge and read as
   a circle; 8px keeps a clear rounded-rectangle at both sizes (AB#4427 QA
   finding 2). */
.hc-icon-btn::before {
    content: "";
    position: absolute;
    inset: var(--ctl-hover-inset);
    border-radius: var(--ctl-radius-small);
    background: transparent;
    transition: background 0.15s ease;
    pointer-events: none;
}

.hc-icon-btn:hover:not(:disabled)::before  { background: var(--ctl-hover-bg); }
.hc-icon-btn:active:not(:disabled)::before { background: var(--ctl-pressed-bg); }

/* Disabled: keep the element hit-testable — pointer-events:none would make it
   invisible to elementFromPoint and kill its tooltip (shared/tooltip.js). */
.hc-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Raised variant — a low control lifted above the surface (toolbar menu button). */
.hc-icon-btn--raised {
    background: rgb(var(--mdui-color-surface));
    box-shadow: var(--ctl-elevation-raised);
}

/* A raised button IS a visible container, so its hover/press state layer FILLS
   the whole button (flush, following the button's own 12px radius) rather than
   sitting inset like the flat buttons — an inset layer read as a small square
   floating inside the raised surface (AB#4427 QA finding 1). */
.hc-icon-btn--raised::before {
    inset: 0;
    border-radius: inherit;
}

/* Default glyph size; a page may override for a differently-inset viewBox. */
.hc-icon-btn svg { width: var(--icon-size); height: var(--icon-size); }

/* ---- Segmented toggle (stadium ends, like the mdui segmented buttons in
   settings). Size Small, sits inset in a Medium pill (finding 1 round). ---- */
.hc-segmented {
    display: flex;
    align-items: stretch;
    height: var(--ctl-size-s);
    border-radius: var(--mdui-shape-corner-full);
    overflow: hidden;
    flex-shrink: 0;
}

/* ---- Focus ring, shared. ---- */
.hc-icon-btn:focus-visible,
.hc-segmented :focus-visible {
    outline: var(--ui-gap-small) solid rgb(var(--mdui-color-on-surface));
    outline-offset: var(--ui-gap-small);
}

@media (prefers-reduced-motion: reduce) {
    .hc-icon-btn::before { transition: none; }
}