:host {
  /**
  * @prop --klevu-chip-radius var(--klevu-border-radius-xxl: Border radius of the chip
  * @prop --klevu-chip-border var(--klevu-color-neutral-5: Border color of the chip
  * @prop --klevu-chip-selected-background klevu-color-primary-with-opacity: Selected background color of the chip
  * @prop --klevu-chip-selected-border var(--klevu-color-primary): Selected border color of the chip
  */
  display: inline-flex;
  padding: var(--klevu-spacing-02) var(--klevu-spacing-05);
  border-radius: var(--klevu-chip-radius, var(--klevu-border-radius-xxl));
  align-items: center;
  border: 1px solid var(--klevu-chip-border, var(--klevu-color-neutral-5));
}

:host(.removable) {
  display: inline-flex;
}

:host(.selected) {
  background-color: var(
    --klevu-chip-selected-background,
    color-mix(in srgb, var(--klevu-color-primary), transparent 80%)
  );
  border-color: var(--klevu-chip-selected-border, var(--klevu-color-primary));
}

klevu-icon {
  position: relative;
  top: 2px;
  left: -4px;
  font-size: 0.7em;
  padding: 2px;
  margin-right: var(--klevu-spacing-01);
  cursor: pointer;
  user-select: none;
}

klevu-typography {
  line-height: 1;
}