.bubble {
	position: relative;

	&:after {
		display: block;
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		border-style: solid;
	}

	&.above {
		&:after {
			left: 30px;
			bottom: -15px;
			border-width: 0 20px 15px 0;
			border-color: transparent black transparent transparent;
		}
	}

	&.below {
		&:after {
			right: 30px;
			top: -15px;
			border-width: 15px 0 0 20px;
			border-color: transparent transparent transparent black;
		}
	}

	&.brown {
		background-color: $colorBrownDark;
		&.above:after {border-right-color: $colorBrownDark;}
		&.below:after {border-left-color: $colorBrownDark;}
	}

	&.grey-light {
		background-color: $colorGreyLight;
		&.above:after {border-right-color: $colorGreyLight;}
		&.below:after {border-left-color: $colorGreyLight;}
	}

	&.grey-medium {
		background-color: $colorGreyMedium;
		&.above:after {border-right-color: $colorGreyMedium;}
		&.below:after {border-left-color: $colorGreyMedium;}
	}

	&.grey-dark {
		background-color: $colorGreyDark;
		&.above:after {border-right-color: $colorGreyDark;}
		&.below:after {border-left-color: $colorGreyDark;}
	}

	&.grey-darkX {
		background-color: $colorGreyDarkX;
		&.above:after {border-right-color: $colorGreyDarkX;}
		&.below:after {border-left-color: $colorGreyDarkX;}
	}

}