_m-hover.scss

@use "sass:meta";
@use "sass:list";

/**
 * Hover
 *
 * Add active, focus and hover pseudo selectors to element
 * With $onlyNoTouch set to true, the hover style will only work when the user is using a tool device like a mouse or a trackpad.
 * https://defensivecss.dev/tip/hover-media/
 * https://developer.mozilla.org/fr/docs/Web/CSS/@media/hover
 *
 * @author Cédric Andrietti
 *
 * @param $onlyNoTouch
 * @param $additionalSelectors
 *
 * Examples :
 *
 *      .my-element {
 *          @include hover {
 *              ... your css
 *          }
 *      }
 *
 *      .my-element {
 *          @include hover(false, "&:focus-within") {
 *              ... your css
 *          }
 *      }
 *
 *      .my-element {
 *          @include hover(true, "&:focus-within") {
 *              ... your css
 *          }
 *      }
 *
 *      .my-element {
 *          @include hover(true) {
 *              ... your css
 *          }
 *      }
 *
 */
@mixin hover($onlyNoTouch: null, $additionalSelectors: null) {
    $selectors: "&:hover", "&:active", "&:focus";

    @if ($additionalSelectors) {
        @if (meta.type-of($additionalSelectors) == "string") {
            $selectors: $selectors "," $additionalSelectors;
        }
        @else if (meta.type-of($additionalSelectors) == "list") {
            $selectors: list.join($selectors, $additionalSelectors, comma);
        }
    }

    @if $onlyNoTouch {
        @media (hover: hover) {
            #{$selectors} {
                @content;
            }
        }
    } @else {
        #{$selectors} {
            @content;
        }
    }
}