/* @group @variables */

[class*="a-matters-required"] {
--matters-label-background-color: var(--color-primary);
}

[class*="a-matters-any"] {
--matters-label-background-color:hsla(220, 10%, 60%, 1);
}

/* @end @variables */

/* @group @a-matters-required */

[class*="a-matters"] {
align-self: center;
display: flex;
justify-content: center;
align-items: center;
min-width: 3rem;
max-width: 4.5rem;
height: 1.125rem;
margin-left: .375rem;
padding: 0 .1875rem;
background-color: var(--matters-label-background-color);
font-size: .625rem;
color: var(--color-white);
}

/* @end @a-matters-required */