/* ══════════════════════════════════════════════════════════════════════════════════════════════
   MwSelectControl (mw-sc-*) — the data-grid toolbar selection control.

   One control, two shapes: Chip folds the verbs behind a menu; Rail spells them out inline on the
   theme's edge glow. Box, counters, exit and menu are shared. The colour language is load-bearing:
   AMBER (--mud-palette-warning) = "you are selecting" and the visible ratio; VIOLET
   (--mud-palette-primary) = the out-of-sight part of the selection the filter hides.

   Edge glow follows docs/plans/mitware-theme/edge-glow-and-tail-corner.md (production ancestor
   mw-chat.css / mw-switch-group.css): a corner-anchored radial glow toward the bottom-left tail
   corner, hairline base, soft bloom offset down — the top edge never glows.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* The rail category colour, registered so it can animate/inherit cleanly. */
@property --mw-sc-rail {
    syntax: '<color>';
    inherits: true;
    initial-value: transparent;
}

.mw-sc {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    font-family: var(--mud-typography-default-family);
}

/* MudTooltip wraps the box, counters and exit — keep those wrappers transparent to the flex row.
   Descendant (not child) so it covers the wrappers now nested inside the reveal cluster too; the
   menu popover is portaled outside .mw-sc, so it is never matched. */
.mw-sc .mud-tooltip-root {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

/* The reveal drawer — the counters/verbs/menu/exit cluster GLIDES open and closed rather than
   popping in. A CSS grid 0fr→1fr animates the inner's true content width (the same technique the
   data grid's filter panel uses), so the control moves open to exactly its content width and back,
   never snapping to full width. The inner clips itself so nothing spills while collapsed. */
.mw-sc-reveal {
    display: grid;
    grid-template-columns: 0fr;
    opacity: 0;
    transition:
        grid-template-columns .28s cubic-bezier(.32, .72, 0, 1),
        opacity .2s ease;
}

.mw-sc--on .mw-sc-reveal {
    grid-template-columns: 1fr;
    opacity: 1;
}

.mw-sc-reveal-inner {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    /* A hair of left shift while collapsed makes the open read as a move OUT of the box, not just a widen. */
    transform: translateX(-5px);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
}

.mw-sc--on .mw-sc-reveal-inner {
    transform: none;
}

/* Collapsed, the cluster is inert — its buttons must not be tabbable or hoverable behind the clip. */
.mw-sc:not(.mw-sc--on) .mw-sc-reveal-inner {
    pointer-events: none;
}

/* ── shared parts ─────────────────────────────────────────────────────────────────────────────── */

.mw-sc button {
    border: none;
    background: none;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.mw-sc button:disabled {
    opacity: .35;
    pointer-events: none;
}

/* the box — the shared symbol, a checkbox that mirrors the grid header */
.mw-sc-box {
    width: 34px;
    height: 32px;
    flex: 0 0 auto;
}

.mw-sc-glyph {
    width: 17px;
    height: 17px;
    border-radius: 5px;
    border: 1.5px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-background);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-warning-text);
    transition: background .15s, border-color .15s;
}

.mw-sc-glyph .mud-icon-root {
    font-size: 12px;
}

.mw-sc--on .mw-sc-glyph {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 70%, transparent);
}

.mw-sc--all .mw-sc-glyph,
.mw-sc--some .mw-sc-glyph {
    background: var(--mud-palette-warning);
    border-color: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
}

/* counters — mono meta */
.mw-sc-cnt {
    display: inline-flex;
    align-items: center;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    padding: 0 4px 0 5px;
    cursor: default;
}

.mw-sc-cnt > b {
    color: var(--mud-palette-warning);
    font-weight: 600;
}

.mw-sc-cnt--zero > b {
    color: var(--mud-palette-text-secondary);
}

/* the out-of-sight token — violet, "what you don't see" */
.mw-sc-hid {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 5px;
    padding: 1px 5px 1px 4px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    animation: mw-sc-hidpop .26s cubic-bezier(.3, .7, .2, 1.4);
}

.mw-sc-hid .mud-icon-root {
    font-size: 11px;
    color: color-mix(in srgb, var(--mud-palette-primary) 80%, var(--mud-palette-text-primary));
}

.mw-sc-hid > b {
    font-size: 10px;
    font-weight: 600;
    color: color-mix(in srgb, var(--mud-palette-primary) 78%, var(--mud-palette-text-primary));
}

@keyframes mw-sc-hidpop {
    from { transform: scale(.6); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* the caret + its menu zone */
.mw-sc-menuzone {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.mw-sc-caret {
    width: 20px;
    height: 26px;
}

.mw-sc-caret .mud-icon-root {
    font-size: 15px;
}

.mw-sc-caret:hover {
    background: color-mix(in srgb, var(--mud-palette-action-default) 8%, transparent);
    border-radius: 6px;
}

/* the exit — its own zone, red on hover */
.mw-sc-x {
    width: 26px;
    height: 26px;
    color: var(--mud-palette-text-disabled);
    flex: 0 0 auto;
}

.mw-sc-x .mud-icon-root {
    font-size: 14px;
}

.mw-sc-x:hover {
    background: color-mix(in srgb, var(--mud-palette-error) 16%, transparent);
    color: var(--mud-palette-error);
    border-radius: 7px;
}

/* menu header for the out-of-sight block */
.mw-sc-menu-hdr {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 9px;
    color: var(--mud-palette-text-disabled);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 9px 3px;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   FORM: CHIP — one bordered pill, verbs behind the caret. Tail corner bottom-left.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.mw-sc--chip {
    height: 32px;
    border-radius: 11px;
    border-bottom-left-radius: 3px;
    border: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    padding: 0 1px;
    transition: border-color .2s, background .2s;
}

.mw-sc--chip.mw-sc--on {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 50%, transparent);
    background: color-mix(in srgb, var(--mud-palette-warning) 7%, transparent);
}

.mw-sc--chip .mw-sc-x {
    border-left: 1px solid color-mix(in srgb, var(--mud-palette-warning) 28%, transparent);
    border-radius: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   FORM: RAIL — verbs inline on the edge glow. The 4-layer recipe; tail corner bottom-left.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.mw-sc--rail {
    --mw-sc-rail: transparent;
    height: 32px;
    padding: 0 2px;
    border-radius: 11px;
    border-bottom-left-radius: 3px;
    border: 1.5px solid transparent;
    background:
        linear-gradient(var(--mud-palette-surface), var(--mud-palette-surface)) padding-box,
        radial-gradient(135% 125% at 0% 100%,
            color-mix(in srgb, var(--mw-sc-rail) 80%, transparent) 0%,
            color-mix(in srgb, var(--mw-sc-rail) 45%, transparent) 40%,
            transparent 72%) border-box,
        linear-gradient(var(--mud-palette-lines-inputs), var(--mud-palette-lines-inputs)) border-box;
    box-shadow: -3px 2px 9px -8px color-mix(in srgb, var(--mw-sc-rail) 65%, transparent);
    transition: box-shadow .3s;
}

.mw-sc--rail.mw-sc--on {
    --mw-sc-rail: var(--mud-palette-warning);
}

.mw-sc-div {
    width: 1px;
    height: 15px;
    background: var(--mud-palette-lines-inputs);
    flex: 0 0 auto;
    margin: 0 2px;
}

/* Rail inline verb — an icon button (invert), the one filtered quick-select the box can't express. */
.mw-sc-verb-ic {
    width: 28px;
    height: 26px;
    border-radius: 7px;
    flex: 0 0 auto;
}

.mw-sc-verb-ic .mud-icon-root {
    font-size: 15px;
}

.mw-sc-verb-ic:hover:not(:disabled) {
    background: color-mix(in srgb, var(--mud-palette-action-default) 10%, transparent);
    color: var(--mud-palette-text-primary);
}

.mw-sc--rail .mw-sc-x {
    border-left: 1px solid color-mix(in srgb, var(--mud-palette-warning) 28%, transparent);
    border-radius: 0;
    margin-left: 2px;
}