// =============================================================================
// Slider
// =============================================================================

#slider {
	position: relative;

	.highlight-box(
		0 @gutterWidth @smallGutterWidth,
		0 -(@gutterWidth) @gutterWidth -(@gutterWidth),
		0 0 4px
	);

	// Use a pseudo-element to give the illusion of the slider goes all the way to the top
	// The optimal solution should be use to use negative margin-top on #slider but some mobile
	// devices don't like that
	&:before {
		content: " ";
		position: absolute;
		top: -34px;
		left: 0;
		.size(100%, 34px);
		background-color: darken(#ffffe9, 2%);
	}
}

.flex-viewport {
	max-height: 2000px;
	.transition(all 1s ease);
}

.loading .flex-viewport {
	max-height: 300px;
}

/* Slider content */
.slide {
	/* Hide the slides before the JS is loaded to avoid page jumping */
	display: none;
	.backface-visibility(hidden);

	.thumbnail,
	.slider-video {
		float: left;
		max-width: 100%;
		margin: 0 @gutterWidth 3px 3px;
	}

	.entry-title {
		margin-top: 0;
	}
}

/* Control navigation */
.flex-control-nav {
	list-style: none;
	margin: 20px auto 0 -60px;
	text-align: center;

	li {
		display: inline-block;
		margin: 0 0 0 7px;

		&:first-child {
			margin-left: 0;
		}
	}
}

/* Slider pagination */
.flex-control-paging li {
	a {
		display: block;
		.square(16px);
		background: @orangeLight;
		border-radius: 50%;
		text-indent: -9999px;
		cursor: pointer;
		.transition(all 150ms ease);

		&:hover {
			background: @orange;
		}
	}

	.flex-active,
	.flex-active:hover {
		background: @orangeDark;
		cursor: default;
		.scale(1.07);
	}
}

.flex-pauseplay a {
	cursor: pointer;
}

/* Next/prev buttons */
.flex-direction-nav {
	.no-list-style();

	a {
		position: absolute;
		top: 40%;
		.square(48px);
		margin: 0;
		background-color: @white;
		border-radius: 50%;
		box-shadow: 0 0 7px fade(@black, 30%);
		text-indent: -9999px;
		opacity: 0.6;
		.transition(opacity 150ms ease);

		&:focus {
			background: @orangeLight;
			outline: 0;
		}

		&:after {
			position: absolute;
			z-index: 10;
			top: 0;
			left: -2px;
			.square(100%);
			#font > .alternative(38, bold, 41px);
			color: @gray;
			text-align: center;
			text-indent: 0;
		}

		#slider:hover & {
			opacity: 1;
		}
	}

	.flex-prev {
		left: -(@smallGutterWidth);

		&:after {
			content: "\00AB";
		}
	}

	.flex-next {
		right: -(@smallGutterWidth);

		&:after {
			content: "\00BB";
			left: 1px;
		}
	}

	.flex-direction-nav .disabled {
		cursor: default;
		opacity: 0.3 !important;
		filter: alpha(opacity=30);
	}

	.flex-prev:active,
	.flex-next:active {
		box-shadow:
			inset 0 0 5px fade(@black, 30%),
			0 0 7px fade(@black, 30%);
	}
}

/* Fallback to a border for browsers without box-shadow support */
.no-boxshadow .flex-direction-nav .flex-prev,
.no-boxshadow .flex-direction-nav .flex-next {
	border: 2px solid @orangeLight;

	&:hover {
		border-color: @orangeDark;
	}
}

/* No-javaScript fallback */
.no-js .slides-container > .slide {
	display: none;

	&:first-child {
		display: block;
	}
}

.no-js .slides-container > .slide:first-child {
	display: block;
}