.lui-tooltip {
	position: absolute;
	font-size: 10px;
	line-height: 22px;
	padding: 8px;
	color: $white;
	overflow: hidden;
	top: -10000px;
	z-index: 999999;
	pointer-events: none;

	border-radius: 2px;
	user-select: none;
	opacity: 0;

	@include transition(
				top 0ms $ease-out-function 450ms,
				transform 450ms $ease-out-function 0ms,
				opacity 450ms $ease-out-function 0ms);

	&.lui-is-right {
		@include transform(translate3d(50%, 0, 0));
	}

	&.lui-is-left {
		@include transform(translate3d(-50%, 0, 0));
	}

	.lui-tooltip-label {
		position: relative;
		white-space: nowrap;
	}

	.lui-tooltip-ripple {
		position: absolute;
		left: 50%;
		top: 0px;

		@include transform(translate(-50%, -50%));
		border-radius: 50%;
		background-color: transparent;

		@include transition(
			width 0ms $ease-out-function 450ms,
			height 0ms $ease-out-function 450ms,
			background-color 450ms $ease-out-function 0ms);
	}

	&.lui-is-compact{
		&.lui-is-shown{
			&.lui-is-bottom{
				top: -16px;
				opacity: 1;
				@include transform(translate3d(0, 32px, 0));
			}

			&.lui-is-top{
				top: calc(-100% - 16px);
				opacity: 1;
				@include transform(translate3d(0, -16px, 0));
			}

			&.lui-is-left{
				top: calc(-50% - 2px);
				opacity: 1;
				@include transform(translate3d(calc(-50% - 16px), 0, 0));
			}

			&.lui-is-right{
				top: calc(-50% - 2px);
				opacity: 1;
				@include transform(translate3d(calc(50% + 16px), 0, 0));
			}
		}
	}

	&.lui-is-shown {
		@include transition(
			top 0ms $ease-out-function 0ms,
			transform 450ms $ease-out-function 0ms,
			opacity 450ms $ease-out-function 0ms);

		&.lui-is-bottom{
			top: -16px;
			opacity: 1;
			@include transform(translate3d(0, 16px, 0));
		}

		&.lui-is-top{
			top: calc(-100% - 24px);
			opacity: 1;
			@include transform(translate3d(0, -24px, 0));
		}

		&.lui-is-left{
			top: calc(-50% - 24px);
			opacity: 1;
			@include transform(translate3d(calc(-50% - 24px), 0, 0));
		}

		&.lui-is-right{
			top: calc(-50% - 24px);
			opacity: 1;
			@include transform(translate3d(calc(50% + 24px), 0, 0));
		}


		.lui-tooltip-ripple {
			background-color: $grey-600;
			@include transition(
				width 450ms $ease-out-function 0ms,
				height 450ms $ease-out-function 0ms,
				background-color 450ms $ease-out-function 0ms);
		}

	}

	&.lui-is-touch {
		font-size: 14px;
		line-height: 44px;
		padding: 0 16px;

		&.lui-is-shown {
			.lui-tooltip-ripple {
				height: 100%;
				width: 100%;
			}
		}
	}
}