@cbpds/web-components/dist/collection/components/cbp-tag/cbp-tag.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-tag-color: var(--cbp-color-text-lighter);
* @prop --cbp-tag-color-dark: var(--cbp-color-info-darker);
* @prop --cbp-tag-color-background: var(--cbp-color-info-dark);
* @prop --cbp-tag-color-background-dark: var(--cbp-color-info-light);
*/
:root {
  --cbp-tag-color: var(--cbp-color-info-lighter);
  --cbp-tag-color-dark: var(--cbp-color-info-darker);
  --cbp-tag-color-background: var(--cbp-color-info-dark);
  --cbp-tag-color-background-dark: var(--cbp-color-info-light);
}

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

cbp-tag {
  display: inline-flex;
  gap: var(--cbp-space-1x);
  align-items: center;
  color: var(--cbp-tag-color);
  background-color: var(--cbp-tag-color-background);
  border-radius: var(--cbp-border-radius-pill);
  cursor: default;
  padding: 0 var(--cbp-space-3x);
  text-align: center;
  font-weight: var(--cbp-font-weight-medium);
  font-size: var(--cbp-font-size-subhead);
  line-height: var(--cbp-space-7x);
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
cbp-tag[color=warning] {
  --cbp-tag-color: var(--cbp-color-text-darker);
  --cbp-tag-color-dark: var(--cbp-color-text-darker);
  --cbp-tag-color-background: var(--cbp-color-warning-base);
  --cbp-tag-color-background-dark: var(--cbp-color-warning-light);
}
cbp-tag[color=success] {
  --cbp-tag-color: var(--cbp-color-success-lighter);
  --cbp-tag-color-dark: var(--cbp-color-success-dark);
  --cbp-tag-color-background: var(--cbp-color-success-dark);
  --cbp-tag-color-background-dark: var(--cbp-color-success-lighter);
}
cbp-tag[color=danger] {
  --cbp-tag-color: var(--cbp-color-text-lightest);
  --cbp-tag-color-dark: var(--cbp-color-text-darkest);
  --cbp-tag-color-background: var(--cbp-color-danger-dark);
  --cbp-tag-color-background-dark: var(--cbp-color-danger-light);
}