.c-btn {
  @apply inline-grid cursor-pointer grid-flow-col items-center gap-2 whitespace-nowrap rounded border-none bg-transparent font-sans font-semibold text-gray no-underline -outline-offset-1;

  &:focus-visible {
    @apply outline outline-1 outline-inherit;
    outline-color: currentColor;
  }

  &:disabled {
    @apply cursor-default text-gray-300-600;
  }

  &__prepend,
  &__append {
    @apply flex items-center;
  }

  &__prepend {
    @apply -ml-2;
  }
  &__append {
    @apply -mr-2;
  }

  &__loading-spinner {
    @apply absolute left-1 flex items-center justify-center;
  }
}

.c-btn {
  &,
  .c-btn__loading-spinner {
    @apply bg-purple-50-900;
  }

  &:not(:disabled):hover {
    @apply outline outline-1 outline-purple-200-700;
  }

  &:not(:disabled):active {
    @apply bg-purple-100-800;
  }
}

.c-btn-loading {
  @apply relative;

  .c-btn__prepend,
  .c-btn__append {
    @apply opacity-0 transition-opacity;
  }
}

.c-btn-elevate {
  @apply shadow;

  &,
  .c-btn__loading-spinner {
    @apply bg-elevate;
  }

  &:not(:disabled):hover {
    @apply outline-gray-100-800;
  }

  &:not(:disabled):active {
    @apply bg-purple-50-900;
  }
}

.c-btn-action {
  &,
  .c-btn__loading-spinner {
    @apply bg-cyan-100-800;
  }

  &:not(:disabled):hover {
    @apply outline outline-1 outline-cyan-300-600;
  }

  &:not(:disabled):active {
    @apply bg-cyan-200-700;
  }
}

.c-btn-danger {
  @apply text-pink-600-300;

  &:not(:disabled):hover {
    @apply outline-pink-300-600;
  }
}

.c-btn-xs {
  @apply h-6 px-4 py-2 text-[12px] leading-[0];

  .c-btn__loading-spinner {
    @apply left-[2px];
  }
}

.c-btn-sm {
  @apply h-9 px-6 text-sm;
}

.c-btn-md {
  @apply h-11 px-8 text-base;
}

.c-btn-lg {
  @apply h-14 px-10 text-lg;

  .c-btn__loading-spinner {
    @apply left-2;
  }
}
