.button {
  @apply inline-block text-base text-center font-medium rounded-full
    border focus:outline-hidden transition-colors px-4 py-1.5
    cursor-pointer;

  /* Size variants */
  &.button-sm {
    @apply px-2.5 py-1 text-sm;
  }

  &.button-lg {
    @apply px-5 py-2.5 text-base;

    & svg {
      @apply mr-1;
    }
  }

  &.button-xl {
    @apply px-6 py-3 text-lg;

    & svg {
      @apply mr-1.5;
    }
  }

  /* Color variants */
  &.button-primary {
    @apply text-white border-green-600 bg-green-600 hover:bg-green-700 hover:border-green-700;
  }

  &.button-secondary {
    @apply text-gray-800 border-gray-100 bg-gray-100 hover:bg-gray-200 hover:border-gray-200;
  }

  &.button-danger {
    @apply text-white border-red-600 bg-red-600 hover:bg-red-700 hover:border-red-700;
  }

  /* Outline style */
  &.button-outline {
    @apply bg-white hover:bg-gray-50;

    &.button-primary {
      @apply text-green-600 border-green-600/50 hover:bg-green-50 hover:border-green-600;
    }

    &.button-secondary {
      @apply text-gray-800 border-gray-300 hover:bg-gray-100;
    }

    &.button-danger {
      @apply text-red-600 border-red-600/50 hover:bg-red-50 hover:border-red-600;
    }

    &.disabled {
      @apply opacity-50 pointer-events-none cursor-not-allowed;
    }
  }

  & svg {
    @apply inline-block mr-0.5;
  }
}