/* Four-colour bar mark (StripeDivider sm, spec §4.5): h 4, gap 4, flex-1 rounded bars. */
/* direction: ltr, because the colour order is a brand mark (like the logo), it does not mirror in Arabic. */
.stripe { display: flex; direction: ltr; height: calc(var(--spacing) * 1); gap: calc(var(--spacing) * 1); }
.stripe__bar { flex: 1 1 0%; border-radius: var(--radius-full); }
.stripe__bar--red { background-color: var(--color-bar-red); }
.stripe__bar--yellow { background-color: var(--color-bar-yellow); }
.stripe__bar--blue { background-color: var(--color-bar-blue); }
.stripe__bar--green { background-color: var(--color-bar-green); }
.stripe--w16 { width: calc(var(--spacing) * 16); }
.stripe--w20 { width: calc(var(--spacing) * 20); }
.stripe--w24 { width: calc(var(--spacing) * 24); }
.stripe--wfull { width: 100%; }
.stripe--w16-20 { width: calc(var(--spacing) * 16); }
@media (min-width: 48rem) { .stripe--w16-20 { width: calc(var(--spacing) * 20); } }
.stripe--center { margin-inline: auto; }