@cbpds/web-components/dist/collection/components/cbp-chip/cbp-chip.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-chip-color-text: var(--cbp-color-text-lightest);
* @prop --cbp-chip-color-text-dark: var(--cbp-color-text-darker);
* @prop --cbp-chip-color-text-hover: var(--cbp-color-text-lightest);
* @prop --cbp-chip-color-text-hover-dark: var(--cbp-color-text-lightest);
* @prop --cbp-chip-color-text-focus: var(--cbp-color-text-lightest);
* @prop --cbp-chip-color-text-focus-dark: var(--cbp-color-text-darkest);
* @prop --cbp-chip-color-text-pressed: var(--cbp-color-text-lightest);
* @prop --cbp-chip-color-text-pressed-dark: var(--cbp-color-text-darkest);
* @prop --cbp-chip-color-background: var(--cbp-color-interactive-secondary-dark);
* @prop --cbp-chip-color-background-dark:  var(--cbp-color-interactive-secondary-lighter);
* @prop --cbp-chip-color-background-hover: var(--cbp-color-interactive-secondary-darker);
* @prop --cbp-chip-color-background-hover-dark:  var(--cbp-color-interactive-secondary-base);
* @prop --cbp-chip-color-background-focus: var(--cbp-color-interactive-focus-dark);
* @prop --cbp-chip-color-background-focus-dark: var(--cbp-color-interactive-focus-light);
* @prop --cbp-chip-icon-color-background-focus: transparent;
* @prop --cbp-chip-icon-color-background-focus-dark: var(--cbp-color-interactive-focus-dark);
* @prop --cbp-chip-color-background-pressed: var(--cbp-color-interactive-selected-dark);
* @prop --cbp-chip-color-background-pressed-dark: var(--cbp-color-interactive-focus-light); 
* @prop --cbp-chip-icon-color-outline-focus: var(--cbp-color-white);
* @prop --cbp-chip-icon-color-outline-focus-dark: transparent;
*/
:root {
  --cbp-chip-color-text: var(--cbp-color-text-lightest);
  --cbp-chip-color-text-dark: var(--cbp-color-text-darkest);
  --cbp-chip-color-text-hover: var(--cbp-color-text-lightest);
  --cbp-chip-color-text-hover-dark: var(--cbp-color-text-lightest);
  --cbp-chip-color-text-focus: var(--cbp-color-text-lightest);
  --cbp-chip-color-text-focus-dark: var(--cbp-color-text-darkest);
  --cbp-chip-color-text-pressed: var(--cbp-color-text-lightest);
  --cbp-chip-color-text-pressed-dark: var(--cbp-color-text-darkest);
  --cbp-chip-color-text-disabled: var(--cbp-color-interactive-disabled-light);
  --cbp-chip-color-text-disabled-dark: var(--cbp-color-interactive-disabled-dark);
  --cbp-chip-color-background: var(--cbp-color-interactive-secondary-dark);
  --cbp-chip-color-background-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-chip-color-background-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-chip-color-background-hover-dark: var(--cbp-color-interactive-secondary-base);
  --cbp-chip-color-background-focus: var(--cbp-color-interactive-focus-dark);
  --cbp-chip-color-background-focus-dark: var(--cbp-color-interactive-focus-light);
  --cbp-chip-icon-color-background-focus: transparent;
  --cbp-chip-icon-color-background-focus-dark: var(--cbp-color-interactive-focus-dark);
  --cbp-chip-color-background-pressed: var(--cbp-color-interactive-selected-dark);
  --cbp-chip-color-background-pressed-dark: var(--cbp-color-interactive-selected-light);
  --cbp-chip-color-background-disabled: var(--cbp-color-interactive-disabled-dark);
  --cbp-chip-color-background-disabled-dark: var(--cbp-color-interactive-disabled-light);
  --cbp-chip-icon-color-outline-focus: var(--cbp-color-white);
  --cbp-chip-icon-color-outline-focus-dark: transparent;
}

[data-cbp-theme=light] cbp-chip[context*=dark]:not([context=light-always]),
[data-cbp-theme=dark] cbp-chip:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-chip-color-text: var(--cbp-chip-color-text-dark);
  --cbp-chip-color-text-hover: var(--cbp-chip-color-text-hover-dark);
  --cbp-chip-color-text-focus: var(--cbp-chip-color-text-focus-dark);
  --cbp-chip-color-text-pressed: var(--cbp-chip-color-text-pressed-dark);
  --cbp-chip-color-text-disabled: var(--cbp-chip-color-text-disabled-dark);
  --cbp-chip-color-background: var(--cbp-chip-color-background-dark);
  --cbp-chip-color-background-hover: var(--cbp-chip-color-background-hover-dark);
  --cbp-chip-color-background-focus: var(--cbp-chip-color-background-focus-dark);
  --cbp-chip-icon-color-background-focus: var(--cbp-chip-icon-color-background-focus-dark);
  --cbp-chip-color-background-pressed: var(--cbp-chip-color-background-pressed-dark);
  --cbp-chip-color-background-disabled: var(--cbp-chip-color-background-disabled-dark);
  --cbp-chip-icon-color-outline-focus: var(--cbp-chip-icon-color-outline-focus-dark);
}

cbp-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0 0 0 var(--cbp-space-3x);
  color: var(--cbp-chip-color-text);
  background-color: var(--cbp-chip-color-background);
  border-width: 0;
  border-radius: var(--cbp-border-radius-pill);
  text-transform: uppercase;
  line-height: var(--cbp-space-7x);
  font-size: var(--cbp-font-size-subhead);
  font-weight: var(--cbp-font-weight-medium);
  max-width: 100%;
  white-space: nowrap;
}
cbp-chip button .cbp-chip__label {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
cbp-chip button .cbp-chip__label + cbp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--cbp-space-7x);
  min-height: var(--cbp-space-7x);
  border-width: 0;
  border-radius: var(--cbp-border-radius-pill);
  margin-left: 4px;
}
cbp-chip button .cbp-chip__label + cbp-icon svg {
  transition: var(--cbp-motion-duration-shortest);
}
cbp-chip button :last-child {
  --cbp-icon-size: var(--cbp-space-3x);
}
cbp-chip button[aria-pressed=true] {
  background-color: var(--cbp-chip-color-background-pressed);
  color: var(--cbp-chip-color-text-pressed);
}
cbp-chip button[aria-pressed=true] .cbp-chip__label + cbp-icon[name=plus] > svg {
  transform: rotate(-135deg);
}
cbp-chip button:hover:not(:disabled) {
  cursor: pointer;
}
cbp-chip button:hover:not(:disabled) .cbp-chip__label + cbp-icon {
  color: var(--cbp-chip-color-text-hover);
  background-color: var(--cbp-chip-color-background-hover);
}
cbp-chip button:focus-visible {
  background-color: var(--cbp-chip-color-background-focus);
  outline: 0;
}
cbp-chip button:focus-visible > .cbp-chip__label + cbp-icon {
  background-color: var(--cbp-chip-icon-color-background-focus);
  border-color: var(--cbp-color-white);
  border: var(--cbp-space-half-x) solid var(--cbp-chip-color-background-focus);
  outline: var(--cbp-border-size-md) solid var(--cbp-chip-icon-color-outline-focus);
  color: var(--cbp-color-text-lightest);
  outline-offset: -4px;
}
cbp-chip button:disabled {
  font-style: italic;
  background-color: var(--cbp-chip-color-background-disabled);
  color: var(--cbp-chip-color-text-disabled);
}