<commit_before>/**
 * source: hint-position.scss
 *
 * Defines the positoning logic for the tooltips.
 *
 * Classes added:
 * 	1) hint--top
 * 	2) hint--bottom
 * 	3) hint--left
 * 	4) hint--right
 */

@mixin vertical-positioned-tooltip($propertyY, $transitionDirection, $xDirection:0) {
	&:before {
		// bring arrow inside so that it animates to normal position when shown
		margin-#{$propertyY}: -2 * $hintArrowBorderWidth + 1px;
	}

	&:before, &:after {
		#{$propertyY}: 100%;
		left: 50%; // get top-left corner in center
	}

	&:before {
		left: calc(50% - #{$hintArrowBorderWidth}); // get arrow center aligned with content
	}

	$translateX: -50%;
	@if $xDirection == -1 {
		$translateX: -100%;
	}
	@elseif $xDirection == 1 {
		$translateX: 0;
	}

	&:after {
		@include vendor('transform', translateX($translateX));
	}

	&:after {
		@if $xDirection != 0 {
			// bring back the tooltip by some offset so that arrow doesn't stick at end
			margin-left: -$xDirection * $hintArrowOffsetX;
		}
	}

	&:hover, &:focus {
		@include set-margin('translateY', $transitionDirection, $translateX);
	}
}

@mixin horizontal-positioned-tooltip($propertyX, $transitionDirection) {
	&:before {
		// bring arrow inside so that it animates to normal position when shown
		margin-#{$propertyX}: -2 * $hintArrowBorderWidth + 1px;
		// bring back to center vertically
		margin-bottom: -1 * $hintArrowBorderWidth;
	}

	&:after {
		// bring back to center
		margin-bottom: -1 * floor($hintTooltipHeight / 2);
	}

	&:before, &:after {
		#{$propertyX}: 100%;
		bottom: 50%;
	}

	&:hover, &:focus {
		@include set-margin('translateX', $transitionDirection);
	}
}
<commit_msg>doc(position): add comments for +1px space hack.<commit_after>/**
 * source: hint-position.scss
 *
 * Defines the positoning logic for the tooltips.
 *
 * Classes added:
 * 	1) hint--top
 * 	2) hint--bottom
 * 	3) hint--left
 * 	4) hint--right
 */

@mixin vertical-positioned-tooltip($propertyY, $transitionDirection, $xDirection:0) {
	&:before {
		// bring arrow inside so that it animates to normal position when shown.
		// HACK: +1px to avoid the 1 px white space between arrow and body during transition.
		margin-#{$propertyY}: -2 * $hintArrowBorderWidth + 1px;
	}

	&:before, &:after {
		#{$propertyY}: 100%;
		left: 50%; // get top-left corner in center
	}

	&:before {
		left: calc(50% - #{$hintArrowBorderWidth}); // get arrow center aligned with content
	}

	$translateX: -50%;
	@if $xDirection == -1 {
		$translateX: -100%;
	}
	@elseif $xDirection == 1 {
		$translateX: 0;
	}

	&:after {
		@include vendor('transform', translateX($translateX));
	}

	&:after {
		@if $xDirection != 0 {
			// bring back the tooltip by some offset so that arrow doesn't stick at end
			margin-left: -$xDirection * $hintArrowOffsetX;
		}
	}

	&:hover, &:focus {
		@include set-margin('translateY', $transitionDirection, $translateX);
	}
}

@mixin horizontal-positioned-tooltip($propertyX, $transitionDirection) {
	&:before {
		// bring arrow inside so that it animates to normal position when shown
		// HACK: +1px to avoid the 1 px white space between arrow and body during transition.
		margin-#{$propertyX}: -2 * $hintArrowBorderWidth + 1px;
		// bring back to center vertically
		margin-bottom: -1 * $hintArrowBorderWidth;
	}

	&:after {
		// bring back to center
		margin-bottom: -1 * floor($hintTooltipHeight / 2);
	}

	&:before, &:after {
		#{$propertyX}: 100%;
		bottom: 50%;
	}

	&:hover, &:focus {
		@include set-margin('translateX', $transitionDirection);
	}
}

{'fraction_non_alphanumeric': 0.15301478953356087, 'fraction_numerical': 0.020193401592719, 'mean_word_length': 3.5973856209150328, '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': '7424285', 'n_tokens_mistral': 1313, 'n_tokens_neox': 1204, 'n_words': 342}