.np-chip {
  background-color: transparent;
  border: 1px solid rgba(0,0,0,0.10196);
  border: 1px solid var(--color-border-neutral);
  border-radius: 16px;
  border-radius: var(--size-16);
  color: #5d7079;
  color: var(--color-content-secondary);
  height: 32px;
  height: var(--size-32);
  margin-right: 8px;
  margin-right: var(--size-8);
  padding: 0 12px;
  padding: 0 var(--size-12);
  transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
@media (max-width: 320px) {
  .np-chip {
    height: 40px;
    height: var(--size-40);
  }
}
.np-chip:hover {
  cursor: pointer;
}
.np-chip .np-chip-label {
  padding-top: 2px;
}
.np-chip .np-close-button {
  pointer-events: auto;
}
.np-chip:last-child {
  margin-right: 0;
}
[dir="rtl"] .np-chip:last-child {
  margin-left: 0;
  margin-right: 0;
  margin-right: initial;
}
.np-chip:active {
  background-color: #0081ba;
  background-color: var(--color-interactive-accent-active);
  border-color: #0081ba;
  border-color: var(--color-interactive-accent-active);
  color: #fff;
}
.np-chip--selected {
  color: #fff;
  background-color: #00a2dd;
  background-color: var(--color-interactive-accent);
  border-color: #00a2dd;
  border-color: var(--color-interactive-accent);
  pointer-events: none;
}
.np-chip--selected:hover,
.np-chip--selected:active {
  color: #fff;
  background-color: #008fc9;
  background-color: var(--color-interactive-accent-hover);
  border-color: #008fc9;
  border-color: var(--color-interactive-accent-hover);
}
.np-chip--selected .np-close-button {
  color: white;
}
.np-chip.has-error {
  background: #e74848;
  background: var(--color-interactive-negative);
  color: #fff;
}
.np-chip.has-error .np-close-button {
  color: white;
}
.np-theme-personal .np-chip.has-error {
  background: var(--color-sentiment-negative);
}
.np-theme-personal .np-chip.has-error,
.np-theme-personal .np-chip.has-error:not(.disabled):not(:disabled):hover,
.np-theme-personal .np-chip.has-error:not(.disabled):not(:disabled):active {
  color: var(--color-contrast);
}
.np-theme-personal .np-chip.has-error:not(.disabled):not(:disabled):hover {
  background: var(--color-sentiment-negative-hover);
  border-color: var(--color-sentiment-negative-hover) !important;
}
.np-theme-personal .np-chip.has-error:not(.disabled):not(:disabled):active {
  background: var(--color-sentiment-negative-active);
  border-color: var(--color-sentiment-negative-active) !important;
}
.np-theme-personal .np-chip {
  font-weight: 600;
  font-weight: var(--font-weight-semi-bold);
  color: var(--color-interactive-primary);
  padding: 0 16px;
  padding: 0 var(--size-16);
  border-color: #c9cbce;
  border-color: var(--color-interactive-secondary);
}
.np-theme-personal .np-chip:not(.disabled):not(:disabled):hover {
  color: var(--color-interactive-primary-hover);
  background-color: var(--color-background-screen-hover);
  border-color: #b5b7ba;
  border-color: var(--color-interactive-secondary-hover);
}
.np-theme-personal .np-chip:not(.disabled):not(:disabled):active {
  color: var(--color-interactive-primary-active);
  background-color: var(--color-background-screen-active);
  border-color: #a7a9ab;
  border-color: var(--color-interactive-secondary-active);
}
.np-theme-personal .np-chip .np-close-button {
  margin-right: calc(8px * -1);
  margin-right: calc(var(--size-8) * -1);
  border-radius: inherit;
}
.np-theme-personal .np-chip .np-close-button,
.np-theme-personal .np-chip .np-close-button:hover,
.np-theme-personal .np-chip .np-close-button:not(.disabled):not(:disabled):hover,
.np-theme-personal .np-chip .np-close-button:not(.disabled):not(:disabled):active {
  color: inherit !important;
  background-color: transparent !important;
}
.np-theme-personal .np-chip:not(.disabled):not(:disabled):focus-visible,
.np-theme-personal .np-chip:not(.disabled):not(:disabled):has(:focus-visible) {
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
  outline-offset: var(--ring-outline-offset);
}
.np-theme-personal .np-chip:not(.disabled):not(:disabled):focus-visible .np-close-button,
.np-theme-personal .np-chip:not(.disabled):not(:disabled):has(:focus-visible) .np-close-button {
  background: transparent;
  outline: none;
}
.np-theme-personal .np-chip:not(.disabled):not(:disabled):focus-visible .np-close-button:hover,
.np-theme-personal .np-chip:not(.disabled):not(:disabled):has(:focus-visible) .np-close-button:hover {
  color: inherit !important;
}
.np-theme-personal .np-chip.np-chip--removable {
  position: relative;
}
.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
  padding-right: 24px;
  padding-right: var(--size-24);
}
@media (max-width: 320px) {
  .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
    padding-right: 48px;
    padding-right: var(--size-48);
  }
}
.np-theme-personal .np-chip.np-chip--removable .np-close-button {
  justify-content: flex-end;
  top: 0;
  left: 0;
  position: absolute;
  padding-right: 8px;
  padding-right: var(--size-8);
  height: 100%;
  width: 100%;
}
.np-theme-personal .np-chip:has(.disabled, :disabled):focus-visible {
  outline: none;
}
.np-theme-personal .np-chip--selected,
.np-theme-personal .np-chip--valid {
  color: var(--color-interactive-contrast);
  background-color: var(--color-interactive-primary);
  border-color: var(--color-interactive-primary);
}
.np-theme-personal .np-chip--selected:not(.disabled):not(:disabled):hover,
.np-theme-personal .np-chip--valid:not(.disabled):not(:disabled):hover {
  color: var(--color-interactive-contrast-hover);
  background-color: var(--color-interactive-primary-hover);
  border-color: var(--color-interactive-primary-hover);
}
.np-theme-personal .np-chip--selected:not(.disabled):not(:disabled):active,
.np-theme-personal .np-chip--valid:not(.disabled):not(:disabled):active {
  color: var(--color-interactive-contrast-active);
  background-color: var(--color-interactive-primary-active);
  border-color: var(--color-interactive-primary-active);
}
.np-theme-personal .np-chip--selected .np-close-button,
.np-theme-personal .np-chip--valid .np-close-button {
  color: inherit;
}
.np-theme-personal .np-chip--selected .np-close-button:focus,
.np-theme-personal .np-chip--valid .np-close-button:focus,
.np-theme-personal .np-chip--selected .np-close-button:focus-within,
.np-theme-personal .np-chip--valid .np-close-button:focus-within {
  outline: none;
}