/*
 * DESIGN SYSTEM PAGE UTILITIES. GENERATED, DO NOT EDIT.
 *
 * The style guide draws a chip per colour token, a bar per type step and a bar
 * per spacing step, and each of those needs a value that comes from the loop
 * rather than from a stylesheet. That used to be an inline style attribute,
 * which the site's own content security policy blocks: `style-src 'self'`
 * governs the style ATTRIBUTE as well as the style ELEMENT, so every one of
 * them was silently dropped in production while every local audit passed,
 * because the audit server was not sending the site's headers. It sends them
 * now, and these are real classes.
 *
 * Built v0.40.0-pre.
 */

.sw__chip--paper { background: var(--paper); }
.sw__chip--paper-2 { background: var(--paper-2); }
.sw__chip--surface { background: var(--surface); }
.sw__chip--rule { background: var(--rule); }
.sw__chip--rule-strong { background: var(--rule-strong); }
.sw__chip--ink { background: var(--ink); }
.sw__chip--ink-2 { background: var(--ink-2); }
.sw__chip--ink-3 { background: var(--ink-3); }
.sw__chip--accent { background: var(--accent); }
.sw__chip--accent-hov { background: var(--accent-hov); }
.sw__chip--accent-bg { background: var(--accent-bg); }
.sw__chip--on-accent { background: var(--on-accent); }
.sw__chip--accent-2 { background: var(--accent-2); }
.sw__chip--accent-2-bg { background: var(--accent-2-bg); }
.sw__chip--inverse-bg { background: var(--inverse-bg); }
.sw__chip--inverse-ink { background: var(--inverse-ink); }
.sw__chip--inverse-ink-2 { background: var(--inverse-ink-2); }
.sw__chip--inverse-rule { background: var(--inverse-rule); }
.sw__chip--inverse-accent { background: var(--inverse-accent); }
.sw__chip--inverse-accent-2 { background: var(--inverse-accent-2); }
.sw__chip--flag { background: var(--flag); }
.sw__chip--flag-bg { background: var(--flag-bg); }
.sw__chip--good { background: var(--good); }


.scale-bar--12 { width: 12%; }
.scale-bar--13 { width: 13%; }
.scale-bar--17 { width: 17%; }
.scale-bar--21 { width: 21%; }
.scale-bar--28 { width: 28%; }
.scale-bar--38 { width: 38%; }
.scale-bar--54 { width: 54%; }
.scale-bar--80 { width: 80%; }

.space-bar { height: .55rem; background: var(--accent); border-radius: 1px; }

.space-bar--1 { width: var(--s-1); }
.space-bar--2 { width: var(--s-2); }
.space-bar--3 { width: var(--s-3); }
.space-bar--4 { width: var(--s-4); }
.space-bar--5 { width: var(--s-5); }
.space-bar--6 { width: var(--s-6); }
.space-bar--7 { width: var(--s-7); }
.space-bar--8 { width: var(--s-8); }
.space-bar--9 { width: var(--s-9); }
.space-bar--10 { width: var(--s-10); }