@use "sass:math";

$crc: '.h-tooltip';
$popper-arrow-size: 16px;

#{$crc}{
	box-sizing: border-box;
	//display: inline-block;
	//line-height: $v-control-height - ($g-8 * 2) - ($v-control-border-width * 2);
	padding: $g-8 $g-12;
	background: $c-primary-background;
	border-radius: $v-control-border-radius;
	border: $v-control-border-width solid $c-primary-border;
	box-shadow: $sd-tooltip-box;
	pointer-events: none;
	word-break: break-word;

	&:after {
		content: '';
		position: absolute;
		background: $c-primary;
	}

	&[data-floating-placement^='top'] {
		padding-bottom: $g-8 + 1px;

		&:after {
			left: -1px;
			right: -1px;
			bottom: -1px;
			height: 2px;
			border-radius: 0 0 2px 2px;
		}

		#{$crc}__arrow{
			bottom: -$popper-arrow-size;
			left: calc(50% - #{math.div($popper-arrow-size, 2)});
			transform: rotate(180deg);
		}
	}
	&[data-floating-placement^='left'] {
		padding-right: $g-12 + 1px;

		&:after {
			top: -1px;
			right: -1px;
			bottom: -1px;
			width: 2px;
			border-radius: 0 2px 2px 0;
		}
		#{$crc}__arrow{
			right: -$popper-arrow-size;
			top: calc(50% - #{math.div($popper-arrow-size, 2)});
			transform: rotate(90deg);
		}
	}

	&[data-floating-placement^='bottom'] {
		padding-top: $g-8 + 1px;

		&:after {
			left: -1px;
			right: -1px;
			top: -1px;
			height: 2px;
			border-radius: 2px 2px 0 0;
		}

		#{$crc}__arrow{
			top: -$popper-arrow-size;
			left: calc(50% - #{math.div($popper-arrow-size, 2)});
		}
	}
	&[data-floating-placement^='right'] {
		padding-left: $g-12 + 1px;

		&:after {
			top: -1px;
			left: -1px;
			bottom: -1px;
			width: 2px;
			border-radius: 2px 0 0 2px;
		}

		#{$crc}__arrow{
			left: -$popper-arrow-size;
			top: calc(50% - #{math.div($popper-arrow-size, 2)});
			transform: rotate(-90deg);
		}
	}
}

#{$crc}__arrow{
	position: absolute;
	color: $c-primary;
	width: $popper-arrow-size;
	height: $popper-arrow-size;
}