/* Hairline figures on the overview cards: ECO colours and the card-sized stage. The figure marks its parts with data-part; this file paints them from tokens. */
[data-hairline] {
  --hl-plate: var(--color-background-primary, #ffffff);
  --hl-hi: var(--color-surface-100, #000000);
  --hl-edge: var(--color-surface-40, #939595);
  --hl-mid: var(--color-surface-20, #cccccc);
  --hl-lo: var(--color-border-primary, #e5e5e5);
}
[data-hairline] [data-part="ink"], [data-hairline] [data-part="ink-top"], [data-hairline] [data-part="label"] { fill: var(--color-surface-100, #000000); }
[data-hairline] path.m[data-part="ink-top"] { fill: var(--color-surface-90, #222222); } /* hover */
[data-hairline] [data-part="cursor"] { fill: var(--color-surface-100, #000000); }
/* switch figure: slot floor and far wall */
[data-hairline] [data-part="track"] { fill: var(--color-surface-20, #cccccc); }
[data-hairline] [data-part="track"][data-hover] { fill: var(--color-surface-15, #d9d9d9); }
[data-hairline="switch"] [data-part="ink"] { fill: var(--color-surface-success-default, #248616); } /* on (Button's ink stays black) */
[data-hairline="switch"] [data-part="ink"][data-hover] { fill: #71b790; } /* no token (see eco-switch flag) */
[data-hairline] [data-part="track-wall"] { fill: color-mix(in srgb, var(--color-surface-20, #cccccc), #000 22%); }
[data-hairline] [data-part="track-wall"][data-hover] { fill: color-mix(in srgb, var(--color-surface-15, #d9d9d9), #000 22%); }
[data-hairline] [data-part="ink-wall"] { fill: color-mix(in srgb, var(--color-surface-success-default, #248616), #000 30%); }
[data-hairline] [data-part="ink-wall"][data-hover] { fill: color-mix(in srgb, #71b790, #000 30%); }

/* the card's stage: 5:4, drawn larger than the card visual and centred on the figure; the visual crops the rest */
.ds-card__visual--hairline { padding: 0; }
.ds-card__visual--hairline [data-hairline-card] { flex: none; width: 300px; transform: translateY(-16px); }
/* per-figure vertical centring (the figures' drawn extents differ) */
.ds-card__visual--hairline [data-hairline-card="switch"] { transform: translateY(-5px); }
.ds-card__visual--hairline [data-hairline-card="range"] { transform: translateY(-4px); }

.ds-card__visual--hairline { position: relative; }
/* radio figure: white wells, black dot */
[data-hairline="radio"] [data-part="track"] { fill: var(--color-surface-raised-primary, #ffffff); }
[data-hairline="radio"] [data-part="track"][data-hover] { fill: var(--color-surface-raised-secondary, #f4f4f4); }
[data-hairline="radio"] [data-part="track-wall"] { fill: color-mix(in srgb, var(--color-surface-20, #cccccc), #fff 40%); }
[data-hairline="radio"] [data-part="track-wall"][data-hover] { fill: color-mix(in srgb, var(--color-surface-15, #d9d9d9), #fff 40%); }
[data-hairline="radio"] [data-part="mark"] { fill: var(--color-surface-100, #000000); }
.ds-card__visual--hairline [data-hairline-card="radio"] { transform: translateY(-4px); }

/* checkbox figure: white box with grey edge, black when checked/mixed, white tick */
[data-hairline="checkbox"] [data-part="track"] { fill: var(--color-surface-raised-primary, #ffffff); }
[data-hairline="checkbox"] [data-part="track"][data-hover] { fill: var(--color-surface-raised-secondary, #f4f4f4); }
[data-hairline="checkbox"] [data-part="ink"] { fill: var(--color-surface-100, #000000); }
[data-hairline="checkbox"] [data-part="ink"][data-hover] { fill: var(--color-surface-50, #737373); }
[data-hairline="checkbox"] [data-part="track-wall"] { fill: color-mix(in srgb, var(--color-surface-20, #cccccc), #fff 40%); }
[data-hairline="checkbox"] [data-part="track-wall"][data-hover] { fill: color-mix(in srgb, var(--color-surface-15, #d9d9d9), #fff 40%); }
[data-hairline="checkbox"] [data-part="ink-wall"] { fill: color-mix(in srgb, var(--color-surface-100, #000000), #fff 25%); }
[data-hairline="checkbox"] [data-part="ink-wall"][data-hover] { fill: color-mix(in srgb, var(--color-surface-50, #737373), #000 25%); }
[data-hairline="checkbox"] [data-part="mark"] { fill: #ffffff; }
.ds-card__visual--hairline [data-hairline-card="checkbox"] { transform: translateY(-4px); }

/* select figure: label bars and chevron */
[data-hairline="select"] [data-part="bar"] { fill: var(--color-text-tertiary, #737373); }
[data-hairline="select"] [data-part="bar-on"], [data-hairline="select"] [data-part="chev"] { fill: var(--color-text-primary, #000000); }
.ds-card__visual--hairline [data-hairline-card="select"] { transform: translateY(-4px); }
[data-hairline="select"] [data-part="rowhi"] { fill: var(--color-surface-5, #f2f2f2); }
/* the menu fades in and out with its unfold (the figure only sets data-open) */
[data-hairline="select"] [data-part="menu"] { opacity: 0; transition: opacity var(--duration-medium-2, 300ms) var(--ease-standard, cubic-bezier(.35, 0, .35, 1)); }
[data-hairline="select"] [data-part="menu"][data-open] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { [data-hairline="select"] [data-part="menu"] { transition: none; } }

/* input figure: label/value black, placeholder and hint grey */
[data-hairline] [data-part="ph"], [data-hairline] [data-part="hint"] { fill: var(--color-surface-50, #737373); }
.ds-card__visual--hairline [data-hairline-card="input"] { transform: translateY(-4px); }
[data-hairline="input"] [data-part="track-wall"] { fill: color-mix(in srgb, var(--color-background-primary, #ffffff), #000 7%); } /* far wall of the recessed field: a faint shade, the edges carry the depth */
/* range figure: title, value, step labels, track, thumb, hover halo */
[data-hairline] [data-part="title"] { fill: var(--color-text-secondary, #4d4d4d); }
[data-hairline] [data-part="value"], [data-hairline] [data-part="tick-on"] { fill: var(--color-text-primary, #000000); }
[data-hairline] [data-part="tick"] { fill: var(--color-text-tertiary, #737373); }
[data-hairline] [data-part="line"] { fill: var(--color-border-primary, #e5e5e5); }
[data-hairline] [data-part="thumb"] { fill: var(--color-surface-100, #000000); }
[data-hairline] [data-part="halo"] { fill: none; }
[data-hairline] [data-part="halo"][data-hover] { fill: var(--color-surface-opacity-black-12, rgba(0, 0, 0, 0.12)); }