chips.pcss

.chip {
  @apply
    flex inline-flex items-center
    py-2 px-3
    text-xs
    font-bold leading-none tracking-normal
    whitespace-no-wrap;
}

.chip--condensed {
  @apply p-1;
}

.chip--black {
  @apply bg-black text-white;
}
.chip--grey-700 {
  @apply bg-grey-700 text-white;
}
.chip--grey-500 {
  @apply bg-grey-500 text-white;
}
.chip--grey-125 {
  @apply bg-grey-125 text-black;
}
.chip--blue-300 {
  @apply bg-blue-300 text-white;
}
.chip--cyan-200 {
  @apply bg-cyan-200 text-white;
}
.chip--cyan-500 {
  @apply bg-cyan-500 text-white;
}
.chip--green-300 {
  @apply bg-green-300 text-white;
}
.chip--green-400 {
  @apply bg-green-400 text-white;
}
.chip--orange-300 {
  @apply bg-orange-200 text-white;
}
.chip--violet-400 {
  @apply bg-violet-400 text-white;
}
.chip--red-600 {
  @apply bg-red-600 text-white;
}

.chip--hoveractive:hover {
  &.chip--black {
    @apply bg-grey-700;
  }
  &.chip--grey-700 {
    @apply bg-grey-500;
  }
  &.chip--grey-500 {
    @apply bg-grey-300;
  }
  &.chip--grey-125 {
    @apply bg-grey-100;
  }
}

.chip__icon {
  @apply self-center cursor-pointer;

  font-size: .7rem;
}

.chip--lg {
  @apply py-2 pl-3;
}

.chip--select {
  @apply relative p-0 inline-flex items-center;

  select {
    @apply w-full py-2 pl-3 pr-8 z-10 cursor-pointer;

    appearance: none;
    background: none;
  }

  &.chip--lg {
    @apply p-0;

    select {
      @apply py-3 pl-4 pr-8;
    }
  }

  .chip__icon {
    @apply
      absolute
      right-0
      pl-2 pr-3
      cursor-pointer;
  }
}