@import '../../../styles/_partials/index';

$arrowSize: 16px;
$arrowSizeRotated: calculateRotatedSquaresLength($arrowSize, 45deg);
$transitionEaseIn: cubic-bezier(.2,.3,.25,.9);
$extraShadowArea: 100%;
$borderThickness: 1px;

@mixin tooltipBoxShadow {
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.14);
}

.Tooltip_Popper_PositionContainer {
	z-index: 10;

	&:focus {
		outline: none;
	}
}

.Tooltip_Popper_VisualContainer {
	padding: 10px 15px;
	font-weight: 300;
	text-align: center;
	@include theme-color-graydark50-else-gray25;
	@include theme-input-background-color;
	@include theme-input-border;
	@include tooltipBoxShadow;
	--transition-duration: 120ms;

	transition:
		transform var(--transition-duration) $transitionEaseIn,
		transform-origin var(--transition-duration) $transitionEaseIn,
		opacity calc(var(--transition-duration)* 1.5) $transitionEaseIn;
	will-change: transform;

	visibility: hidden;
	opacity: 0;
	transform: scale(0.0);
	transform-origin: 50% 50%;

	&[data-popper-placement='top'] {
		transform-origin: 50% 100%;
	}

	&[data-popper-placement='right'] {
		transform-origin: 0 50%;
	}

	&[data-popper-placement='bottom'] {
		transform-origin: 50% 0;
	}

	&[data-popper-placement='left'] {
		transform-origin: 100% 50%;
	}

	&[data-popper-placement='top-start'], &[data-popper-placement='right-end'] {
		transform-origin: 0 100%;
	}

	&[data-popper-placement='top-end'], &[data-popper-placement='left-end'] {
		transform-origin: 100% 100%;
	}

	&[data-popper-placement='right-start'], &[data-popper-placement='bottom-start'] {
		transform-origin: 0 0;
	}


	&[data-popper-placement='bottom-end'], &[data-popper-placement='left-start'] {
		transform-origin: 100% 0;
	}
}

.Tooltip_Popper_VisualContainer__IsShowing {
	visibility: visible;
	opacity: 1;
	transform: scale(1.0);
}

.Tooltip_Popper_VisualContainer__IsTransitionLeaving {
	visibility: visible;
	opacity: 0;
	transform: scale(0.0);
}

.Tooltip_Popper_VisualContain__NoAnimations {
	--transition-duration: 1ms;
}

.Tooltip_Popper_Arrow_Container {
	position: absolute;
	pointer-events: none;

	&[data-popper-placement^='top'] {
		bottom: -6 - $borderThickness - 1; // overlay border
		transform-origin: 0 100%;
	}

	&[data-popper-placement^='right'] {
		left: -1 * calc($arrowSize / 2) + $borderThickness - 1;
		top: calc(50% - #{calc($arrowSizeRotated / 2)});
		transform-origin: 49% 57%;
	}

	&[data-popper-placement^='bottom'] {
		top: -1 * calc($arrowSize / 2) + $borderThickness - 1;
		left: calc(50% - #{calc($arrowSizeRotated / 2)});
		transform-origin: 60% 46%;

		&[data-popper-placement$='start'] {
			left: 13px;
		}

		&[data-popper-placement$='end'] {
			left: calc(100% - #{$arrowSizeRotated} - 13px);
		}
	}

	&[data-popper-placement^='left'] {
		right: -1 * calc($arrowSize / 2) + $borderThickness - 1;
		top: calc(50% - #{calc($arrowSizeRotated/ 2)});
		transform-origin: 70% 63%;
	}

	&[data-popper-placement^='top'][data-popper-placement$='start'],
	&[data-popper-placement^='bottom'][data-popper-placement$='start'] {
		left: 13px;
	}

	&[data-popper-placement^='top'][data-popper-placement$='end'],
	&[data-popper-placement^='bottom'][data-popper-placement$='end'] {
		left: calc(100% - #{$arrowSizeRotated} - 13px);
	}

	&[data-popper-placement^='right'][data-popper-placement$='start'],
	&[data-popper-placement^='left'][data-popper-placement$='start'] {
		top: 13px;
	}

	&[data-popper-placement^='right'][data-popper-placement$='end'],
	&[data-popper-placement^='left'][data-popper-placement$='end'] {
		top: calc(100% - #{$arrowSizeRotated} - 13px);
	}
}

.Tooltip_Popper_Arrow {
	width: $arrowSize;
	height: $arrowSize;
	@include theme-input-background-color;
	@include theme-input-border;
	border-radius: 0 0 4px 0;
	@include tooltipBoxShadow;

	// pre-rotate poly used to clip the content
	clip-path: polygon(
		(0% - $extraShadowArea) (100% + $extraShadowArea), // bottom-left (left after rotate)
		(100% + $extraShadowArea) (0% - $extraShadowArea), // top-right (right after rotate)
		(100% + $extraShadowArea) (100% + $extraShadowArea) // bottom-right (bottom after rotate)
	);

	&[data-popper-placement^='top'] {
		transform: rotate(45deg);
	}

	&[data-popper-placement^='right'] {
		transform: rotate(135deg);
	}

	&[data-popper-placement^='bottom'] {
		transform: rotate(225deg);
	}

	&[data-popper-placement^='left'] {
		transform: rotate(-45deg);
	}
}