.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing);
  border: none;
  border-radius: var(--radius-md);
  appearance: none;
  height: calc(var(--spacing) * 8);
  padding-inline: calc(var(--spacing) * 4);
  font: inherit;
  font-style: normal;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 300ms ease;

  @media (hover: hover) {
    &:hover:not(:disabled) {
      transform: scale(1.02);
    }
  }

  &:active:not(:disabled) {
    transform: scale(0.98);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
}

/* .btn-group { */
/*   display: inline-flex; */
/*   background-color: var(--neutral-900); */
/*   color: var(--neutral-50); */
/*   border-radius: var(--radius-lg); */
/**/
/*   & .btn { */
/*     border-radius: 0; */
/*   } */
/**/
/*   & .btn:first-child { */
/*     border-radius: var(--radius-md) 0 0 var(--radius-md); */
/*   } */
/**/
/*   & .btn:last-child { */
/*     border-radius: 0 var(--radius-md) var(--radius-md) 0; */
/*   } */
/* } */

.btn-primary {
  background-color: var(--neutral-900);
  color: var(--neutral-50);
}

.btn-secondary {
  background-color: var(--neutral-200);
  color: var(--neutral-900);
}

.btn-outline {
  border: 1px solid var(--neutral-200);
  background-color: var(--neutral-100);
  box-shadow: var(--inset-shadow-sm);

  @media (hover: hover) {
    &:hover:not(:disabled) {
      background-color: var(--neutral-200);
    }
  }
}

.btn-ghost {
  background-color: transparent;
  color: var(--neutral-900);

  @media (hover: hover) {
    &:hover:not(:disabled) {
      background-color: var(--neutral-200);
    }
  }
}

.btn-link {
  background-color: transparent;
  color: var(--neutral-600);

  &:hover {
    border-bottom: 2px solid var(--neutral-600);
  }
}

.btn-error {
  background-color: oklch(88.5% 0.062 18.334); /* 200 */
  color: oklch(57.7% 0.245 27.325); /* 600 */
  border: 1px solid oklch(80.8% 0.114 19.571); /* 300 */
}

.btn-warning {
  background-color: oklch(94.5% 0.129 101.54);
  color: oklch(68.1% 0.162 75.834);
  border: 1px solid oklch(90.5% 0.182 98.111);
}

.btn-success {
  background-color: oklch(92.5% 0.084 155.995);
  color: oklch(62.7% 0.194 149.214);
  border: 1px solid oklch(87.1% 0.15 154.449);
}

.btn-info {
  background-color: oklch(88.2% 0.059 254.128);
  color: oklch(54.6% 0.245 262.881);
  border: 1px solid oklch(80.9% 0.105 251.813);
}