.btn {
  @apply .rounded .p-2;
  transition: all 100ms ease-in-out;

  /**
   * Button Colors
   */
  &.btn-primary {
    @apply .bg-primary-500 .border-primary-600 .border .text-white;

    &:hover:enabled {
      @apply .bg-primary-600 .border-primary-800;
    }
  }

  &.btn-green {
    @apply .bg-green-500 .border-green-600 .border .text-white;

    &:hover:enabled {
      @apply .bg-green-600 .border-green-800;
    }
  }

  &.btn-red {
    &:not(.btn-secondary) {
      @apply .bg-red-500 .border-red-600 .border .text-white;
    }

    &:hover:enabled {
      @apply .bg-red-600 .border-red-800;
    }
  }

  &.btn-secondary {
    @apply .border .border-neutral-400 .text-neutral-600;

    &:hover:enabled {
      @apply .border-neutral-500 .text-neutral-800;
    }

    &.btn-red:hover:enabled {
      @apply .bg-red-600 .border-red-800 .text-white;
    }
  }

  /**
   * Button Sizes
   */
  &.btn-jumbo {
    @apply .p-4 .w-full .uppercase .tracking-wide .text-sm;
  }

  &.btn-lg {
    @apply .p-4 .uppercase .tracking-wide .text-sm;
  }

  &.btn-sm {
    @apply .px-6 .py-3 .uppercase .tracking-wide .text-sm;
  }

  &.btn-xs {
    @apply .py-2 .px-2 .uppercase .text-xs;
  }

  &:disabled, &.disabled {
    opacity: 0.55;
    cursor: default;
  }
}