////
///
/// Icon Link Mixins
/// ===========================================================================
///
/// Icon link utility mixins for links with icons.
///
/// @group Mixins.Utilities
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

@use "../../dev" as *;
@use "../../variables/utilities" as *;

// ============================================================================
// Mixins
// ============================================================================

/// Icon link mixin - link with animated icon
@mixin icon_link {
    display: inline-flex;
    gap: $icon-link-gap;
    align-items: center;
    text-decoration-color: color-mix(
        in srgb,
        currentcolor #{$icon-link-underline-opacity},
        transparent
    );
    text-underline-offset: $icon-link-underline-offset;
    backface-visibility: hidden;

    > .icon,
    > svg {
        flex-shrink: 0;
        width: $icon-link-icon-size;
        height: $icon-link-icon-size;
        fill: currentcolor;
        transition: transform $icon-link-transition-duration
            $icon-link-transition-timing;
    }

    &:hover,
    &:focus {
        > .icon,
        > svg {
            transform: translate3d($icon-link-hover-translate, 0, 0);
        }
    }
}