@use "sass:list";

/**
 * Add active, focus and hover pseudo selectors to element
 * @param {string||list} $additionalSelectors
 * List of additional selectors
 *
 * @param {boolean} $onlyNoTouch
 * 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
 */
@mixin hover($onlyNoTouch: null, $additionalSelectors: null) {
    $selectors: "&:hover", "&:active", "&:focus";

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

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