v4web-components/dist/collection/components/input/lab-ds-chip/lab-ds-chip.css

Stencil Component Starter

:host {
  display: block;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--lab-ds-semantic-selectable-space-padding-xs);
  gap: var(--lab-ds-semantic-selectable-space-gap-s);
  border-style: solid;
  border-width: var(--lab-ds-semantic-selectable-border-width-s);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-pill);
  border-color: var(--lab-ds-semantic-selectable-color-primary-default);
  background-color: var(--lab-ds-semantic-selectable-color-bg-default);

  pointer-events: none;
}

.chip .label {
  white-space: nowrap;
  font: var(--lab-ds-semantic-typography-body-none-decoration-p3-bold);
  color: var(--lab-ds-semantic-color-fg-default);
}

.chip .holder {
  cursor: pointer;
  pointer-events: all;
}

.chip.small {
  padding-top: var(--lab-ds-semantic-selectable-space-padding-none);
  padding-bottom: var(--lab-ds-semantic-selectable-space-padding-none);
  padding-left: var(--lab-ds-semantic-selectable-space-padding-s);
  padding-right: var(--lab-ds-semantic-selectable-space-padding-xs);
}

.chip.small.with-avatar {
  padding-left: var(--lab-ds-semantic-selectable-space-padding-xs);
  padding-right: var(--lab-ds-semantic-selectable-space-padding-xs);
}

.chip.medium {
  padding-left: var(--lab-ds-semantic-selectable-space-padding-s);
}

.chip.medium.with-avatar {
  padding-left: var(--lab-ds-semantic-selectable-space-padding-xs);
  padding-right: var(--lab-ds-semantic-selectable-space-padding-xs);
}

.chip:hover {
  border-color: var(--lab-ds-semantic-selectable-color-primary-hover);
  background-color: var(--lab-ds-semantic-selectable-color-bg-default);
}

.chip:hover .holder:hover {
  color: var(--lab-ds-semantic-color-fg-default);
}

.chip:focus-visible {
  outline: auto;
  outline-offset: 0.2rem;
  outline-width: var(--lab-ds-semantic-selectable-border-width-s);
  outline-color: var(--lab-ds-semantic-selectable-color-primary-focus);

  border-color: var(--lab-ds-semantic-selectable-color-primary-default);
  background-color: var(--lab-ds-semantic-selectable-color-bg-default);
}

.chip:focus-visible .holder {
  border-style: solid;
  border-width: var(--lab-ds-semantic-selectable-border-width-s);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xxs);
  color: var(--lab-ds-semantic-selectable-color-primary-focus);
}

.chip:active {
  border-color: var(--lab-ds-semantic-selectable-color-primary-press);
  background-color: var(--lab-ds-semantic-selectable-color-bg-default);
  outline: none;
}

.chip:active .holder:active {
  border: none;
  color: var(--lab-ds-semantic-selectable-color-primary-press);
}