.btn {
  @apply .rounded;

  /**
   * Button Colors
   */
  &.btn-blue {
    @apply .bg-blue .border-blue-dark .border .text-white;

    &:hover:enabled {
      @apply .bg-blue-dark .border-blue-darker;
    }
  }

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

    &:hover:enabled {
      @apply .bg-green-dark .border-green-darker;
    }
  }

  &.btn-secondary {
    @apply .border .border-grey-light .text-grey-dark;

    &:hover:enabled {
      @apply .border-grey .text-grey-darker;
    }
  }

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

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

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