.btn {
  @apply py-2.5 px-4 text-sm text-center font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline disabled:cursor-default disabled:opacity-65 transition rounded-md inline-flex items-center justify-center gap-x-2;
}

.btn-text {
  @apply text-grayscale-700 focus:text-primary-600 focus-visible:outline-primary-600 hover:bg-gray-100;
}

.btn svg {
  @apply size-[1.2rem]
}

.btn-primary {
  @apply text-white bg-primary-600 disabled:bg-primary-600 hover:bg-primary-700 focus:bg-primary-600 focus-visible:outline-primary-600;
}

.btn-secondary {
  @apply text-white bg-secondary-600 disabled:bg-secondary-600 hover:bg-secondary-700 focus-visible:outline-secondary-600 focus:bg-secondary-600;
}

.btn-ghost-primary {
  @apply transition-colors bg-transparent text-primary-600 hover:bg-primary-50 focus:bg-primary-50 focus-visible:outline-primary-600;
}

.btn-ghost-secondary {
  @apply transition-colors bg-transparent text-secondary-600 hover:bg-secondary-50 focus:bg-secondary-50 focus-visible:outline-secondary-600;
}

.btn-outline-primary {
  @apply text-primary-600 bg-transparent border-2 border-primary-300 disabled:border-primary-300 disabled:bg-transparent hover:bg-transparent hover:text-primary-600 hover:border-primary-600 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus:bg-grayscale-700/5 focus:border-primary-800 focus-visible:outline-primary-600;
}

.btn-outline-secondary {
  @apply bg-transparent border-2 text-secondary-600 border-secondary-600 disabled:border-secondary-600 disabled:bg-transparent hover:bg-transparent hover:text-secondary-600 hover:border-secondary-600 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus:bg-grayscale-700/5 focus:border-secondary-700 focus-visible:outline-secondary-600;
}


.btn-sm {
  @apply px-2 py-1 text-xs rounded-sm;
}

.btn-lg {
  @apply px-6 py-3 text-base rounded-lg;
}

.btn-file {
  @apply focus:outline-0 file:py-2.5 file:px-4 file:text-sm file:text-center file:font-semibold file:focus-visible:outline-2 file:disabled:cursor-default file:disabled:opacity-65 file:transition file:rounded-md file:inline-flex file:items-center file:justify-center file:gap-x-2 file:text-primary-600 file:bg-transparent file:border-2 file:border-primary-300 file:disabled:border-primary-300 file:disabled:bg-transparent file:hover:bg-transparent file:hover:text-primary-600 file:hover:border-primary-600 file:focus-visible:outline-solid file:focus-visible:outline-offset-2 file:focus:bg-grayscale-700/5 file:focus:border-primary-800 file:focus-visible:outline-primary-600 file:border-solid file:mr-5
}