.studio .btn {
  @apply border;
  @apply rounded;
  @apply flex;
  @apply justify-center;
  @apply items-center;
  @apply ring-0;
  @apply focus:ring;
  @apply transition-all;
  @apply m-1;
}

.studio .btn-gray {
  @apply text-gray-text-title;
  @apply dark:text-gray-text-dark-title;
  @apply ring-gray-light-darker;
  @apply dark:ring-gray-dark;
}

.studio .btn-gray-solid {
  @apply hover:bg-gray-bg;
  @apply bg-gray-light-darker;
  @apply dark:bg-gray-dark;
  @apply border-gray-light-darker;
  @apply dark:border-gray-dark;
}

.studio .btn-gray-outline {
  @apply dark:bg-gray-dark;
  @apply dark:border-gray-bg;
  @apply dark:bg-opacity-20;
  @apply dark:border-opacity-10;
  @apply dark:text-white;
  @apply text-black;
  @apply hover:bg-gray-dark;
  @apply border-gray-light;
  @apply border-opacity-10;
  @apply dark:hover:bg-gray-lighter;
  @apply hover:bg-opacity-20;
  @apply dark:hover:bg-opacity-20;
  @apply bg-opacity-20;
}

.studio .btn-gray-ghost {
  @apply bg-transparent;
  @apply dark:bg-transparent;
  @apply text-black;
  @apply border-transparent;
  @apply text-black;
  @apply dark:text-white;
  @apply dark:hover:bg-gray-dark;
  @apply border-gray-light;
  @apply hover:bg-gray-lighter;
}

.studio .btn-primary {
  @apply text-primary;
  @apply dark:text-primary;
  @apply ring-primary;
  @apply dark:ring-primary;
  @apply ring-primary-light;
  @apply dark:ring-primary-dark;
  @apply ring-opacity-20;
  @apply dark:ring-opacity-20;
}

.studio .btn-primary-solid {
  @apply bg-primary;
  @apply dark:bg-primary;
  @apply dark:text-black;
  @apply text-white;
  @apply hover:bg-primary-dark;
  @apply dark:text-white;
  @apply text-gray-bg;
  @apply dark:hover:bg-primary-dark;
  @apply border-primary-light;
  @apply dark:border-primary-dark;
  @apply hover:bg-primary-light;
}

.studio .btn-primary-outline {
  @apply bg-primary-light;
  @apply dark:bg-primary-light;
  @apply dark:text-primary-light;
  @apply text-primary-dark;
  @apply hover:bg-primary;
  @apply dark:hover:bg-primary-dark;
  @apply border-primary;
  @apply dark:border-primary-dark;
  @apply dark:bg-opacity-10;
  @apply border-opacity-20;
  @apply dark:border-opacity-20;
  @apply hover:bg-opacity-20;
  @apply dark:hover:bg-opacity-20;
  @apply bg-opacity-10;
}

.studio .btn-primary-ghost {
  @apply bg-transparent;
  @apply dark:bg-transparent;
  @apply text-primary-dark;
  @apply border-transparent;
  @apply dark:text-primary-light;
  @apply border-gray-light;
}

.studio .btn-sm {
  @apply text-sm;
  @apply px-3;
  @apply py-1;
  @apply font-normal;
}

.studio .btn-xs {
  @apply text-xs;
  @apply px-1;
  @apply py-1;
  @apply font-normal;
}

.studio .btn-lg {
  @apply text-lg;
  @apply font-semibold;
  @apply px-6;
  @apply py-2;
}

.studio .btn-xl {
  @apply text-xl;
  @apply font-bold;
  @apply px-6;
  @apply py-2;
}

.studio .btn-base {
  @apply text-base;
  @apply font-normal;
  @apply px-6;
  @apply py-2;
}

.studio .btn-loading {
  @apply cursor-not-allowed;
  @apply opacity-50;
}

.studio .btn-disabled {
  @apply cursor-pointer;
}

.studio .btn-active {
  @apply ring-2;
}
