.label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip {
  --chip-horizontal-padding: calc(var(--twentycrm-spacing-multiplicator) * 1px);
  --chip-vertical-padding: calc(var(--twentycrm-spacing-multiplicator) * 1px);

  align-items: center;
  border-radius: var(--twentycrm-border-radius-sm);

  color: var(--twentycrm-font-color-secondary);

  display: inline-flex;
  justify-content: center;

  gap: calc(var(--twentycrm-spacing-multiplicator) * 1px);
  height: calc(var(--twentycrm-spacing-multiplicator) * 3px);

  max-width: calc(100% - var(--chip-horizontal-padding) * 2px);
  overflow: hidden;

  padding: var(--chip-vertical-padding) var(--chip-horizontal-padding);

  user-select: none;
}

.disabled {
  cursor: not-allowed;

  color: var(--twentycrm-font-color-light);

}

.clickable {
  cursor: pointer;
}

.accent-text-primary {
  color: var(--twentycrm-font-color-primary);
}

.accent-text-secondary {
  font-weight: var(--twentycrm-font-weight-medium);
}

.size-large {
  height: calc(var(--twentycrm-spacing-multiplicator) * 4px);
}

.variant-regular:hover {
  background-color: var(--twentycrm-background-transparent-light);
}

.variant-regular:active {
  background-color: var(--twentycrm-background-transparent-medium);
}

.variant-highlighted {
  background-color: var(--twentycrm-background-transparent-light);
}

.variant-highlighted:hover {
  background-color: var(--twentycrm-background-transparent-medium);
}

.variant-highlighted:active {
  background-color: var(--twentycrm-background-transparent-strong);
}

.variant-rounded {
  --chip-horizontal-padding: calc(var(--twentycrm-spacing-multiplicator) * 2px);
  --chip-vertical-padding: 1px;

  background-color: var(--twentycrm-background-transparent-light);
  border: 1px solid var(--twentycrm-border-color-medium);
  border-radius: 50px;
}

.variant-transparent {
  cursor: inherit;
}