// Triangle mixins
// --------------------------------------------------

#triangle {
	.base() {
		content: "";
		width: 0px;
		height: 0px;
		border-style: solid;
	}
	.tl(@color: #000; @width: 20px; @height: 7px) {
		#triangle > .base();
		border-width: @height @width 0 0;
		border-color: @color transparent transparent transparent;
	}
	.t(@color: #000; @width: 10px; @height: 7px) {
		#triangle > .base();
		border-width: 0 @width @height @width;
		border-color: transparent transparent @color transparent;
	}
	.tr(@color: #000; @width: 20px; @height: 7px) {
		#triangle > .base();
		border-width: 0 @width @height 0;
		border-color: transparent @color transparent transparent;
	}
	.bl(@color: #000; @width: 20px; @height: 7px) {
		#triangle > .base();
		border-width: @height 0 0 @width;
		border-color: transparent transparent transparent @color;
	}
	.br(@color: #000; @width: 20px; @height: 7px) {
		#triangle > .base();
		border-width: 0 0 @height @width;
		border-color: transparent transparent @color transparent;
	}
	.b(@color: #000; @width: 10px; @height: 10px) {
		#triangle > .base();
		border-width: @height @width 0 @width;
		border-color: @color transparent transparent transparent;
	}
}
