@layer components {
  .button.is-super {
    @apply font-bold min-h-[84px] rounded-[44px] px-[23px] grid-cols-[auto_auto] gap-15 leading-[20px] items-center hyphens-auto;
    grid-template-columns: 40px 1fr;

    &.is-limited {
      @apply w-full md:w-[340px] max-w-[100%];
    }

    svg {
      @apply col-start-1 row-start-1 relative z-10 mx-auto w-25 h-25;
      color: var(--button-bg);
    }

    &:before,
    &:after {
      /* Force both the icon and the circle to be in the first column. */
      @apply !col-start-1 !row-start-1;
    }

    /* The icon (e.g. arrow). */
    &:before {
      @apply z-10 text-center !mx-0 text-[22px];
      color: var(--button-bg);
    }

    /* The blue circle. */
    &:after {
      @apply w-[40px] h-[40px] shrink-0 rounded-full content-empty;
      background: var(--button-text);
    }
  }

  /* Override for the PDF auto icon. */
  .button.is-link.is-super[href*='.pdf'],
  .button.is-link.is-super[href*='.qdf'] {
    &:after {
      color: var(--button-bg);
      @apply text-[22px] leading-none !pt-[20px] !pl-[12.5px] !translate-y-0;
    }
  }
}