v4web-components

Version:
Stencil Component Starter
108 lines (90 loc) • 4.05 kB
CSS
.filter-chip {
  display: flex;
  align-items: center;
  border-style: solid;
  gap: var(--lab-ds-semantic-selectable-space-gap-s);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-pill);
  border-width: var(--lab-ds-semantic-selectable-border-width-s);
  color: var(--lab-ds-semantic-color-fg-default);
  border-color: var(--lab-ds-semantic-selectable-color-border-default);
  background-color: var(--lab-ds-semantic-selectable-color-bg-default);
}

.filter-chip .holder {
  display: flex;
}

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

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

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

.filter-chip.small .label {
  font: var(--lab-ds-semantic-typography-body-none-decoration-p3-bold);
}

.filter-chip.medium {
  padding-top: var(--lab-ds-semantic-selectable-space-padding-s);
  padding-bottom: var(--lab-ds-semantic-selectable-space-padding-s);
  padding-right: var(--lab-ds-semantic-selectable-space-padding-m);
  padding-left: var(--lab-ds-semantic-selectable-space-padding-m);
}

.filter-chip.medium .label {
  font: var(--lab-ds-semantic-typography-body-none-decoration-p3-bold);
}

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

.filter-chip.small.selected .label {
  font: var(--lab-ds-semantic-typography-body-none-decoration-p4-bold);
}

.filter-chip.medium.selected {
  padding-top: var(--lab-ds-semantic-selectable-space-padding-s);
  padding-bottom: var(--lab-ds-semantic-selectable-space-padding-s);
  padding-right: var(--lab-ds-semantic-selectable-space-padding-s);
  padding-left: var(--lab-ds-semantic-selectable-space-padding-m);
}

.filter-chip.medium.selected .label {
  font: var(--lab-ds-semantic-typography-body-none-decoration-p3-bold);
}

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

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

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

.filter-chip:disabled {
  border-color: var(--lab-ds-semantic-selectable-color-border-disabled);
  background-color: var(--lab-ds-semantic-selectable-color-bg-disabled);
  opacity: var(--lab-ds-core-opacity-80);
}

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

.filter-chip.selected:disabled {
  border-color: var(--lab-ds-semantic-selectable-color-border-default);
  background-color: var(--lab-ds-semantic-selectable-color-primary-default);
  color: var(--lab-ds-semantic-selectable-color-bg-disabled);
  opacity: var(--lab-ds-core-opacity-80);
}