$crc: '.h-popover';
$popper-arrow-size: 8px;

#{$crc}{
	border: $v-control-border-width solid $c-primary-border;
	background: $c-primary-background;
	border-radius: $v-box-border-radius;
	padding: $g-8;
	padding-top: ($g-8 + 3px - $v-control-border-width);
	display: flex;
	filter: drop-shadow($sd-tooltip-box);

	&:after {
		content: '';
		position: absolute;
		height: 3px;
		left: 0;
		right: 0;
		top: 0;
		background: $c-primary;
		border-radius: $v-box-border-radius $v-box-border-radius 0 0;
	}
}


#{$crc}__arrow{
	width: 0;
	height: 0;
	border-style: solid;
}
[data-arrow-placement='top'] #{$crc}__arrow {
	border-width: 0 $popper-arrow-size $popper-arrow-size $popper-arrow-size;
	border-color: transparent transparent $c-primary transparent;
}
[data-arrow-placement='right'] #{$crc}__arrow {
	border-width: $popper-arrow-size 0 $popper-arrow-size $popper-arrow-size;
	border-color: transparent transparent transparent $c-primary;
}
[data-arrow-placement='bottom'] #{$crc}__arrow {
	border-width: $popper-arrow-size $popper-arrow-size 0 $popper-arrow-size;
	border-color: $c-primary transparent transparent transparent;
}
[data-arrow-placement='left'] #{$crc}__arrow {
	border-width: $popper-arrow-size $popper-arrow-size $popper-arrow-size 0;
	border-color: transparent $c-primary transparent transparent;
}