// -------------------------------------------------------------------
// :: GENERAL TOOLTIP CLASS
// -------------------------------------------------------------------

.a-tooltip {
	box-shadow: $box-shadow;
	border-radius: $border-radius;
	color: $font-color-medium;
	background-color: $light;
	position: relative;
	line-height: 1;
	padding: 0.9rem 1rem 0.8rem;

	a {
		color: inherit;
	}
}

.a-tooltip:before {
	position: absolute;
}

.a-tooltip--up:before{
	@include FLOW-css-triangle("up", 0.75em, $light);
	transform: translate(-50%, -100%);
	left: 1.5rem; //50%
	top: 1px;
}

.a-tooltip--right:before{
	@include FLOW-css-triangle("right", 0.75em, $light);
	transform: translate(100%, -50%);
	right: 1px;
	top: 50%;
}

.a-tooltip--down:before{
	@include FLOW-css-triangle("down", 0.75em, $light);
	transform: translate(-50%, 100%);
	left: 50%;
	bottom: 1px;
}

.a-tooltip--left:before{
	@include FLOW-css-triangle("left", 0.75em, $light);
	transform: translate(-100%, -50%);
	left: 1px;
	top: 50%;
}


// -------------------------------------------------------------------
// :: STATES
// -------------------------------------------------------------------


.a-tooltip.is-error{
	background-color: $ui-red;
	color: $font-color-lighter;

	&:before{
		border-color: $ui-red;
	}
}

.a-tooltip.is-warning{
	background-color: $ui-orange;
	color: $font-color-lighter;

	&:before{
		border-color: $ui-orange;
	}
}


.a-tooltip.is-success{
	background-color: $ui-green;
	color: $font-color-lighter;

	&:before{
		border-color: $ui-green;
	}
}


.a-tooltip.is-information{
	background-color: $ui-blue;
	color: $font-color-lighter;

	&:before{
		border-color: $ui-blue;
	}
}