_m-text-icon.scss

@use "../01-abstract/constants" as *;
@use "f-get-svg-url" as *;

/**
 * Add icon before text with mask to have the same color of the text
 *
 * @author Cédric Andrietti
 *
 * @param $icon
 *
 * Examples :
 *
 *      .my-element {
 *          @include text-icon('search');
 *      }
 *
 */

@mixin text-icon($icon: "arrow", $position: after, $color: currentColor, $size: 12px, $gap: 8px) {
    position: relative;
    display: inline-flex;
    gap: $gap;
    align-items: center;

    &::#{$position} {
        display: block;
        width: $size;
        height: $size;
        content: "";
        background-color: $color;
        mask-image: get-svg-url($icon);
        mask-position: center;
        mask-repeat: no-repeat;
        transition: background-color .5s $ease-out-expo;
    }
}

@mixin text-external-icon($icon: "external", $position: after, $color: currentColor, $size: 12px, $gap: 8px) {
    @include text-icon($icon, $position, $color, $size);
    display: inline-block;

    &::#{$position} {
        display: inline-block;
        margin-inline-start: $gap;
    }
}