.c-tag {
  @apply inline-grid grid-flow-col items-center gap-2 whitespace-nowrap;
  @apply rounded font-medium text-gray-700-200;
  @apply border border-solid border-transparent;

  &__prepend {
    @apply -ml-2 flex items-center;
  }

  &__remove-button {
    @apply m-0 -mr-2 cursor-pointer border-none bg-transparent p-0 text-[0];
  }

  &__remove-button-text {
    @apply sr-only;
  }
}

.c-tag-default {
  @apply border-gray-200-700 bg-purple-50-900;
}

.c-tag-elevate {
  @apply bg-elevate shadow;
}

.c-tag-xxs {
  @apply h-5 px-2 text-xs;
}

.c-tag-xs {
  @apply h-6 px-2 text-xs;
}

.c-tag-sm {
  @apply h-9 px-4 text-sm;
}

.c-tag-md {
  @apply h-11 px-6 text-base;
}

.c-tag-lg {
  @apply h-14 px-6 text-lg;
}
