@use "../functions" as *;
@use "../mixins/tokens" as *;
@use "../mixins/transition" as *;

$icon-link-tokens: () !default;

// scss-docs-start icon-link-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$icon-link-tokens: defaults(
  (
    --icon-link-gap: .375rem,
    --icon-link-underline-offset: .25em,
    --icon-link-icon-size: 1em,
    --icon-link-icon-transition: .2s ease-in-out transform,
    --icon-link-icon-transform: translate3d(.25em, 0, 0),
  ),
  $icon-link-tokens
);
// scss-docs-end icon-link-tokens

@layer helpers {
  .icon-link {
    @include tokens($icon-link-tokens);

    display: inline-flex;
    gap: var(--icon-link-gap);
    align-items: center;
    text-decoration-color: color-mix(in oklch, var(--link-color) 50%, transparent);
    text-underline-offset: var(--icon-link-underline-offset);
    backface-visibility: hidden;

    > .bi {
      flex-shrink: 0;
      width: var(--icon-link-icon-size);
      height: var(--icon-link-icon-size);
      fill: currentcolor;
      @include transition(var(--icon-link-icon-transition));
    }
  }

  .icon-link-hover {
    &:hover,
    &:focus-visible {
      > .bi {
        transform: var(--icon-link-transform, var(--icon-link-icon-transform));
      }
    }
  }
}