chip.css

.chip {
  /* Reset <a /> */
  text-decoration: none;

  /* Reset <button /> */
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;

  display: inline-flex;
  flex-direction: row;
  align-items: center;
  padding: calc(6 * var(--font-size-basis)) calc(10 * var(--font-size-basis));

  background: var(--color-sea-salt-gray);
  color: var(--color-benthos-blue);

  border: 1px solid var(--color-salt-marsh-gray);
  border-radius: 100px;

  /* .label-1 */
  font-size: var(--font-size-12);
  line-height: var(--line-height-base-14);
  font-weight: var(--font-weight-bold);

  transition-property: color, background-color, border-color;
  transition-duration: var(--transition-duration), var(--transition-duration), var(--transition-duration);
}

.chip:hover,
.chip:active,
.chip:focus {
  background: var(--color-benthos-blue);
  color: var(--color-sea-salt-gray);
}

.chip > * {
  margin-left: calc(6 * var(--font-size-basis));
}

.chip + .chip {
  margin-left: calc(8 * var(--font-size-basis));
}