@spaced-out/ui-design-system/lib/components/Badge/Badge.module.css

Sense UI components library

@value (size12, size22, size100) from '../../styles/variables/_size.css';
@value (spaceXSmall, spaceNone) from '../../styles/variables/_space.css';
@value (colorGrayLightest, colorTextInversePrimary, colorTextPrimary) from '../../styles/variables/_color.css';

.badgeWrapper {
  --wrapperBgColor: colorGrayLightest;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: size100;
  height: size22;
  padding: spaceNone spaceXSmall;
  min-width: fit-content;
  width: fit-content;
  background-color: var(--wrapperBgColor);
  color: colorTextInversePrimary;
}

.iconContainer {
  height: initial;
  padding: calc(size12 / 4);
}

.dark {
  color: colorTextInversePrimary;
}

.light {
  color: colorTextPrimary;
}

.fixedWidth {
  padding: initial;
  width: size22;
  height: size22;
  min-width: size22;
  min-height: size22;
}