.chips {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  gap: var(--spacing-4);
  border-radius: var(--radius-32);
  font-family: var(--font-family-base);
  white-space: nowrap;
  cursor: pointer;
}

.chips--s { padding: var(--spacing-6) var(--spacing-12); }
.chips--m { padding: var(--spacing-8) var(--spacing-16); }

.chips--s.chips--trailing-counter,
.chips--s.chips--trailing-cross   { padding-right: var(--spacing-6); }
.chips--m.chips--trailing-counter { padding-right: var(--spacing-8); }
.chips--m.chips--trailing-cross   { padding-right: var(--spacing-12); }

.chips--default  { background: var(--color-gray-0);     color: var(--color-gray-900);   box-shadow: inset 0 0 0 1px var(--color-gray-100); }
.chips--hover    { background: var(--color-gray-0);     color: var(--color-accent-600); box-shadow: inset 0 0 0 1px var(--color-accent-600); }
.chips--active   { background: var(--color-accent-400); color: var(--color-gray-0); }
.chips--disabled { background: var(--color-gray-25);    color: var(--color-gray-200); }

.chips--removable.chips--default  { background: var(--color-accent-400); color: var(--color-gray-0); box-shadow: none; }
.chips--removable.chips--hover    { background: var(--color-accent-300); color: var(--color-gray-0); box-shadow: none; }
.chips--removable.chips--active   { background: var(--color-accent-400); color: var(--color-gray-0); box-shadow: none; }
.chips--removable.chips--disabled { background: var(--color-gray-25);    color: var(--color-gray-200); box-shadow: none; }

.chips__cross { flex: none; display: block; }
.chips__cross svg { display: block; width: 100%; height: 100%; }
.chips--s .chips__cross { width: 12px; height: 12px; }
.chips--m .chips__cross { width: 16px; height: 16px; }

.chips__indicator { position: absolute; top: -1px; right: -1px; }
.chips--active .chips__indicator { top: 0; right: 0; }
.chips .indicator { color: var(--color-positive-300); }

.chips--default:not(.chips--removable):not(.chips--disabled):hover {
  color: var(--color-accent-600);
  box-shadow: inset 0 0 0 1px var(--color-accent-600);
}

.chips--removable.chips--default:not(.chips--disabled):hover {
  background: var(--color-accent-300);
}
.chips:focus-visible {
  outline: 2px solid var(--color-accent-400);
  outline-offset: 2px;
}