// Theme colors
// --------------------
@ztip-theme-default-bg-color: fade( #282830, 94% );
@ztip-theme-white-bg-color: fade( #fff, 94% );
@ztip-theme-red-bg-color: fade( #EE543A, 94% );
@ztip-theme-blue-bg-color: fade( #44BBFF, 94% );
@ztip-theme-green-bg-color: fade( #2ECC71, 94% );

// Theme Mixin
// -------------------
.ztip-theme( @theme, @bg_color, @color: #fff ){
	&.ztip-theme-@{theme}{
		background: @bg_color;
		color: @color;

		&.ztip-position-top{
			.zt-arrow {
				border-top-color: @bg_color;
			}
		}
		&.ztip-position-bottom{
			.zt-arrow {
				border-bottom-color: @bg_color;
			}
		}
		code {
			background: lighten(@bg_color, 10%);
		}
	}
}

// Holder
// --------------
.ztip-holder{
	position: fixed;
	display: block;
	visibility: hidden;
	opacity: 0;
	z-index: 999999;
	background: @ztip-theme-default-bg-color;
	color: #fff;
	padding: 7px;
	border-radius: 2px;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	max-width: 300px;
	margin: 0;
	transform: translateY( -100% );
	transition: opacity .2s;
	box-sizing: border-box;

	.zt-arrow {
		content: "";
		position: absolute;
		display: block;
		background: transparent;
		width: 0;
		height: 0;
		border-style: solid;
		z-index: 10;
		border-color: transparent;
	}

	&.ztip-show{
		transform: translateY( 0 );
		visibility: visible;
		opacity: 1;
	}

	&.ztip-position-top{
		.zt-arrow {
			border-width: 6px 5px 0 5px;
			border-top-color: @ztip-theme-default-bg-color;
			top: 100%;
			bottom: -6px;
		}
	}


	&.ztip-position-bottom{
		.zt-arrow {
			border-width: 0 5px 6px 5px;
			border-bottom-color: @ztip-theme-default-bg-color;
			top: 0;
			bottom: auto;
			margin-top: -6px;
		}
	}

	// ----------------------------------------------------------------------------
	// Themes
	// ----------------------------------------------------------------------------
	.ztip-theme( ~'red', @ztip-theme-red-bg-color );
	.ztip-theme( ~'blue', @ztip-theme-blue-bg-color );
	.ztip-theme( ~'green', @ztip-theme-green-bg-color );
	.ztip-theme( ~'white', @ztip-theme-white-bg-color, #333 );
	&.ztip-theme-white {
		box-shadow: 0px 0px 0 1px rgba(0,0,0,0.25);
		.zt-arrow{
			border: 0;
			border-color: transparent;
			width: 6px;
			height: 6px;
			box-shadow: 1px 1px 0 0 rgba(0,0,0,0.25);
			background: inherit;
			margin: 0;
		}
		&.ztip-position-top{
			.zt-arrow{
				transform: rotate( 45deg );
				margin-top: -3px;
			}
		}
		&.ztip-position-bottom{
			.zt-arrow{
				transform: rotate( 225deg );
				margin-top: -3px;
			}
		}
		code {
			background: darken(@ztip-theme-white-bg-color, 10%);
		}
	}

	code {
		color: inherit;
		background: lighten(@ztip-theme-default-bg-color, 10%);
	}
}