@layer components {
    .btn {
      @apply inline-flex items-center justify-center whitespace-nowrap rounded-md text-center text-sm font-semibold leading-5 text-grey transition focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed;
    }
  
    .btn--primary {
      @apply px-8 py-3.5 border border-dark rounded-full;
    }

    .btn--secondary {
      @apply px-8 py-3.5 rounded-full bg-var-dark text-var-light transition hover:bg-var-light hover:text-var-dark hover:shadow-darkness
    }

    .btn--tertiary {
      @apply px-8 py-3.5 rounded-full bg-var-light text-var-dark shadow-pale transition hover:bg-var-dark hover:text-var-light
    }

    .btn--variable {
      @apply px-8 py-3.5 rounded-full bg-var-light text-var-dark shadow-pale transition hover:bg-var-light hover:text-var-dark
    }
  
    .btn--link {
      @apply text-grey relative before:block before:absolute before:left-0 before:bottom-1 before:w-full before:h-[1px] before:bg-grey after:content-['>'] after:ml-1 before:transition before:origin-left before:opacity-0 before:scale-0 hover:before:scale-100 hover:before:opacity-100;
    }

    .btn--simple {
      @apply relative font-medium before:block before:absolute before:left-0 before:-bottom-1 before:w-full before:h-[1px] before:bg-dark before:transition before:origin-center before:scale-x-90 hover:before:scale-x-100
    }
  }