@import "variables";
.tooltiper-ballon {
	position: absolute;
	z-index: 9999;
	visibility: hidden;
	opacity: 0;
	@include transition();
	.ballon-close {
		position: absolute; top: 0; right: 0; bottom: 0; left: 0;
		z-index: 5;
		&:hover {
			cursor: pointer;
		}
	}
	.ballon-arrow {
		position: absolute; left: 50%;
		display: block;
		width: 20px;
		height: 10px;
		margin-left: -10px;
		&:before {
			content: '';
			position: absolute; left: 0;
			z-index: 2;
			border-width: 8px 10px;
			border-style: solid;
			border-color: transparent;
		}
		&:after {
			content: '';
			position: absolute; left: -2px;
			z-index: 1;
			border-width: 10px 12px;
			border-style: solid;
			border-color: transparent;
			opacity: .05;
		}
	}
	.ballon-data {
		background: $white;
		position: absolute; left: 0;
		width: 360px;
		padding: 20px;
		@include border-radius(4px);
		@include box-shadow(0 0 12px rgba(0,0,0,.4));
		@media(min-width: 360px){
			width: 320px;
		}
		@media(min-width: 449px){
			width: 360px;
		}
		.closer {
			top: 8px;
			right: 8px;
		}
	}
	&.lg {
		.ballon-data {
			@media(min-width: 480px){
				width: 440px;
			}
		}
	}
	&.xl {
		.ballon-data {
			@media(min-width: 559px){
				width: 520px;
			}
			@media(min-width: 619px){
				width: 580px;
			}
		}
	}
	&.top {
		.ballon-arrow {
			bottom: 100%;
			&:before {
				top: 0;
				border-top-color: $white;
			}
			&:after {
				top: 0;
				border-top-color: $black;
			}
		}
		.ballon-data {
			bottom: calc(100% + 10px);
		}
	}
	&.bottom {
		.ballon-arrow {
			top: 100%;
			&:before {
				bottom: 0;
				border-bottom-color: $white;
			}
			&:after {
				bottom: 0;
				border-bottom-color: $black;
			}
		}
		.ballon-data {
			top: calc(100% + 10px);
		}
	}
	&.in {
		visibility: visible;
		opacity: 1;
	}
}
.tooltiper {
	&._inline {
		display: inline-block;
		vertical-align: middle;
		& + .tooltiper._inline {
			margin-left: 4px;
		}
	}
	.tooltiper-toggle {
		&:hover {
			cursor: pointer;
		}
	}
	.tooltiper-data {
		display: none;
	}
}