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

@include layer(components, $use-css-layers, $layer-prefix) {
$component-name: map.get($components-names, vv-button-group);
$component-map: $vv-button-group;
$component-selector: '.#{ $component-name}';
$button-component-name: map.get($components-names, vv-button);
$button-component-selector: '.' + $button-component-name;

@include spread-map-into-bem(
	$map: $component-map,
	$block: $component-name,
	$use-custom-props: $use-custom-props-for-components,
	$zero-specificity: $zero-specificity-for-components,
	$bps: $breakpoints
);

// if has block modifier
@if map.get($component-map, 'modifier', 'block') {
	#{$component-selector + '--block'} {
		#{$button-component-selector} {
			&:not([disabled], [tabindex='-1']) {
				@include wrap-with-where(
					$selector:
						'&.active, &#{$button-component-selector}--active, &:active',
					$enabled: $zero-specificity-for-components
				) {
					z-index: 1;
				}
			}
		}

		@include wrap-with-where(
			$selector: $button-component-selector,
			$enabled: $zero-specificity-for-components
		) {
			flex: 1;
		}
	}
}

// if has compact modifier
@if map.get($component-map, 'modifier', 'compact') {
	#{$component-selector + '--compact'} {
		// if has vertical modifier
		@if map.get($component-map, 'modifier', 'vertical') {
			&#{$component-selector + '--vertical'} {
				#{$button-component-selector} {
					// clear top border-radius for first child
					@include wrap-with-where(
						$selector: '&:not(:first-of-type)',
						$enabled: $zero-specificity-for-components
					) {
						border-top-right-radius: 0;
						border-top-left-radius: 0;
					}

					// clear bottom border-radius for last child
					@include wrap-with-where(
						$selector: '&:not(:last-of-type)',
						$enabled: $zero-specificity-for-components
					) {
						border-bottom-right-radius: 0;
						border-bottom-left-radius: 0;
					}

					// clear margin for inner children
					@if map.get($vv-button, '--button-border-width') {
						@include wrap-with-where(
							$selector: '&:not(:first-of-type, :last-of-type)',
							$enabled: $zero-specificity-for-components
						) {
							margin-block: calc(var(--button-border-width) * -1);
						}
					}
				}
			}
		}

		&:not(#{$component-selector + '--vertical'}) {
			#{$button-component-selector} {
				// clear left border-radius for first child
				@include wrap-with-where(
					$selector: '&:not(:first-of-type)',
					$enabled: $zero-specificity-for-components
				) {
					border-top-left-radius: 0;
					border-bottom-left-radius: 0;
				}

				// clear right border-radius for first child
				@include wrap-with-where(
					$selector: '&:not(:last-of-type)',
					$enabled: $zero-specificity-for-components
				) {
					border-top-right-radius: 0;
					border-bottom-right-radius: 0;
				}

				// clear margin for inner children
				@if map.get($vv-button, '--button-border-width') {
					@include wrap-with-where(
						$selector: '&:not(:first-of-type, :last-of-type)',
						$enabled: $zero-specificity-for-components
					) {
						margin-inline: calc(var(--button-border-width) * -1);
					}
				}
			}
		}
	}
}

}