@layer components {
  .btn-text-dark          { @apply text-black; }
  .btn-text-dark:hover    { @apply text-black no-underline; }
  .btn-text-dark:visited  { @apply text-black; }
  .btn-text-dark:active   { @apply text-black; }
  .btn-text-light         { @apply text-white; }
  .btn-text-light:hover   { @apply text-white no-underline; }
  .btn-text-light:visited { @apply text-white; }
  .btn-text-light:active  { @apply text-white; }

  .btn {
    @apply btn-text-dark;
    @apply inline-block font-semibold rounded-md leading-none cursor-pointer text-center
           transition-colors duration-75 focus:outline-none focus:ring-4;
  }

  .btn-md {
    @apply btn;
    @apply py-3 px-6;
  }

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

  .btn-icon {
    @apply py-2 px-3;
  }

  .btn-outline {
    @apply py-2 border-2 border-gray-100 hover:bg-gray-100;
  }

  .btn-gray {
    @apply bg-gray-100 hover:bg-gray-200
           focus:ring-gray-300 focus:ring-opacity-75;
  }

  .btn-blue {
    @apply btn-text-light;
    @apply bg-blue-500 hover:bg-blue-600
           focus:ring-blue-400 focus:ring-opacity-75;
  }

  .btn-emerald {
    @apply btn-text-light;
    @apply bg-emerald-500 hover:bg-emerald-600
           focus:ring-emerald-400 focus:ring-opacity-75;
  }

  .btn-red {
    @apply btn-text-light;
    @apply bg-red-600 hover:bg-red-700
           focus:ring-red-500 focus:ring-opacity-75;
  }

  .btn-outline-purple {
    @apply border-2 border-purple-500 hover:bg-purple-100
           focus:ring-purple-400 focus:ring-opacity-75;
  }

  .btn:disabled {
    @apply bg-gray-100 hover:bg-gray-200 text-gray-400
           focus:ring-gray-300 focus:ring-opacity-75;
  }
}