src/components/Tag/Tag.module.scss
@import '../global.module';
.this {
--text-color-primary: var(--colour-neutral-lightest);
--text-color-secondary: var(--colour-primary-darkest);
--text-color-tertiary: var(--colour-neutral-darkest);
--text-color-danger: var(--colour-danger-darkest);
--background-color-primary: var(--colour-primary-darkest);
--background-color-secondary: var(--colour-neutral-lightest);
--background-color-tertiary: var(--colour-neutral-lightest);
--background-color-danger: var(--colour-neutral-lightest);
--border-color-primary: var(--colour-primary-darkest);
--border-color-secondary: var(--colour-primary-dark);
--border-color-tertiary: var(--colour-neutral-dark);
--border-color-danger: var(--colour-danger-dark);
display: inline-flex;
text-align: center;
border-style: solid;
border-radius: var(--border-radius-roundest);
border-width: var(--border-width-thinnest);
.children {
border-radius: inherit;
}
@each $level in $levels {
&.level-#{$level} {
color: var(--text-color-#{$level});
background-color: var(--background-color-#{$level});
border-color: var(--border-color-#{$level});
}
}
}