.chip {
  --chip-horizontal-padding: var(--t-spacing-1);
  --chip-vertical-padding: var(--t-spacing-1);

  // Height and max-width are sized against the content box.
  box-sizing: content-box;
  text-decoration: none;
  align-items: center;
  cursor: inherit;
  display: inline-flex;
  justify-content: flex-start;
  gap: var(--t-spacing-1);
  max-width: 100%;
  overflow: hidden;
  padding: var(--chip-vertical-padding) var(--chip-horizontal-padding);
  user-select: none;
  font-weight: inherit;
  background-color: inherit;
  border: none;
  border-radius: var(--t-border-radius-sm-round);
  corner-shape: round;

  & > svg {
    flex-shrink: 0;
  }
}

.sizeLarge {
  height: var(--t-spacing-4);
}

.sizeSmall {
  height: var(--t-spacing-3);
}

.accentTextPrimary {
  color: var(--t-font-color-primary);
}

.accentTextSecondary {
  color: var(--t-font-color-secondary);
}

// Disabled color wins over accent colors, matching the Linaria ternary order.
.disabled {
  color: var(--t-font-color-light);
}

.fontMedium {
  font-weight: var(--t-font-weight-medium);
}

.cursorPointer {
  cursor: pointer;
}

.cursorNotAllowed {
  cursor: not-allowed;
}

.backgroundHighlighted {
  background-color: var(--t-background-transparent-light);

  &:hover {
    background-color: var(--t-background-transparent-medium);
  }

  &:active {
    background-color: var(--t-background-transparent-strong);
  }
}

.backgroundStatic {
  background-color: var(--t-background-transparent-light);

  &:hover {
    background-color: var(--t-background-transparent-light);
  }

  &:active {
    background-color: var(--t-background-transparent-light);
  }
}

// Applied only when variant is regular, clickable and not disabled.
.interactiveRegular {
  &:hover {
    background-color: var(--t-background-transparent-light);
  }

  &:active {
    background-color: var(--t-background-transparent-medium);
  }
}

.hasMaxWidth {
  max-width: calc(var(--chip-max-width) - 2 * var(--chip-horizontal-padding));
}

.paddingLeftNone {
  padding-left: var(--t-spacing-0);
}

.emptyLabel {
  color: var(--t-font-color-tertiary);
}

.rightComponentDivider {
  align-self: stretch;
  border-left: 1px solid var(--t-border-color-light);
}