/* IDSolutions icon style, using the local Tabler outline collection. */
:root {--icon-size:24px;--icon-size-small:16px;--icon-size-large:32px;--icon-stroke:1.7}

.icon {display:inline-block;width:var(--icon-size);height:var(--icon-size);flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}

[data-icon]:not(button):not(a) {display:inline-flex;align-items:center;justify-content:center;gap:8px;vertical-align:middle}

/* Metadata is compact; interactive controls always use the 24px default. */
:is(.breadcrumb, .period-chip, .chart-summary, .badge, .message-kind,
    .hero-note, .scene-topline, .hub-tools, .scene-caption, .check-list,
    .code-footnote, .product-footer__external) .icon {width:var(--icon-size-small);height:var(--icon-size-small)}

:is(.chart-empty, .empty) .icon {width:var(--icon-size-large);height:var(--icon-size-large)}

/* Inline SVG inherits text color; it does not obscure the native select. */
.select-control {position:relative;display:grid;grid-template-columns:minmax(0, 1fr);align-items:center;width:100%;min-width:0;color:var(--ink)}
.select-control > select,
.select-control > .icon {grid-area:1 / 1}
.select-control > select {appearance:none;width:100%;margin:0;padding-inline-end:44px}
.select-control > .icon {justify-self:end;margin-inline-end:12px;pointer-events:none}
.select-control:has(select:disabled) {color:var(--muted)}
label .select-control {margin-top:7px}
td .select-control {width:115px}

/* The check uses the same Tabler geometry and the control's text color. */
input[type=checkbox] {display:inline-grid;place-items:center}
input[type=checkbox]::after {content:'';width:var(--icon-size-small);height:var(--icon-size-small);background-color:currentColor;mask:url('/static/icons/check.svg?v=2.5.3') center / contain no-repeat;-webkit-mask:url('/static/icons/check.svg?v=2.5.3') center / contain no-repeat;visibility:hidden}
input[type=checkbox]:checked::after {visibility:visible}