.ads-Token {
  @apply text-bodySm
  text-gray-800
    px-3
    inline-block
    h-8
    font-medium
    rounded;
}

.ads-Token-textWrapper {
  @apply items-center
    h-full;
}

.ads-Token-label + .ads-Token-value::before {
  content: " ";
  white-space: pre;
}

.ads-Token-removeBtn {
  @apply flex
    items-center
    justify-center
    bg-transparent
    h-5
    w-5
    ml-1
    -mr-1
    rounded
    duration-200
    transition-colors
    ease-linear
    text-iconSm;
}

.ads-Token-removeBtn:focus {
  @apply shadow-focus
    outline-none;
}

.ads-Token-icon {
  @apply mr-1;

  color: currentColor;
}

.ads-Token--default {
  @apply bg-gray-300;
}

.ads-Token--default .ads-Token-label {
  @apply text-gray-700;
}

.ads-Token--default .ads-Token-removeBtn {
  @apply text-gray-600;
}

.ads-Token--default .ads-Token-removeBtn:hover,
.ads-Token--default .ads-Token-removeBtn:active,
.ads-Token--default .ads-Token-removeBtn:focus {
  @apply bg-gray-400;
}

.ads-Token--danger {
  @apply bg-red-200;
}

.ads-Token--danger .ads-Token-label,
.ads-Token--danger .ads-Token-removeBtn {
  @apply text-gray-800;
}

.ads-Token--danger .ads-Token-removeBtn:hover,
.ads-Token--danger .ads-Token-removeBtn:active,
.ads-Token--danger .ads-Token-removeBtn:focus {
  @apply bg-red-300;
}

.ads-TokenGroup {
  @apply flex
    flex-wrap
    items-center
    -mb-2;
}

.ads-TokenGroup > * {
  @apply mb-2;
}

.ads-TokenGroup > *:not(:last-child) {
  @apply mr-2;
}