// Generate a caret by embedding in the callout.
// Expects callout to have either selector-right or selecter-left class on it to determine directionality.
.caret() {
	&:before,
	&:after {
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		display: inline-block;
		/* 17px aligns nicely with the size of the search row in language selection */
		top: 17px;
		position: absolute;
		content: '';
	}

	&.selector-right {
		&:before {
			/* @noflip */
			border-left: 10px solid #c8ccd1;
			/* @noflip */
			right: -11px;
		}

		&:after {
			/* @noflip */
			border-left: 10px solid #fff;
			/* @noflip */
			right: -10px;
		}
	}

	&.selector-left {
		&:before {
			/* @noflip */
			border-right: 10px solid #c8ccd1;
			/* @noflip */
			left: -11px;
		}

		&:after {
			/* @noflip */
			border-right: 10px solid #fff;
			/* @noflip */
			left: -10px;
		}
	}
}