@scope(.score-bar) to (:scope [data-ui-scope]){:where(:scope).score-bar{border-radius:var(--radius-sm);width:100%;height:18px;display:block;position:relative;overflow:hidden}:where(:scope).score-bar--compact{border-radius:var(--radius-pill);height:9px}:where(:scope).score-bar--diverging{background:linear-gradient(90deg, color-mix(in srgb, var(--danger) 8%, var(--surface-soft)) 0 50%, color-mix(in srgb, var(--good) 8%, var(--surface-soft)) 50% 100%)}.score-bar__graphic{width:100%;height:100%;display:block}.score-bar__negative{fill:var(--danger)}.score-bar__positive{fill:var(--good)}.score-bar__center{fill:var(--ink);opacity:.7}:where(:scope).score-bar--magnitude{background:var(--line);color:var(--unknown)}.score-bar__magnitude{fill:currentColor}:where(:scope).score-bar--positive{color:var(--good)}:where(:scope).score-bar--negative{color:var(--danger)}:where(:scope).score-bar--base{color:var(--leaf)}:where(:scope).score-bar--comparison{color:var(--unknown)}:where(:scope).score-bar--coverage{color:var(--warn)}}