.BaseButton {
  @apply disabled:opacity-50;
  @apply disabled:pointer-events-none disabled:hover:shadow-none;
  @apply focus-visible:outline-none;
  @apply focus-visible:ring-2 focus-visible:ring-ring;
  @apply focus-visible:ring-offset-2;
  @apply font-ctas;
  @apply inline-flex;
  @apply rounded-full;
  @apply transition-colors;
  @apply ring-offset-background;
  @apply ring-inset;
  @apply gap-0;
  @apply items-center;
  @apply justify-center;
  @apply whitespace-nowrap;
  @apply active:shadow-none;
}

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

  &:disabled {
    @apply bg-secondary text-secondary-foreground;
  }

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

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

  &:hover {
    @apply bg-secondary;
  }
}

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

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

.inverted {
  @apply text-foreground;
  @apply bg-background;

  &:disabled {
    @apply bg-secondary;
  }
}

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

.ghost {
  @apply bg-transparent;
  @apply text-accent-foreground;

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

:global(.dark) .ghost {
  @apply text-secondary;

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

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

  &:hover {
    @apply bg-destructive;
  }
}

.link {
  @apply text-primary;
  @apply underline;
  @apply underline-offset-4;
  @apply hover:no-underline;
}

.icon-only {
  @apply !p-0;
}

.size-sm.icon-only {
  @apply size-6;
}

.size-default.icon-only {
  @apply size-8;
}

.size-lg.icon-only {
  @apply size-10;
}

.size-xl.icon-only {
  @apply size-12;

  svg {
    @apply size-6;
  }
}

.size-sm,
.size-default,
.size-lg,
.size-xl,
.size-wide,
.size-xwide {
  @apply grid;
  @apply items-center;
  @apply grid-flow-col;
}

.size-sm {
  @apply py-2;
  @apply px-3;
  @apply text-xs;
  @apply uppercase;
  @apply tracking-wider;
}

.size-default,
.size-md {
  @apply py-2;
  @apply px-3;
  @apply text-sm;
}

.size-lg {
  @apply py-2;
  @apply px-3;
  @apply text-base;
}

.size-xl {
  @apply py-2;
  @apply px-3;
  @apply text-lg;
}

.size-2xl {
  @apply py-4;
  @apply px-5;
  @apply text-xl;
}

.size-wide {
  @apply py-8;
  @apply px-16;
  @apply text-base;
}

.size-xwide {
  @apply py-8;
  @apply px-20;
  @apply text-base;
}
