<commit_before>@use 'sass:math';

.button-group {
	@extend .inline-flex;
	@extend .flex-nowrap;
	@extend .flex-align-items-stretch;

	border-radius: var(--border-radius-md);
	background-color: var(--background-norm);
	vertical-align: middle;

	&-item {
		&.is-selected {
			pointer-events: none;
		}
	}

	/*
	 * Solid variant
	 */

	// medium item
	&[class*='button-group-solid'] &-item {
		padding-inline: em(12);

		&:not(:first-child) {
			border-start-start-radius: 0;
			border-end-start-radius: 0;
		}

		&:not(:last-child) {
			border-start-end-radius: 0;
			border-end-end-radius: 0;
		}
	}

	// small item
	&-small[class*='button-group-solid'] &-item {
		padding-inline: em(7);
	}

	// large item
	&-large[class*='button-group-solid'] &-item {
		padding-inline: em(17, 16);
	}

	/*
	 * Ghost variant
	 */

	// medium vr
	&[class*='button-group-ghost'] .vr {
		margin-block: em(6);
		margin-inline: em(3);
	}

	// small vr
	&-small[class*='button-group-ghost'] .vr {
		margin-block: em(4);
		margin-inline: em(3);
	}

	// large vr
	&-large[class*='button-group-ghost'] .vr {
		margin-block: em(8);
		margin-inline: em(3);
	}

	// medium item
	&[class*='button-group-ghost'] &-item {
		padding-inline: em(10);
	}

	// small item
	&-small[class*='button-group-ghost'] &-item {
		padding-inline: em(5);
	}

	// large item
	&-large[class*='button-group-ghost'] &-item {
		padding-inline: em(15);
	}

	/*
	 * Outline variant
	 */

	// medium
	&[class*='button-group-outline'] {
		padding: em(3);
		border: 1px solid var(--button-group-border-color, transparent);

		.vr {
			margin-block: em(2);
			margin-inline: em(3);
		}
	}

	// medium item
	&[class*='button-group-outline'] &-item {
		padding-block: em(3);
		padding-inline: em(8);
		border-radius: var(--border-radius-sm);

		&.button-for-icon {
			padding: em(6);
		}

		&[disabled],
		&.is-disabled {
			&:not([aria-busy='true']) {
				background-color: var(--button-default-background-color, transparent);
			}
		}
	}

	// small
	&-small[class*='button-group-outline'] {
		padding: em(2);

		.vr {
			margin: em(2);
		}
	}

	// small item
	&-small[class*='button-group-outline'] &-item {
		padding-block: 0;
		padding-inline: em(4);

		&.button-for-icon {
			padding: em(2);
		}
	}

	// large
	&-large[class*='button-group-outline'] {
		padding: em(4);

		.vr {
			margin-block: em(2);
			margin-inline: em(4);
		}
	}

	// large item
	&-large[class*='button-group-outline'] &-item {
		padding-block: em(4, 16);
		padding-inline: em(12, 16);

		&.button-for-icon {
			padding: em(7, 16);
		}
	}
}

/*
 * Button group color variants
 */

@each $color in (norm, weak) {
	// Initialize namespace
	$group: 'interaction';

	.button-group-solid-#{$color},
	.button-group-outline-#{$color},
	.button-group-ghost-#{$color} {
		// For vertical rule
		--border-norm: var(--#{dash-join($group, $color, 'major-1')});
	}

	.button-group-solid-#{$color} {
		.button-group-item {
			&.is-selected {
				background-color: var(--#{dash-join($group, $color, 'major-2')});
			}
		}
	}

	.button-group-outline-#{$color} {
		--button-group-border-color: var(--#{dash-join($group, $color, 'major-1')});

		.button-group-item {
			border-color: transparent;
		}
	}

	.button-group-outline-#{$color},
	.button-group-ghost-#{$color} {
		.button-group-item {
			&.is-selected {
				background-color: var(--#{dash-join($group, if($color == 'weak', 'norm', $color))});
				color: var(--#{dash-join($group, if($color == 'weak', 'norm', $color), 'contrast')});
			}
		}
	}
}<commit_msg>Fix buttonGroup selected item when disabled<commit_after>@use 'sass:math';

.button-group {
	@extend .inline-flex;
	@extend .flex-nowrap;
	@extend .flex-align-items-stretch;

	border-radius: var(--border-radius-md);
	background-color: var(--background-norm);
	vertical-align: middle;

	&-item {
		&.is-selected {
			pointer-events: none;
		}
	}

	/*
	 * Solid variant
	 */

	// medium item
	&[class*='button-group-solid'] &-item {
		padding-inline: em(12);

		&:not(:first-child) {
			border-start-start-radius: 0;
			border-end-start-radius: 0;
		}

		&:not(:last-child) {
			border-start-end-radius: 0;
			border-end-end-radius: 0;
		}
	}

	// small item
	&-small[class*='button-group-solid'] &-item {
		padding-inline: em(7);
	}

	// large item
	&-large[class*='button-group-solid'] &-item {
		padding-inline: em(17, 16);
	}

	/*
	 * Ghost variant
	 */

	// medium vr
	&[class*='button-group-ghost'] .vr {
		margin-block: em(6);
		margin-inline: em(3);
	}

	// small vr
	&-small[class*='button-group-ghost'] .vr {
		margin-block: em(4);
		margin-inline: em(3);
	}

	// large vr
	&-large[class*='button-group-ghost'] .vr {
		margin-block: em(8);
		margin-inline: em(3);
	}

	// medium item
	&[class*='button-group-ghost'] &-item {
		padding-inline: em(10);
	}

	// small item
	&-small[class*='button-group-ghost'] &-item {
		padding-inline: em(5);
	}

	// large item
	&-large[class*='button-group-ghost'] &-item {
		padding-inline: em(15);
	}

	/*
	 * Outline variant
	 */

	// medium
	&[class*='button-group-outline'] {
		padding: em(3);
		border: 1px solid var(--button-group-border-color, transparent);

		.vr {
			margin-block: em(2);
			margin-inline: em(3);
		}
	}

	// medium item
	&[class*='button-group-outline'] &-item {
		padding-block: em(3);
		padding-inline: em(8);
		border-radius: var(--border-radius-sm);

		&.button-for-icon {
			padding: em(6);
		}

		&[disabled],
		&.is-disabled {
			&:not([aria-busy='true']) {
				background-color: var(--button-default-background-color, transparent);
			}
		}
	}

	// small
	&-small[class*='button-group-outline'] {
		padding: em(2);

		.vr {
			margin: em(2);
		}
	}

	// small item
	&-small[class*='button-group-outline'] &-item {
		padding-block: 0;
		padding-inline: em(4);

		&.button-for-icon {
			padding: em(2);
		}
	}

	// large
	&-large[class*='button-group-outline'] {
		padding: em(4);

		.vr {
			margin-block: em(2);
			margin-inline: em(4);
		}
	}

	// large item
	&-large[class*='button-group-outline'] &-item {
		padding-block: em(4, 16);
		padding-inline: em(12, 16);

		&.button-for-icon {
			padding: em(7, 16);
		}
	}
}

/*
 * Button group color variants
 */

@each $color in (norm, weak) {
	// Initialize namespace
	$group: 'interaction';

	.button-group-solid-#{$color},
	.button-group-outline-#{$color},
	.button-group-ghost-#{$color} {
		// For vertical rule
		--border-norm: var(--#{dash-join($group, $color, 'major-1')});
	}

	.button-group-solid-#{$color} {
		.button-group-item.is-selected:not([disabled], .is-disabled) {
			background-color: var(--#{dash-join($group, $color, 'major-2')});
		}
	}

	.button-group-outline-#{$color} {
		--button-group-border-color: var(--#{dash-join($group, $color, 'major-1')});

		.button-group-item {
			border-color: transparent;
		}
	}

	.button-group-outline-#{$color},
	.button-group-ghost-#{$color} {
		.button-group-item.is-selected:not([disabled], .is-disabled) {
			background-color: var(--#{dash-join($group, if($color == 'weak', 'norm', $color))});
			color: var(--#{dash-join($group, if($color == 'weak', 'norm', $color), 'contrast')});
		}
	}
}
{'fraction_non_alphanumeric': 0.2243201352684233, 'fraction_numerical': 0.014090460758066789, 'mean_word_length': 3.0169779286926994, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2135272', 'n_tokens_mistral': 3168, 'n_tokens_neox': 2833, 'n_words': 455}