@layer components {

  /* APPEARANCE */
  .button--primary {
    @apply whitespace-nowrap inline-block cursor-pointer text-lg focus:outline outline-3 px-9 py-4 bg-agco-burgundy border-3 border-agco-burgundy hover:border-agco-blue-link hover:bg-agco-blue-link outline-agco-blue-link;
    /* Override styles defined in tailwind typography */
    @apply !no-underline !text-white !font-bold;
  }
  .button--secondary {
    @apply whitespace-nowrap inline-block !no-underline cursor-pointer text-lg font-bold focus:outline outline-3 px-9 py-4 text-agco-burgundy border-3 border-agco-burgundy hover:border-agco-blue-link outline-agco-blue-link;
  }
  .button--invert {
    @apply whitespace-nowrap inline-block !no-underline cursor-pointer text-lg font-bold focus:outline outline-3 px-9 py-4 text-white bg-transparent border-3 border-white hover:bg-agco-blue-link hover:border-agco-blue-link;
  }
  .button--tertiary {
    @apply whitespace-nowrap inline-block !no-underline cursor-pointer text-lg font-bold focus:outline outline-3 px-9 py-4 text-agco-burgundy bg-none border-3 border-white hover:text-agco-blue-link outline-agco-blue-link;
  }

  /* SIZE */
  .button--compact {
    @apply px-6 py-2;
  }

  /* ICON */
  .button--icon-after,
  .button--icon-before {
    @apply inline-flex items-center gap-2;
  }
  .button--icon-after svg,
  .button--icon-before svg {
    @apply min-h-[28px];
  }

  /*  PRINT */
  .button--print {
    @apply text-base px-4 py-2;
  }
  .button--print svg {
    @apply min-h-[1em];
  }
}