@layer components {
  .button {
    @apply inline-flex justify-center items-center py-3 px-8 text-xs leading-tight font-semibold 
    uppercase text-center rounded border border-solid border-transparent 
    no-underline hover:no-underline transition-colors duration-300 cursor-pointer
    bg-[var(--rb-button-background-color)] hover:bg-[var(--rb-button-hover-background-color)]
    text-[var(--rb-button-color)] hover:text-[var(--rb-button-color)];
  }
  
  .button-primary {
    @apply bg-[var(--rb-button-background-color)] hover:bg-[var(--rb-button-hover-background-color)] text-[var(--rb-button-color)] hover:text-[var(--rb-button-color)] border-[var(--rb-button-background-color)] hover:border-[var(--rb-button-hover-background-color)];
  }
  
  .button-secondary {
    @apply bg-[var(--rb-second-button-background-color)] hover:bg-[var(--rb-second-button-hover-background-color)] text-[var(--rb-second-button-color)] hover:text-[var(--rb-second-button-color)] border-[var(--rb-second-button-background-color)] hover:border-[var(--rb-second-button-hover-background-color)];
  }
  
  .button-outline-primary {
    @apply bg-transparent text-[var(--rb-first-color)] border-[var(--rb-first-color)] hover:text-[var(--rb-button-color)] hover:bg-[var(--rb-first-color)];
  }

  .button.loading::after {
	@apply content-['\f110'] pointer-events-none w-fit inline-block ml-2 font-awesome animate-spin;
  }

  .link {
	  @apply font-semibold text-[var(--rb-first-color)] hover:underline inline-block;
  }
}