@layer components {

  /* APPEARANCE */
  .link--with-arrow-inline {
    @apply hover:underline leading-normal inline-block relative;
  }
  .link--with-arrow-inline svg {
    @apply inline-block text-base ml-2;
  }
  .link--with-arrow-inline:after {
    margin-top: calc(0.75em - 0.5rem);
  }

  .link--with-arrow-block {
    @apply hover:underline leading-normal py-2 flex gap-2 items-center;
  }
  .link--with-arrow-block svg {
    @apply relative top-[.2em];
  }
  .link--with-arrow-block > span:first-child {
    @apply flex-1;
  }
}