.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; } }