.c-btn {
  @apply border-blue-700;
  @apply bg-transparent;
  @apply text-blue-700;

  @apply hover:border-blue-800;
  @apply hover:bg-blue-700/8;
  @apply hover:text-blue-800;

  @apply focus-visible:shadow-outline;

  @apply active:border-blue-900;
  @apply active:bg-blue-700/16;
  @apply active:text-blue-900;

  @apply disabled:border-transparent !important;
  @apply disabled:bg-grey-700/8 !important;
  @apply disabled:text-grey-600 !important;
}

.c-btn--basic {
  @apply border-transparent;

  @apply hover:border-transparent;

  @apply active:border-transparent;
}

.c-btn--basic.c-btn--icon {
  border: none;
  @apply text-grey-700;

  @apply hover:text-grey-800;

  @apply active:text-grey-900;

  @apply disabled:bg-transparent !important;
}

.c-btn--danger.c-btn--danger {
  @apply border-red-700;
  @apply text-red-700;

  @apply hover:border-red-800;
  @apply hover:bg-red-700/8;
  @apply hover:text-red-800;

  @apply active:border-red-900;
  @apply active:bg-red-700/16;
  @apply active:text-red-900;
}

.c-btn--primary {
  @apply border-transparent;
  @apply bg-blue-700;

  @apply hover:border-transparent;
  @apply hover:bg-blue-800;

  @apply active:border-transparent;
  @apply active:bg-blue-900;
}

.c-btn--primary.c-btn--danger {
  @apply bg-red-700;

  @apply hover:bg-red-800;

  @apply active:bg-red-900;
}

.c-btn--dark {
  @apply border-blue-600;
  @apply text-blue-600;

  @apply hover:border-blue-500;
  @apply hover:bg-blue-600/8;
  @apply hover:text-blue-500;

  @apply focus-visible:shadow-outline-dark;

  @apply active:border-blue-400;
  @apply active:bg-blue-600/16;
  @apply active:text-blue-400;

  @apply disabled:bg-white/8 !important;
  @apply disabled:text-grey-700 !important;
}

.c-btn--dark.c-btn--basic.c-btn--icon {
  @apply text-grey-500;

  @apply hover:text-grey-400;

  @apply active:text-grey-300;
}

.c-btn--dark.c-btn--danger.c-btn--danger {
  @apply border-red-600;
  @apply text-red-400;

  @apply hover:border-red-500;
  @apply hover:bg-red-600/8;
  @apply hover:text-red-300;

  @apply active:border-red-400;
  @apply active:bg-red-600/16;
  @apply active:text-red-200;
}

.c-btn--dark.c-btn--primary {
  @apply bg-blue-600;

  @apply hover:bg-blue-500;

  @apply active:bg-blue-400;
}

.c-btn--dark.c-btn--primary.c-btn--danger {
  @apply bg-red-600;

  @apply hover:bg-red-500;

  @apply active:bg-red-400;
}

.c-btn.c-btn--primary,
.c-btn.c-btn--dark.c-btn--primary {
  @apply text-white;

  @apply hover:text-white;

  @apply active:text-white;
}