<commit_before>/*
 * Button shape
 */
.button-henlo {
	padding: em(5) em(16) em(6); // design want 34px height
	border: 1px solid var(--button-default-border-color, transparent);
	border-radius: $global-border-radius;
	background-color: var(--button-default-background-color, transparent);
	color: var(--button-default-text-color, inherit);
	transition: 0.15s easing(easeOutQuint), background-position 0s;

	&,
	&:hover,
	&:focus,
	&:focus-within,
	&:active {
		text-decoration: none;
	}

	&:hover,
	&:focus,
	&:focus-within,
	&.is-hover {
		border-color: var(--button-hover-border-color, transparent);
		background-color: var(--button-hover-background-color, transparent);
		color: var(--button-hover-text-color, inherit);
	}

	&:not(div):active,
	// not(div) prevents active state in case of button groups with dropdowns
	&.is-active {
		border-color: var(--button-active-border-color, transparent);
		background-color: var(--button-active-background-color, transparent);
		color: var(--button-active-text-color, inherit);
	}

	&[disabled],
	&.is-disabled {
		pointer-events: none;

		&:not([aria-busy='true']) {
			opacity: 0.5;
		}
	}

	&[aria-expanded='true'] .caret-like {
		@extend .rotateX-180;
	}
}

/*
 * Button variants
 */
@each $color in (norm, weak, danger, warning, success, info) {
	// Default shape
	.button-solid-#{$color} {
		--button-default-background-color: var(--interaction-#{$color});
		--button-default-text-color: var(--interaction-#{$color}-contrast);

		@each $state in (hover, active) {
			--button-#{$state}-background-color: var(
				--interaction-#{$color}-#{$state}
			);
			--button-#{$state}-text-color: var(
				--interaction-#{$color}-contrast
			);
		}
	}

	// Outline shape
	.button-outline-#{$color} {
		--button-default-border-color: var(--interaction-#{$color});

		@if $color == 'weak' {
			--button-default-text-color: var(--interaction-weak-contrast);
		} @else {
			--button-default-text-color: var(--interaction-#{$color});
		}

		@each $state in (hover, active) {
			--button-#{$state}-border-color: var(
				--interaction-#{$color}-#{$state}
			);

			@if $color == 'weak' {
				--button-#{$state}-text-color: var(--interaction-weak-contrast);
			} @else {
				--button-#{$state}-text-color: var(
					--interaction-#{$color}-#{$state}
				);
			}
		}
	}

	// Ghost shape
	.button-ghost-#{$color} {
		--button-default-background-color: transparent;

		@if $color == 'weak' {
			--button-default-text-color: var(--interaction-weak-contrast);
		} @else {
			--button-default-text-color: var(--interaction-#{$color});
		}

		@each $state in (hover, active) {
			--button-#{$state}-background-color: var(
				--interaction-#{$color}-#{$state}
			);
			--button-#{$state}-text-color: var(
				--interaction-#{$color}-contrast
			);
		}
	}
}

/*
 * Modifiers
 */

.button-small {
	padding: em(1) em(12) em(2); // design want 26px height
}

.button-large {
	padding: em(10) em(20) em(9); // design want 42px height
}

.button-for-icon {
	padding: em(8);

	&.button-small {
		padding: em(4);
	}

	&.button-large {
		padding: em(12);
	}

	svg {
		display: block;
	}
}

.button-pill {
	border-radius: 2em;
}

.button-link {
	padding-left: 0;
	padding-right: 0;
	border: none;
	background: none;
	color: var(--interaction-norm);
	text-decoration: underline;<commit_msg>Update buttons<commit_after>/*
 * Button shape
 */
.button-henlo {
	// design want 34px height
	padding: em(5) em(16) em(6);

	// usage of box-shadow instead of border to enable increasing size of _visual_ border without shifting button size
	box-shadow: inset 0 0 0 var(--button-default-box-shadow-width, 0)
		var(--button-default-border-color, transparent);

	border: none;
	border-radius: $global-border-radius;
	outline: none; // be careful of a11y
	background-color: var(--button-default-background-color, transparent);
	color: var(--button-default-text-color, inherit);
	transition: 0.15s easing(easeOutQuint), background-position 0s;

	&,
	&:hover,
	&:focus,
	&:focus-within,
	&:active {
		text-decoration: none;
	}

	&:hover,
	&:focus,
	&:focus-within,
	&.is-hover {
		border-color: var(--button-hover-border-color, transparent);
		box-shadow: inset 0 0 0 var(--button-hover-box-shadow-width, 0)
			var(--button-hover-border-color, transparent);
		background-color: var(--button-hover-background-color, transparent);
		color: var(--button-hover-text-color, inherit);
	}

	&:not(div):active,
	// not(div) prevents active state in case of button groups with dropdowns
	&.is-active {
		border-color: var(--button-active-border-color, transparent);
		box-shadow: inset 0 0 0 var(--button-active-box-shadow-width, 0)
			var(--button-active-border-color, transparent);
		background-color: var(--button-active-background-color, transparent);
		color: var(--button-active-text-color, inherit);
	}

	&[disabled],
	&.is-disabled {
		pointer-events: none;

		&:not([aria-busy='true']) {
			opacity: 0.5;
		}
	}

	&[aria-expanded='true'] .caret-like {
		@extend .rotateX-180;
	}
}

/*
 * Button variants
 */
@each $color in (norm, weak, danger, warning, success, info) {
	// Initialize namespace
	$group: 'signal-';
	@if $color == 'norm' or $color == 'weak' {
		$group: 'interaction-';
	}

	// Default shape
	.button-solid-#{$color} {
		--button-default-background-color: var(--#{$group + $color});
		--button-default-text-color: var(--#{$group + $color}-contrast);

		@each $state in (hover, active) {
			--button-#{$state}-background-color: var(
				--#{$group + $color}-#{$state}
			);
			--button-#{$state}-text-color: var(--#{$group + $color}-contrast);
		}
	}

	// Outline shape
	.button-outline-#{$color} {
		--button-default-box-shadow-width: 1px;
		--button-default-border-color: var(--#{$group + $color});

		@if $color == 'weak' {
			--button-default-text-color: var(--text-norm);
		} @else {
			--button-default-text-color: var(--#{$group + $color});
		}

		@each $state in (hover, active) {
			--button-#{$state}-box-shadow-width: 2px;
			--button-#{$state}-border-color: var(
				--#{$group + $color}-#{$state}
			);

			@if $color == 'weak' {
				--button-#{$state}-text-color: var(--text-norm);
			} @else {
				--button-#{$state}-text-color: var(
					--#{$group + $color}-#{$state}
				);
			}
		}
	}

	// Ghost shape
	.button-ghost-#{$color} {
		--button-default-background-color: var(--interaction-ghost);

		@if $color == 'weak' {
			--button-default-text-color: var(--text-norm);
		} @else {
			--button-default-text-color: var(--#{$group + $color});
		}

		@each $state in (hover, active) {
			--button-#{$state}-background-color: var(
				--interaction-ghost-#{$state}
			);

			@if $color == 'weak' {
				--button-#{$state}-text-color: var(--text-norm);
			} @else {
				--button-#{$state}-text-color: var(
					--#{$group + $color}-#{$state}
				);
			}
		}
	}
}

/*
 * Modifiers
 */

.button-small {
	padding: em(1) em(12) em(2); // design want 26px height
}

.button-large {
	padding: em(10) em(20) em(9); // design want 42px height
}

.button-for-icon {
	padding: em(8);

	&.button-small {
		padding: em(4);
	}

	&.button-large {
		padding: em(12);
	}

	svg {
		display: block;
	}
}

.button-pill {
	border-radius: 2em;
}

.button-link {
	padding: em(5) 0 em(6);
	color: var(--interaction-norm);
	text-decoration: underline;
{'fraction_non_alphanumeric': 0.20986633595149512, 'fraction_numerical': 0.012126222957144826, 'mean_word_length': 3.1905311778290995, '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': '4431951', 'n_tokens_mistral': 3027, 'n_tokens_neox': 2650, 'n_words': 498}