:where(.btn) {
  width: unset;
}

.btn {
  @apply inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 text-center select-none;
  padding-inline: var(--btn-p);
  color: var(--btn-fg);
  background-color: var(--btn-bg);
  height: var(--btn-size);
  font-size: var(--btn-font-size, 0.875rem);
  font-weight: 600;
  transition-property: color, background-color, border-color, box-shadow;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 0.2s;
  border-radius: var(--btn-radius, 0);
  border-width: var(--btn-border-width);
  border-style: solid;
  border-color: var(--btn-border);

  --btn-p: 1rem;
  --btn-size-base: 0.25rem;
  --btn-size: calc(var(--btn-size-base) * 10);
  --btn-fg: var(--color-on-background);
  --btn-bg: var(--btn-color, var(--color-surface));
  --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth, 1) * 5%));
}

.btn:hover {
  --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-surface)), #000 7%);
}

.btn:focus-visible {
  @apply outline-none ring-2 ring-offset-2 ring-[var(--btn-color)];
}

.btn:active {
  translate: 0 0.5px;
  --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-surface)), #000 5%);
  --btn-border: color-mix(in oklab, var(--btn-color, var(--color-surface)), #000 7%);
  --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
}

.btn:disabled:not([loading]),
.btn[disabled]:not([loading]) {
  @apply pointer-events-none;
  --btn-border: #0000;
  --btn-fg: color-mix(in oklch, var(--color-on-background) 20%, #0000);
}

.btn:disabled:not(.btn-link, .btn-ghost, [loading]),
.btn[disabled]:not(.btn-link, .btn-ghost, [loading]),
.btn.btn-disabled:not(.btn-link, .btn-ghost, [loading]) {
  @apply bg-on-background/10;
  box-shadow: none;
}

.btn[loading] {
  @apply pointer-events-none opacity-80;
}

.btn-primary {
  --btn-color: var(--color-primary);
  --btn-fg: var(--color-on-primary);
}

.btn-secondary {
  --btn-color: var(--color-secondary);
  --btn-fg: var(--color-on-secondary);
}

.btn-accent {
  --btn-color: var(--color-accent);
  --btn-fg: var(--color-on-accent);
}

.btn-neutral {
  --btn-color: var(--color-neutral);
  --btn-fg: var(--color-on-neutral);
}

.btn-info {
  --btn-color: var(--color-info);
  --btn-fg: var(--color-on-info);
}

.btn-success {
  --btn-color: var(--color-success);
  --btn-fg: var(--color-on-success);
}

.btn-warning {
  --btn-color: var(--color-warning);
  --btn-fg: var(--color-on-warning);
}

.btn-danger {
  --btn-color: var(--color-danger);
  --btn-fg: var(--color-on-danger);
}

.btn-soft:not(:hover, :active, :disabled, [disabled]) {
  --btn-fg: var(--btn-color, var(--color-on-background));
  --btn-bg: color-mix(in oklab, var(--btn-color) 8%, var(--color-background));
  --btn-border: color-mix(in oklab, var(--btn-color) 10%, var(--color-background));
}

.btn-soft:hover:not(:active, :disabled, [disabled]) {
  --btn-fg: var(--btn-color);
  --btn-bg: color-mix(in oklab, var(--btn-color) 18%, var(--color-background));
  --btn-border: color-mix(in oklab, var(--btn-color) 20%, var(--color-background));
}

.btn-soft:active {
  --btn-fg: var(--btn-color);
  --btn-bg: color-mix(in oklab, var(--btn-color) 25%, var(--color-background));
  --btn-border: color-mix(in oklab, var(--btn-color) 27%, var(--color-background));
}

.btn-outline:not(:hover, :active, :disabled, [disabled]) {
  --btn-bg: transparent;
  --btn-fg: var(--btn-color);
  --btn-border: var(--btn-color);
  border-width: max(1px, var(--btn-border-width, 1px));
}

.btn-outline:hover:not(:active, :disabled, [disabled]) {
  border-width: max(1px, var(--btn-border-width, 1px));
  --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-on-background)) 10%, var(--color-background));
  --btn-fg: var(--btn-color);
  --btn-border: var(--btn-color);
}

.btn-outline:active {
  border-width: max(1px, var(--btn-border-width, 1px));
  --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-on-background)) 15%, var(--color-background));
  --btn-fg: var(--btn-color);
  --btn-border: var(--btn-color);
}

.btn-ghost:not(:hover, :active) {
  --btn-bg: transparent;
  --btn-border: transparent;
  border-width: 0px;
  --btn-fg: var(--btn-color);
}

.btn-ghost:hover:not(:active, :disabled, [disabled]) {
  --btn-border: transparent;
  --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-on-background)) 7%, var(--color-background));
  border-width: 0px;
  --btn-fg: var(--btn-color);
}

.btn-ghost:active {
  --btn-border: transparent;
  --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-on-background)) 12%, var(--color-background));
  border-width: 0px;
  --btn-fg: var(--btn-color);
}

.btn-link {
  --btn-border: transparent;
  --btn-bg: transparent;
  --btn-fg: var(--btn-color);
  --btn-noise: none;
  --btn-shadow: none;
}

.btn-link:is(.btn-active, :hover, :active:focus, :focus-visible) {
  @apply underline;
  --btn-border: transparent;
  --btn-bg: transparent;
}

.btn-xs {
  --btn-font-size: 0.6875rem;
  --btn-p: 0.5rem;
  --btn-size: calc(var(--btn-size-base) * 6);
}

.btn-sm {
  --btn-font-size: 0.75rem;
  --btn-p: 0.75rem;
  --btn-size: calc(var(--btn-size-base) * 8);
}

.btn-md {
  --btn-font-size: 0.875rem;
  --btn-p: 1rem;
  --btn-size: calc(var(--btn-size-base) * 10);
}

.btn-lg {
  --btn-font-size: 1.125rem;
  --btn-p: 1.25rem;
  --btn-size: calc(var(--btn-size-base) * 12);
}

.btn-xl {
  --btn-font-size: 1.375rem;
  --btn-p: 1.5rem;
  --btn-size: calc(var(--btn-size-base) * 14);
}

.btn-square {
  @apply px-0;
  width: var(--btn-size);
  height: var(--btn-size);
}

.btn-circle {
  @apply rounded-full px-0;
  width: var(--btn-size);
  height: var(--btn-size);
}

.btn-wide {
  @apply w-full max-w-64;
}

.btn-block {
  @apply w-full;
}

.loading {
  @apply pointer-events-none inline-block aspect-square bg-current align-middle;
  width: calc(var(--btn-size-base) * 6);
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
}