67P/hyperchannel

@layer components {
  .btn {
    @apply inline-flex items-center justify-center
           font-semibold rounded-md border border-transparent
           cursor-pointer transition-colors duration-75
           focus:outline-none focus:ring-4 text-center;

    .spinner {
      @apply mr-3 border-2 border-t-current border-b-current
             border-l-current border-r-transparent;
    }
  }

  .btn-md {
    @apply btn;
    @apply px-4 py-2 shadow-sm;
  }

  .btn-sm {
    @apply btn;
    @apply px-3 py-1.5 text-sm shadow-sm;
  }

  .btn-icon-sm {
    @apply btn;
    @apply p-2 text-sm shadow-sm;

    svg {
      @apply h-4 w-4;
    }
  }

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

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

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

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

  .btn:disabled {
    @apply btn-gray text-neutral-400 shadow-none;
  }

  .btn-outline {
    @apply px-3 py-2 rounded-md border border-neutral-300
           bg-white text-sm font-medium text-neutral-700 hover:bg-neutral-50
           focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500
           focus:border-indigo-500;
  }

  .btn-outline-icon {
    @apply btn-outline;

    svg {
      @apply h-4 w-4;
    }
  }


  .animate-spin {
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    to {
      transform:rotate(360deg)
    }
  }

}