//------------------------------------------------------------------------------------------------
// TOOLTIP
//------------------------------------------------------------------------------------------------

/*
Tooltip element for displaying support information about another component.
*/


// COMPONENT COLOURS
//------------------------------------------------------------------------------------------------

/*
Easily assign colours to the component without having to
find/replace variables.
*/

$component-tooltip-icon-color: 'primary' !default;


// BLOCK & ELEMENTS
//------------------------------------------------------------------------------------------------

/*
[1] 40px comes from gutter size of container object, as that's the likely
padding at either side of page on smaller screens
*/

.c-tooltip {
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	position: relative;
}

.c-tooltip__icon {
	position: relative;
	svg {
		border-radius: 50%;
		fill: color($component-tooltip-icon-color);
		width: rem(25px);
		height: rem(25px);
		cursor: pointer;
		transition: box-shadow $global-transition-duration, fill $global-transition-duration;
		display: block;
	}
	&:before,
	&:after {
		content: '';
		display: none;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 rem(12px) rem(12px) rem(12px);
		border-color: transparent transparent color('#{$component-tooltip-icon-color}-dark') transparent;
		position: absolute;
		left: rem(1px);
		bottom: rem(-15px);
		z-index: 5;
	}
	&:after {
		border-color: transparent transparent color('white') transparent;
		bottom: rem(-16px);
		display: none;
	}
	&:hover {
		svg {
			fill: color('#{$component-tooltip-icon-color}-dark');
		}
	}
	&:focus {
		outline: none;
		svg {
			box-shadow: 0 rem(1px) rem(3px) rgba(0,0,0, 0.25), 0 0 rem(15px) rem(3px) rgba(color($component-tooltip-icon-color), 0.5);
		}
	}
}

.c-tooltip__message {
	position: absolute;
	border: rem(1px) solid color('#{$component-tooltip-icon-color}-dark');
	background-color: color('white');
	padding: rem(10px);
	box-shadow: 0 rem(1px) rem(5px) rgba(0,0,0, 0.2);
	min-width: rem(280px);
	width: calc(100vw - rem(40px)); /* [1] */
	top: rem(40px);
	display: none;
	border-radius: $global-border-radius;
	z-index: 4;
	font-size: 1rem;
	font-weight: $global-body-weight;
	font-family: $global-body-font;
	text-align: left;
	white-space: normal;
}

// Aligns tooltip message correctly in IE
.js-ie .c-tooltip__message {
	transform: translateX(-55%);
}

@include mq(sm2) {
	.c-tooltip__message {
		width: auto;
		max-width: rem(350px);
	}
}

.c-tooltip--click.is-active .c-tooltip__icon,
.c-tooltip:not(.c-tooltip--click) .c-tooltip__icon:hover,
.c-tooltip:not(.c-tooltip--click) .c-tooltip__icon:focus,
{
	&:before, &:after {
		display: block;
	}
	
	& + .c-tooltip__message {
		display: block;
	}
}
	
	
// SIZE MODIFIERS
//------------------------------------------------------------------------------------------------

// Reduces size of tooltip icon

.c-tooltip--large {
	.c-tooltip__icon{
		&:before,
		&:after {
			left: rem(5px);
		}
		svg {
			width: rem(35px);
			height: rem(35px);
		}
	}
	.c-tooltip__message {
		top: rem(50px);
	}
}

.c-tooltip--small {
	.c-tooltip__icon{
		&:before,
		&:after {
			left: rem(-2px);
		}
		svg {
			width: rem(20px);
			height: rem(20px);
		}
	}
	.c-tooltip__message {
		top: rem(35px);
	}
}


// MESSAGE ALIGNMENT MODIFIERS
//------------------------------------------------------------------------------------------------

.c-tooltip--left {
	justify-content: flex-start;
	.c-tooltip__message {
		transform: translateX(-10px);
		left: 0;
	}
}

.c-tooltip--right {
	justify-content: flex-end;
	.c-tooltip__message {
		transform: translateX(10px);
		right: 0;
	}
}

// Aligns when breakpoint is hit
// Example: .c-tooltip--left@md
@each $bp-name, $bp-value in $mq-breakpoints {
	@include mq(#{$bp-name}) {
		.c-tooltip--left\@#{$bp-name} {
			justify-content: flex-start;
			.c-tooltip__message {
				transform: translateX(-10px);
				left: 0;
				right: auto;
			}
		}
		
		.c-tooltip--right\@#{$bp-name} {
			justify-content: flex-end;
			.c-tooltip__message {
				transform: translateX(10px);
				right: 0;
				left: auto;
			}
		}
		
		.c-tooltip--center\@#{$bp-name} {
			justify-content: center;
			.c-tooltip__message {
				transform: none;
				left: auto;
				right: auto;
			}
		}
		// Aligns tooltip message correctly in IE
		.js-ie .c-tooltip--center\@#{$bp-name} .c-tooltip__message {
			transform: translateX(-55%);
		}
	}
}


// INVERTED MODIFIER
//------------------------------------------------------------------------------------------------

.c-tooltip--invert .c-tooltip__icon svg {
	fill: color('white');
}


// EMBEDDED MODIFIER
//------------------------------------------------------------------------------------------------

// Correctly positions tooltip when placed inline within a body of text

.c-tooltip--embedded {
	top: 0.25em;
}