.BaseBadge {
  @apply flex;
  @apply max-w-max;
  @apply max-h-8;
  @apply items-center;
  @apply rounded;
  @apply px-3;
  @apply py-0;
  @apply transition-colors;
  @apply border-0;
  @apply text-sm;
  @apply focus:outline-none;
  @apply focus:ring-2;
  @apply focus:ring-offset-2;
  @apply tracking-wide;
}

.default {
  @apply bg-primary;
  @apply text-primary-foreground;
}

.secondary {
  @apply bg-secondary;
  @apply text-secondary-foreground;
}

.address {
  @apply flex;
  @apply font-mono;
  @apply bg-accent;
  @apply text-accent-foreground;
  @apply tracking-tight;
  @apply gap-0;
}

.outline {
  @apply text-secondary-foreground;
  @apply ring-1;
  @apply ring-border;
  @apply bg-transparent;

  &:hover {
    @apply bg-primary;
    @apply text-primary-foreground;
  }
}

:global(.dark) .outline {
  @apply ring-primary;
  @apply text-primary;

  &:hover {
    @apply bg-primary;
    @apply text-primary-foreground;
  }
}

:global(.charge) .outline {
  @apply text-accent-foreground;
  @apply bg-transparent;
  @apply ring-accent-foreground;

  &:hover {
    @apply bg-boostCharge;
    @apply text-primary-foreground;
  }
}

.destructive {
  @apply bg-destructive;
  @apply text-destructive-foreground;
}

.small {
  /* @apply h-1; */
  /* @apply w-2; */
}

.medium {
  /* @apply h-2; */
  /* @apply w-4; */
}

.large {
  /* @apply h-2; */
  /* @apply w-4; */
}
