//
// Variables
// -----------------------------------------

$balloon-bg: fade-out(#111, .1);
$balloon-base-size: 10px;
$balloon-arrow-height: 6px;

//
// Mixins
// -----------------------------------------

@mixin svg-arrow($color, $position: up) {

	$degrees: 0;
	$height: 6px;
	$width: 18px;

	@if ($position == down) {
		$degrees: 180 18 6;
	} @else if ($position == left) {
		$degrees: -90 18 18;
		$width: 6px;
		$height: 18px;
	} @else if ($position == right) {
		$degrees: 90 6 6;
		$width: 6px;
		$height: 18px;
	}

	background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="#{$width * 2}" height="#{$height * 2}"><path fill="#{$color}" transform="rotate(#{$degrees})" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');
	background-size: 100% auto;
	width: $width;
	height: $height;
}

@mixin transition($args...) {
	-webkit-transition: $args;
	-moz-transition: $args;
	-ms-transition: $args;
	-o-transition: $args;
	transition: $args;
}

@mixin transform($val) {
	-webkit-transform: $val;
	-moz-transform: $val;
	-ms-transform: $val;
	transform: $val;
}

@mixin transform-origin($val) {
	-webkit-transform-origin: $val;
	-moz-transform-origin: $val;
	-ms-transform-origin: $val;
	transform-origin: $val;
}

@mixin opacity($trans) {
	filter: alpha(opacity=($trans * 100));
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$trans * 100})";
	-moz-opacity: $trans;
	-khtml-opacity: $trans;
	opacity: $trans;
}

@mixin base-effects() {
	@include opacity(0);
	pointer-events: none;
	@include transition(all .18s ease-out .18s);
}

//
// Styles
// -----------------------------------------

[data-balloon] {
	position: relative; // alt. absolute or fixed

	&:after {
		@include base-effects();

		position: absolute;
		z-index: 10;
		padding: .5em 1em;
		border-radius: 4px;
		background: $balloon-bg;
		color: #fff;
		content: attr(data-balloon);
		white-space: nowrap;
		font-size: $balloon-base-size + 2;
	}

	&:before {
		@include svg-arrow($balloon-bg);
		@include base-effects();

		position: absolute;
		z-index: 10;
		content: '';
	}

	&:hover {
		&:before,
		&:after {
			@include opacity(1);
			pointer-events: auto;
		}
	}

	&[data-balloon-break] {
		&:after {
			white-space: normal;
		}
	}

	&[data-balloon-pos="up"] {
		&:after {
			bottom: 100%;
			left: 50%;
			margin-bottom: 5px + $balloon-arrow-height;
			@include transform(translate(-50%, 10px));
			@include transform-origin(top);
		}
		&:before {
			bottom: 100%;
			left: 50%;
			margin-bottom: 5px;
			@include transform(translate(-50%, 10px));
			@include transform-origin(top);
		}

		&:hover {
			&:after {
				@include transform(translate(-50%, 0));
			}

			&:before {
				@include transform(translate(-50%, 0));
			}
		}

	}

	&[data-balloon-pos='down'] {
		&:after {
			top: 100%;
			left: 50%;
			margin-top: 5px + $balloon-arrow-height;
			@include transform(translate(-50%, -10px));
		}

		&:before {
			@include svg-arrow($balloon-bg, 'down');

			top: 100%;
			left: 50%;
			margin-top: 5px;
			@include transform(translate(-50%, -10px));
		}

		&:hover {
			&:after {
				@include transform(translate(-50%, 0));
			}

			&:before {
				@include transform(translate(-50%, 0));
			}
		}
	}

	&[data-balloon-pos='left'] {
		&:after {
			top: 50%;
			right: 100%;
			margin-right: 5px + $balloon-arrow-height;
			@include transform(translate(10px, -50%));
		}

		&:before {
			@include svg-arrow($balloon-bg, 'left');

			top: 50%;
			right: 100%;
			margin-right: 5px;
			@include transform(translate(10px, -50%));
		}

		&:hover {
			&:after {
				@include transform(translate(0, -50%));
			}

			&:before {
				@include transform(translate(0, -50%));
			}
		}

	}

	&[data-balloon-pos='right'] {
		&:after {

			top: 50%;
			left: 100%;
			margin-left: 5px + $balloon-arrow-height;
			@include transform(translate(-10px, -50%));
		}

		&:before {
			@include svg-arrow($balloon-bg, 'right');

			top: 50%;
			left: 100%;
			margin-left: 5px;
			@include transform(translate(-10px, -50%));
		}

		&:hover {
			&:after {
				@include transform(translate(0, -50%));
			}

			&:before {
				@include transform(translate(0, -50%));
			}
		}
	}

	&[data-balloon-length='small'] {
		&:after {
			width: 80px;
			white-space: normal;
		}
	}

	&[data-balloon-length='medium'] {
		&:after {
			width: 150px;
			white-space: normal;
		}
	}

	&[data-balloon-length='large'] {
		&:after {
			width: 260px;
			white-space: normal;
		}
	}

	&[data-balloon-length='xlarge'] {
		&:after {
			width: 380px;
			white-space: normal;

			@media screen and (max-width: 768px) {
				white-space: normal;
				width: 90vw;
			}
		}
	}

	&[data-balloon-length='fit'] {
		&:after {
			width: 100%;
			white-space: normal;
		}
	}
}