.scale-bar{gap:var(--space-2);inline-size:calc(var(--scale-bar-m) * 10em);display:grid}.scale-bar--m25{--scale-bar-m:.25}.scale-bar--m50{--scale-bar-m:.5}.scale-bar--m100{--scale-bar-m:1}.scale-bar--m200{--scale-bar-m:2}.scale-bar--m300{--scale-bar-m:3}.scale-bar--m500{--scale-bar-m:5}.scale-bar--m1000{--scale-bar-m:10}.scale-bar--m1300{--scale-bar-m:13}.scale-bar__track{border:var(--border-thin) solid var(--ink);block-size:.5rem;display:flex;position:relative}.scale-bar__segment{flex:1}.scale-bar__segment--filled{background:var(--ink)}.scale-bar__datum{block-size:1.125rem;inline-size:1.125rem;fill:var(--draw-datum);stroke:none;margin-block-start:-.5625rem;margin-inline-start:-.5625rem;position:absolute;inset-block-start:50%;inset-inline-start:0;overflow:visible}.scale-bar__ticks{white-space:nowrap;justify-content:space-between;padding:0;list-style:none;display:flex}.scale-bar__tick{justify-content:center;inline-size:0;display:flex}.scale-bar__tick:first-child{visibility:hidden}.scale-bar__tick:last-child{justify-content:flex-end}@media (width<=47.99em){.scale-bar--sparse .scale-bar__tick--odd,.scale-bar--sparse .scale-bar__tick:nth-last-child(2){visibility:hidden}}@media (forced-colors:active){.scale-bar__segment--filled{background:canvastext}.scale-bar__datum{fill:canvastext}}