@cbpds/web-components/dist/collection/components/cbp-badge/cbp-badge.css

Web components for the CBP Design System.

/* 
 * Caution: "global styles" get injected into every component and can cause file size bloat.
 * These should only include SASS variables and mixins that are not written out to CSS directly
 */
/**
* @prop --cbp-badge-color: var(--cbp-color-text-lightest);
* @prop --cbp-badge-color-dark: var(--cbp-color-text-darkest);
* @prop --cbp-badge-color-background: var(--cbp-color-info-base);
* @prop --cbp-badge-color-background-dark: var( --cbp-color-interactive-secondary-lighter); 
*/
:root {
  --cbp-badge-color: var(--cbp-color-text-lightest);
  --cbp-badge-color-dark: var(--cbp-color-info-darker);
  --cbp-badge-color-background: var(--cbp-color-info-base);
  --cbp-badge-color-background-dark: var( --cbp-color-interactive-secondary-lighter);
}

[data-cbp-theme=light] cbp-badge[context*=dark]:not([context=light-always]),
[data-cbp-theme=dark] cbp-badge:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-badge-color: var(--cbp-badge-color-dark);
  --cbp-badge-color-background: var(--cbp-badge-color-background-dark);
}

cbp-badge {
  display: inline-block;
  width: var(--cbp-space-6x);
  height: var(--cbp-space-6x);
  color: var(--cbp-badge-color);
  background-color: var(--cbp-badge-color-background);
  border-radius: var(--cbp-border-radius-pill);
  cursor: default;
  font-size: 0.625rem;
  font-weight: var(--cbp-font-weight-black);
  text-align: center;
  line-height: var(--cbp-space-6x);
}
cbp-badge[color=danger] {
  --cbp-badge-color-dark: var(--cbp-color-danger-darker);
  --cbp-badge-color-background: var(--cbp-color-danger-dark);
  --cbp-badge-color-background-dark: var(--cbp-color-danger-light);
}