/*
 * CSS Fadeshow by @alexerlandsson
 * This is a fadeshow built in CSS and with customization in focus.
 * Supports quick navigation, prev/next navigation and autoplay.
 * 
 * For better documentation and implementation guide, check out the GitHub repository:
 * https://github.com/alexerlandsson/css-fadeshow
*/


/*
 * ===== VARIABLES =====
 *
 * Change these variables to match your preferences. For a more detailed
 * description of what each variable do, visit https://github.com/alexerlandsson/css-fadeshow
 */

$max-slides:					5;
$prefix:							true;
$responsive:					true;
$breakpoint-small:			500px;
$fade-time:						1;
$prev-next-fontfamily:		sans-serif;
$prev-next-icon-size:		3vw;
$prev-next-icon-color:		rgba(255,255,255,0.5);
$prev-next-bg:					rgba(255,255,255,0);
$prev-next-bg-hover:			rgba(255,255,255,0.1);
$prev-icon:						'❮';
$next-icon:						'❯';
$autohide-next-prev:			true;
$quick-nav-color:				rgba(255,255,255,0.8);
$quick-nav-active-color:	coral;
$fade-color:					#fff;
$autoplay:						true;
$autoplay-duration:			5;


/*
 * ===== MIXINS =====
 *
 * This section contains mixin used
 * Do not change anything here unless you know what you are doing.
 */

/* Mixins to handle prefixes */

@mixin fadeshow-transition($value...) {
	@if length($value) < 1 {
		$value: all 150ms linear;
	}
	@if $prefix == true {
		-webkit-transition: $value;
	}
				  transition: $value;
}

@mixin fadeshow-transform($value...) {
	@if length($value) < 1 {
		$value: all 150ms linear;
	}
	@if $prefix == true {
		-webkit-transform: $value;
			 -ms-transform: $value;
	}
				  transform: $value;
}

@mixin fadeshow-animation($value...) {
	@if $prefix == true {
		-webkit-animation: $value;
	}
				  animation: $value;
}

@mixin fadeshow-animation-delay($value) {
	@if $prefix == true {
		-webkit-animation-delay: $value;
	}
				  animation-delay: $value;
}

@mixin fadeshow-unselectable() {
	@if $prefix == true {
		-webkit-user-select: none;
		   -moz-user-select: none;
			 -ms-user-select: none;
	}
				  user-select: none;
}

/* Mixins to handle Quick Navigation Button states */

@mixin quickNavBtnActive() {
	background-color: $quick-nav-active-color;
}

@mixin quickNavBtnInactive() {
	background-color: $quick-nav-color;
}


/*
 * ===== FADESHOW =====
 *
 * Base functionality for the fadeshow.
 * Do not change anything here unless you know what you are doing.
 */

[data-am-fadeshow] {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: $fade-color;

	/* Slides */
	.fs-slide {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		opacity: 0;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		@include fadeshow-transition(opacity #{$fade-time}s ease);

		/* Display first child on load */
		&:first-child {
			opacity: 1;
		}
	}

	/* Quick Navigation */
	.fs-quick-nav {
		position: absolute;
		bottom: 15px;
		left: 50%;
		z-index: 1;
		@include fadeshow-unselectable();
		@include fadeshow-transform(translateX(-50%));
	}

	.fs-quick-btn {
		display: inline-block;
		width: 15px;
		height: 15px;
		margin: 0 2px;
		border-radius: 50%;
		cursor: pointer;
		@include fadeshow-transition(opacity 200ms ease);
		@include quickNavBtnInactive();

		&:hover {
			opacity: 0.8;
		}

		/* Set active state to first button on load */
		&:first-child {
			@include quickNavBtnActive();
		}
	}

	/* Prev/Next Navigation */
	%prev-next {
		position: absolute;
		display: none;
		top: 0;
		bottom: 0;
		width: 100px;
		cursor: pointer;
		font-family: $prev-next-fontfamily;
		background-color: $prev-next-bg;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		@include fadeshow-transition(all 200ms ease);

		@if $responsive == true {
			@media (max-width: $breakpoint-small) {
				width: 50%;
			}
		}

		&:before {
			position: absolute;
			top: 50%;
			font-size: $prev-next-icon-size;
			color: $prev-next-icon-color;
		}

		&:hover {
			background-color: $prev-next-bg-hover;
			@if $responsive == true {
				@media (max-width: $breakpoint-small) {
					background-color: rgba(255,255,255,0);
				}
			}
		}
	}

	.fs-prev-btn {
		@extend %prev-next;
		left: 0;

		&:before {
			content: "#{$prev-icon}";
			left: 50%;
			@include fadeshow-transform(translate(-50%, -50%));
			@if $responsive == true {
				@media (max-width: $breakpoint-small) {
					left: 30px;
				}
			}
		}

		@if $autohide-next-prev == true {
			@include fadeshow-transform(translateX(-100%));
			@if $responsive == true {
				@media (max-width: $breakpoint-small) {
					@include fadeshow-transform(translate(0));
				}
			}
		}
	}

	.fs-next-btn {
		@extend %prev-next;
		right: 0;

		&:before {
			content: "#{$next-icon}";
			right: 50%;
			@include fadeshow-transform(translate(50%, -50%));
			@if $responsive == true {
				@media (max-width: $breakpoint-small) {
					right: 30px;
				}
			}
		}

		@if $autohide-next-prev == true {
			@include fadeshow-transform(translateX(100%));
			@if $responsive == true {
				@media (max-width: $breakpoint-small) {
					@include fadeshow-transform(translate(0));
				}
			}
		}
	}

	/* Base functionality */
	input[type="radio"] {
		position: fixed;
		top: -9999px;

		&:checked {

			/* This loop handles the slide switching and quick navigation active state */
			$i: $max-slides;

			@while $i > 0 {

				&:nth-of-type(#{$i}) {
					/* Show slide */
					~ .fs-slides {
						.fs-slide {
							//Cancel autoplay
							opacity: 0;
							@include fadeshow-animation(none !important);
						}
						.fs-slide:nth-child(#{$i}) {
							opacity: 1;
						}
					}

					/* Add active state to dot */
					~ .fs-quick-nav {
						.fs-quick-btn {
							@include quickNavBtnInactive();
							/* Cancel autoplay */
							@include fadeshow-animation(none !important);
						}
						.fs-quick-btn:nth-child(#{$i}) {
							background-color: $quick-nav-active-color;
							&:hover {
								opacity: 1;
							}
						}
					}

				}
				$i: $i - 1;
			}

			/* Hide navigation if only one slide */
			&:first-of-type:last-of-type {
				~ .fs-quick-nav,
				~ .fs-prev-nav,
				~ .fs-next-nav {
					display: none !important;
				}
			}

		}
	}

	/* Autohide Prev/Next Navigation */
	@if $autohide-next-prev == true {
		&:hover {
			.fs-prev-btn,
			.fs-next-btn {
				@include fadeshow-transform(translateX(0));
			}
		}
	}

}


/*
 * ===== PREV/NEXT NAVIGATION =====
 *
 * This section handles the prev/next navigation.
 */

/* Handle Prev/Next buttons */
[data-am-fadeshow~="next-prev-navigation"] {
	input[type="radio"] {

		&:checked {

			$i: $max-slides;

			@while $i > 0 {

				&:nth-of-type(#{$i}) {

					$prev: ($i - 1);
					$next: ($i + 1);

					/* Show previous button */
					@if $prev > 0 {
						~ .fs-prev-nav {
							.fs-prev-btn {
								display: none;
							}
							.fs-prev-btn:nth-child(#{$prev}) {
								display: block;
							}
						}
					}

					/* Show next button */
					@if $next < ($max-slides + 1) {
						~ .fs-next-nav {
							.fs-next-btn {
								display: none;
							}
							.fs-next-btn:nth-child(#{$next}) {
								display: block;
							}
						}
					}

					/* Show last prev button if first slide */
					&:first-of-type {
						~ .fs-prev-nav {
							.fs-prev-btn:last-child {
								display: block;
							}
						}
					}

					/* Show first next button if last slide */
					&:last-of-type {
						~ .fs-next-nav {
							.fs-next-btn:first-child {
								display: block;
							}
						}
					}

				}
			  $i: $i - 1;
			}
		}
	}

	/* Display first pair of Prev/Next Buttons on load */
	.fs-prev-btn:last-child {
		display: block;
	}

	.fs-next-btn:nth-child(2) {
		display: block
	}

}


/*
 * ===== AUTOPLAY =====
 *
 * Functions to handle autoplay.
 * If you're not going to use autoplay, set $autoplay to false.
 * This part tends to compile into a lot of uneccesary CSS otherwise.
 */

@if $autoplay == true {

	$i: $max-slides;

	@while $i > 1 {

		$total-duration: $autoplay-duration * $i;

		@keyframes quickNavAnimation-#{$i} {
			0% { @include quickNavBtnInactive();  }
			#{100% * $fade-time / $total-duration},
			#{100% * $autoplay-duration / $total-duration} { @include quickNavBtnActive(); }
			#{100% * ($autoplay-duration + $fade-time) / $total-duration},
			100% { @include quickNavBtnInactive(); }
		}
		@if $prefix == true {
			@-webkit-keyframes quickNavAnimation-#{$i} {
				0% { @include quickNavBtnInactive();  }
				#{100% * $fade-time / $total-duration},
				#{100% * $autoplay-duration / $total-duration} { @include quickNavBtnActive(); }
				#{100% * ($autoplay-duration + $fade-time) / $total-duration},
				100% { @include quickNavBtnInactive(); }
			}
		}

		@keyframes slidesAnimation-#{$i} {
			0% { opacity: 0; }
			#{100% * $fade-time / $total-duration},
			#{100% * $autoplay-duration / $total-duration} { opacity: 1; }
			#{100% * ($autoplay-duration + $fade-time) / $total-duration},
			100% { opacity: 0; }
		}
		@if $prefix == true {
			@-webkit-keyframes slidesAnimation-#{$i} {
				0% { opacity: 0; }
				#{100% * $fade-time / $total-duration},
				#{100% * $autoplay-duration / $total-duration} { opacity: 1; }
				#{100% * ($autoplay-duration + $fade-time) / $total-duration},
				100% { opacity: 0; }
			}
		}

		[data-am-fadeshow~="autoplay"] {
			input[type="radio"]:nth-of-type(#{$i}):last-of-type {

				/* Slide animation */
				~ .fs-slides {
					.fs-slide {
						@include fadeshow-animation(slidesAnimation-#{$i} #{$total-duration}s infinite);
					}
				}

				/* Quick navigation animation */
				~ .fs-quick-nav {
					.fs-quick-btn {
						@include fadeshow-animation(quickNavAnimation-#{$i} #{$total-duration}s infinite);
					}
				}

				/* Animation Delay */
				@for $j from 1 through $i {
					~ .fs-slides .fs-slide:nth-child(#{$j}),
					~ .fs-quick-nav .fs-quick-btn:nth-child(#{$j}) {
						$animation-delay: #{($j - 1) * ($autoplay-duration) - $fade-time}s;
						@include fadeshow-animation-delay(#{$animation-delay});
					}
				}

			}
			$i: $i - 1;
		}
	}
}

/* Base Styling */

body {
	margin: 0;
}

.container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
	overflow: hidden;
}