.chip {
  @include fontSize($font-size-base);

  border-radius: $border-radius-base;
  display: flex;
  width: fit-content;
  min-width: calc-rem(56px);
  padding: calc-rem(8px 12px);
  align-items: center;
  justify-content: center;
  background-color: var(--color-gray-50);
  color: var(--color-gray-500);
  font-weight: $font-weight-regular;
  cursor: pointer;

  &:hover {
    border-color: var(--color-gray-300);
  }

  @include e(standard) {
    width: 7.2rem;
    max-width: 7.2rem;
  }

  // #Info
  @include m(info) {
    background-color: rgba(var(--color-info-rgb), .06);
    color: var(--color-info);
  }

  // #Warn
  @include m(warn) {
    background-color: var(--color-warning-opacity);
    color: var(--color-warning);
  }

  // #Danger
  @include m(danger) {
    background-color: rgba(var(--color-error-rgb), .06);
    color: var(--color-error);
  }

  // #Success
  @include m(success) {
    background-color: var(--color-success--opacity);
    color: var(--color-success);
  }

  // #Selected
  @include m(selected) {
    &, * {
      color: var(--color-white);
      border-color: var(--color-brand-light);
    }

    background-color: var(--color-brand-light);
  }

  @include m(not-selected) {
    border: 1px solid var(--color-gray-300);
    background-color: var(--color-white);
    color: var(--color-black);
  }
}