@import '../../variables.less';
@import '../../mixins.less';
/**********************
tooltip.less
*************************/
.ecf-tooltip-wrap {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}
.ecf-tooltip {
	.roundedcorners(4px);
	.opacity(0);
	.box-shadow(0 0 15px fade(@black, 10));
	color: @white;
	background: @text_3;
	position: absolute;
	padding: 3px 10px 3px;
	visibility: hidden;
	z-index: 100;
	width: max-content;
	font-size: 14px;
	&.non-active {
		.opacity(0) !important;
		visibility: hidden !important;
	}
	&:after {
		position: absolute;
		content: '';			
		border-style: solid;
	}

	&.ecf-tooltip-top {
		bottom: calc(~"100% + 5px");
		left: 50%;
		&:after {		
			border-width: 4px 3px 0 3px;
			border-color: @text_3 transparent transparent transparent;
			left: calc(~"50% - 3px");
			top: 100%;
		}
	}

	&.ecf-tooltip-bottom {
		top: calc(~"100% + 5px");
		left: 50%;
		&:after {
			border-width: 0 3px 4px 3px;
			border-color: transparent transparent @text_3 transparent;
			left: calc(~"50% - 3px");
			bottom: 100%;
		}
	}
	&.ecf-tooltip-left {
		right: calc(~"100% + 5px");
		top: 50%;
		&:after {
			border-width: 3px 0 3px 4px;
			border-color: transparent transparent transparent @text_3;
			left: 100%;
			top: calc(~"50% - 3px");
		}
	}
	&.ecf-tooltip-right {
		left: calc(~"100% + 5px");
		top: 50%;
		&:after {
			border-width: 3px 4px 3px 0;
			border-color: transparent @text_3 transparent transparent;
			right: 100%;
			top: calc(~"50% - 3px");
		}
	}
}