.chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border-radius: $radius-pill;
  background: rgba(45, 34, 85, 0.4);
  color: $fg-2;
  border: 1px solid rgba(216, 180, 255, 0.1);
  font: 500 12px / 1 $font-body;
  transition: all 200ms;
}

.chip--active {
  background: linear-gradient(90deg, $accent 0%, $accent-2 100%);
  color: $primary-on;
  border-color: transparent;
}

.chip__prefix {
  font-weight: 700;
}

