@use 'sass:list';
@use 'sass:selector';
@use '../../functions/list/list-join/list-join.scss' as *;
@use '../../functions/list/list-slice/list-slice.scss' as *;
@use '../../functions/string/str-split/str-split.scss' as *;

/**
 * Allows to use multiple modifiers in a single selector while using BEM methodology.
 *
 * @param    {list}    $modifiers    A list of additional modifiers.
 */
@mixin bem-modifiers($modifiers...) {
	$separator: '--';

	$individual-selectors: str-split(selector.parse(&), ',');

	@each $selector in $individual-selectors {
		$selectors: str-split(list.nth($selector, 1), ' ');
		$ancestors: list-slice($selectors, 1, -2);

		$main: list-slice($selectors, -1);

		$bem: str-split($main, $separator);
		$element: list.nth($bem, 1);
		$modifier: if(list.length($bem) >= 2, list.nth($bem, 2), null);

		@if ($modifier) {
			$modifiers: list.join('#{$separator}#{$modifier}', $modifiers);
		}

		$selector: list.join($ancestors, ());
		$selector: list.join($selector, list-join(selector.append($element, $modifiers), ''));
		$selector: list-join($selector, ' ');

		@at-root #{$selector} {
			@content;
		}
	}
}