@use "../config" as *;
@use "../mixins/transition" as *;

@layer helpers {
  .icon-link {
    display: inline-flex;
    gap: $icon-link-gap;
    align-items: center;
    text-decoration-color: rgba(var(--link-color-rgb), var(--link-opacity, .5));
    text-underline-offset: $icon-link-underline-offset;
    backface-visibility: hidden;

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

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