.bio-tooltip {
	position: relative;
	&:before,
	&:after {
		position: absolute;
		pointer-events: none;
		visibility: hidden;
		transition: all .16s ease-in-out;
		background-color: $color-primary;
		opacity: 0;
	}

	&:before {
		content: '';
		width: 8px;
		height: 8px;
		margin-left: -3px;
		margin-bottom: 6px;
		left: 50%;
		bottom: 100%;
		transform: translateX(-50%);
		z-index: 1;
	}

	&:after {
		content: attr(data-tooltip);
		font-size: 85%;
		font-weight: 500;
		line-height: 125%;
		padding: 8px 12px;
		color: $color-light;
		border-radius: 3px;
		width: 150px;
		left: 50%;
		bottom: 100%;
		margin-bottom: 8px;
		transform: translateX(-50%) scale(0);
		transform-origin: center bottom;
		box-shadow:
			0 2px 6px transparentize($color-primary, .8),
			0 3px 8px transparentize($color-primary, .8);
	}

	&:hover {
		&:after, &:before {
			opacity: 1;
			visibility: visible;
		}
		&:before { transform: rotate(45deg) scale(1); }
		&:after  { transform: translateX(-50%) scale(1); }
	}

	&.-right {
		&:before {
			margin-top: -3px;
			margin-left: 6px;
			left: 100%;
			top: 50%;
			transform: translateY(-50%);
		}
		&:after {
			left: 100%;
			top: 50%;
			bottom: auto;
			margin-left: 8px;
			transform: translateY(-50%) scale(0);
			transform-origin: left center;
		}
		&:hover:before { transform: rotate(45deg) scale(1); }
		&:hover:after  { transform: translateY(-50%) scale(1); }
	}

	&.-bottom {
		&:before {
			margin-left: -3px;
			margin-top: 6px;
			left: 50%;
			top: 100%;
			bottom: auto;
			transform: translateY(50%);
		}
		&:after {
			left: 50%;
			top: 100%;
			bottom: auto;
			margin-top: 8px;
			transform: translateY(50%) translateX(-50%) scale(0);
			transform-origin: center top;
		}
		&:hover:before { transform: rotate(45deg) scale(1); }
		&:hover:after  { transform: translateY(0%) translateX(-50%) scale(1); }
	}

	&.-left {
		&:before {
			margin-top: -3px;
			margin-right: 6px;
			right: 100%;
			top: 50%;
			bottom: auto;
			left: auto;
			transform: translateY(50%);
		}
		&:after {
			right: 100%;
			top: 50%;
			bottom: auto;
			left: auto;
			margin-right: 8px;
			transform: translateY(-50%) scale(0);
			transform-origin: right center;
		}
		&:hover:before { transform: rotate(45deg) scale(1); }
		&:hover:after  { transform: translateY(-50%) scale(1); }
	}

	@each $key, $value in $components-colors {
		&.-#{$key} {
			&:before,
			&:after {
				background-color: $value;
			}
			&:after {
				box-shadow:
					0 2px 6px transparentize($value, .8),
					0 3px 8px transparentize($value, .8);
			}
		}
	};

	&.-white {
		&:before,
		&:after {
			color: $color-dark;
			background-color: $color-white;
		}
		&:after {
			box-shadow:
				0 2px 6px transparentize($color-dark, .8),
				0 3px 8px transparentize($color-dark, .8);
		}
	}
}