@use 'sass:map';
@use '../context' as *;

$component-name: map.get($components-names, vv-button);
$component-map: $vv-button;
$component-selector: '.#{ $component-name}';

@include spread-map-into-bem(
	$map: $component-map,
	$block: $component-name,
	$props: $use-custom-props-for-components,
	$zero-specificity: $zero-specificity-for-components,
	$custom-block: true,
	$bps: $breakpoints
) {
	// custom block
	%#{$component-name} {
		-webkit-tap-highlight-color: transparent;
		-webkit-touch-callout: none;
		align-items: center;
		cursor: pointer;
		display: inline-flex;
		justify-content: center;
		text-align: center;
		touch-action: manipulation;
		user-select: none;

		@include spread-map-into-attrs(
			$map: $component-map,
			$prefix: $component-name,
			$props: $use-custom-props-for-components
		);
	}

	@include wrap-with-where(
		$selector: $component-selector,
		$enabled: $zero-specificity-for-components
	) {
		&:where(
				a[href],
				button,
				input[type='button'],
				input[type='submit'],
				input[type='reset']
			) {
			@extend %#{$component-name};
		}
	}
}