//
// @file
//
// Custom mixins where Bootstrap mixins fall short.
//

// Gradients.
#gradient {
	// Horizontal 3-color gradient.
	.horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
		background-color: mix(@midColor, @endColor, 80%);
		background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
		background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
		background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
		background-image: -ms-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
		background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
		background-image: linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
		background-repeat: no-repeat;
		filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
	}

	// Use these for the following behaviour:
	// If browser supports the gradient syntax it will *replace the background
	// color* behind it, and is *especially important for translucent gradients*.
	.horizontal-replace(@startColor: #555, @endColor: #333) {
		background: @endColor;
		background: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
		background: -ms-linear-gradient(left, @startColor, @endColor); // IE10
		background: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
		background: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
		background: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
		background: linear-gradient(left, @startColor, @endColor); // Le standard
		background-repeat: repeat-x;
	}
	.vertical-replace(@startColor: #555, @endColor: #333) {
		background: mix(@startColor, @endColor, 60%);
		background: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
		background: -ms-linear-gradient(top, @startColor, @endColor); // IE10
		background: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
		background: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
		background: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
		background: linear-gradient(top, @startColor, @endColor); // The standard
		background-repeat: repeat-x;
	}
	.vertical-three-colors-replace(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
		background: mix(@midColor, @endColor, 80%);
		background: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
		background: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
		background: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
		background: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
		background: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
		background: linear-gradient(@startColor, @midColor @colorStop, @endColor);
		background-repeat: no-repeat;
	}
	.horizontal-three-colors-replace(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
		background: mix(@midColor, @endColor, 80%);
		background: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
		background: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
		background: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
		background: -ms-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
		background: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
		background: linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
		background-repeat: no-repeat;
	}
}

// Override certain Bootstrap mixins to add missing style attributes.
// Overriding is done by adding redundant LESS guards.

.gradientBar(@primaryColor, @secondaryColor) when (iscolor(@primaryColor)) {
	#gradient > .vertical(@primaryColor, @secondaryColor);
	border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
}


// Popover arrows
// -------------------------

.inner-arrow-styles() {
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		z-index: 10;
		border: solid transparent;
}

#timelyPopoverArrow {
	.top(@arrowWidth: 5px, @color: @black) {
		bottom: 0;
		left: 50%;
		margin-left: -@arrowWidth;
		margin-bottom: ceil( @arrowWidth * -1.5 + 3 );
		border: solid transparent;
		border-width: @arrowWidth;
		border-top-color: @color;
	}
	.left(@arrowWidth: 5px, @color: @black) {
		top: 50%;
		right: 0;
		margin-top: -@arrowWidth;
		margin-right: ceil( @arrowWidth * -1.5 + 3 );
		border: solid transparent;
		border-width: @arrowWidth;
		border-left-color: @color;
	}
	.bottom(@arrowWidth: 5px, @color: @black) {
		top: 0;
		left: 50%;
		margin-left: -@arrowWidth;
		margin-top: ceil( @arrowWidth * -1.5 + 3 );
		border: solid transparent;
		border-width: @arrowWidth;
		border-bottom-color: @color;
	}
	.right(@arrowWidth: 5px, @color: @black) {
		top: 50%;
		left: 0;
		margin-top: -@arrowWidth;
		margin-left: ceil( @arrowWidth * -1.5 + 3 );
		border: solid transparent;
		border-width: @arrowWidth;
		border-right-color: @color;
	}
	#outlinedArrow {
		.top( @mainArrowWidth: 5px, @outlineWidth: 1px, @color: @white ) {
			.inner-arrow-styles();
			border-width: @mainArrowWidth + @outlineWidth;
			border-top-color: @color;
			margin-left: -@mainArrowWidth - @outlineWidth;
			margin-top: -@mainArrowWidth + -(@outlineWidth * 2)
		}
		.left( @mainArrowWidth: 5px, @outlineWidth: 1px, @color: @white ) {
			.inner-arrow-styles();
			border-width: @mainArrowWidth + @outlineWidth;
			border-left-color: @color;
			margin-top: -@mainArrowWidth - @outlineWidth;
			margin-left: -@mainArrowWidth + -(@outlineWidth * 2);
		}
		.bottom( @mainArrowWidth: 5px, @outlineWidth: 1px, @color: @white ) {
			.inner-arrow-styles();
			border-width: @mainArrowWidth + @outlineWidth;
			border-bottom-color: @color;
			margin-left: -@mainArrowWidth - @outlineWidth;
			margin-top: -@mainArrowWidth;
		}
		.right( @mainArrowWidth: 5px, @outlineWidth: 1px, @color: @white ) {
			.inner-arrow-styles();
			border-width: @mainArrowWidth + @outlineWidth;
			border-right-color: @color;
			margin-top: -@mainArrowWidth - @outlineWidth;
			margin-left: -@mainArrowWidth;
		}
	}
}

// =================
// = Avatar styles =
// =================

.timelyAvatar( natural ) {
	background-color: @posterboardImagePadding;
	.box-shadow( 0 1px 4px @eventImageShadow );
	img {
		height: auto;
		display: block;
		min-height: 90px;
		width: auto;
	}
}
.timelyAvatar( thumbnail ) {
	width: 90px;
	img {
		display: block;
		margin: auto;
		height: 90px !important;
		max-width: 90px !important;
		min-height: 0 !important;
		min-width: 0 !important;
		width: auto !important;
	}
}

// ====================
// = List item styles =
// ====================
.listItem() {
	color: @dropdownLinkColor !important;
}
.listItemActive( @extraShadow: ~"" ) {
	background-color: @dropdownLinkBackgroundHover;
	border-color: @dropdownLinkBackgroundHover;
	.box-shadow( inset 0 0 2px fade( @dropdownLinkColorHover, 30% ) @extraShadow );
	color: @dropdownLinkColorHover !important;
}