@use 'mixins/icon';

@mixin promo-arrow {
  @apply relative inline-flex items-center
    gap-x-1
    whitespace-normal
    pr-2
    font-semibold
    no-underline
    tracking-normal
    decoration-0
    motion-safe:duration-300
    after:right-5
    after:inline-block
    after:duration-200
    hover:cursor-pointer
    hover:after:translate-x-2;

  text-decoration: none !important;

  &::after {
    @apply motion-safe:ease-in-out;

    display: inline-block !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    top: 0;

    .subtitle & {
      top: 2px;
    }
  }
}

:is(
    a.link--promo--light--arrow,
    a.link--promo--dark--arrow,
    .link--promo--light--arrow:not([href]) > a,
    .link--promo--dark--arrow:not([href]) > a,
    .pseudo-link--arrow
  ) {
  @include promo-arrow;
}

:is(a.link--promo--dark--arrow,
  .link--promo--dark--arrow:not([href]) > a,
  .pseudo-link--arrow
) {
  @apply text-current ;

  &::after {
    @include icon.render(('icons/arrow-forward.svg'), 'fill=black');
  }

  @apply after:fill-white;
}

:is(a.link--promo--light--arrow, .link--promo--light--arrow:not([href]) > a) {
  @apply text-white ;

  &::after {
    @include icon.render(('icons/arrow-forward.svg'), 'fill=white');
  }
}

*:has(:where(.link--promo--light--arrow, .link--promo--dark--arrow) + :where(.link--promo--light--arrow, .link--promo--dark--arrow)) :where(.link--promo--light--arrow, .link--promo--dark--arrow) {
  @apply me-4;
}

.pseudo-link {
  &, .title {
    @apply transition-all duration-100;
  }

  &:hover,
  &:focus,
  &:focus-visible {
    .title {
      @apply text-sky-600;
    }

    .pseudo-link--arrow {
      @apply motion-safe:after:translate-x-2
    }
  }
}
