@import 'include-media';
@import 'customizer-banners-banner-colours';

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    60% { transform: translateY(-10px); }
}

/*
 * LSX banners
 */

%video-embed {
	@include media('>=tablet') {
		height: 100%;
		left: 0;
		pointer-events: none;
		position: absolute;
		top: 0;
		width: 100%;
	}
}

#lsx-banner {
	position: relative;

	.page-header { text-align: center; }

	.page-has-banner-full & {
		@include media ('>=tablet') {
			display: flex;
			flex: 1;
		}
	}

	.tagline { font-size: 20px; }

	.video-background {
		display: none;

		@include media('>=tablet') {
			background-color: #000;
			bottom: 0;
			display: block;
			left: 0;
			overflow: hidden;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 3;
		}

		video {
			@extend %video-embed;
		}
	}

	.video-foreground {
		@extend %video-embed;

		@include media('>=tablet') {
			height: 300%;
			top: -100%;
		}
	}

	& + .wrap {
		& > .content {
			& > header.archive-header { display: none; }
		}
	}

	#page-banner-slider {
		.container {
			@include media('<phone') { margin-bottom: 100px; }
		}

		.slick-dots {
			align-items: center;
			bottom: 20px;
			display: flex;
			flex-flow: row wrap;
			left: 0;
			height: auto;
			justify-content: center;
			list-style: none;
			margin: 0;
			padding: 0;
			position: absolute;
			right: 0;

			& > li {
				padding: 5px;
				line-height: 1;

				@include media('>=tablet') { padding: 0 7.5px; }

				& > button {
					background: transparent;
					border-style: solid;
					border-width: 1px;
					font: 0/0 a;
					height: 12px;
					transition: all 300ms ease-in-out;
					width: 4rem;

					@include media('>=tablet') { height: 6px; }
				}
			}
		}

		.slick-arrow {
			background: transparent;
			border-radius: 50%;
			border-style: solid;
			border-width: 2px;
			font: 0/0 a;
			height: 4rem;
			margin-top: calc((2rem - 17px) / 2);
			opacity: 1;
			padding: 0;
			position: absolute;
			text-shadow: none;
			top: 50%;
			transform: translateY(-50%);
			transition: border 300ms ease;
			width: 4rem;
			z-index: 3;

			&:before {
				display: block;
				font-family: 'FontAwesome';
				font-size: 3rem;
				line-height: 1;
				position: absolute;
				text-rendering: auto;
				top: 47%;
				transform: translateY(-50%);
				transition: color 300ms ease;

				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}

			&.slick-disabled { cursor: not-allowed; }

			&.slick-prev {
				left: 3rem;

				&:before {
					content: '\f104';
					left: 1.1rem;
				}
			}

			&.slick-next {
				right: 3rem;

				&:before {
					content: '\f105';
					left: 1.5rem;
				}
			}
		}
	}

	// .banner-easing {
	// 	@include media('>=desktop') {
	// 		bottom: 30px;
	// 		left: 50%;
	// 		position: absolute;
	// 		transform: translateX(-50%);
	// 	}
	// }

	.btn-scroll-to {
		border: 2px solid transparent;
		border-radius: 50%;
		display: inline-block;
		font-size: 37px;
		line-height: 1;
		padding: 5px 0;
		margin-top: 2rem;
		width: 54px;

		&:focus { outline: 0; }

		@include media('>=desktop') {
			animation: bounce 2s 4s infinite;

			&:hover { animation-play-state: paused; }
		}
	}

	.lsx-banners-logo {
		display: inline-block;
		margin-bottom: 2.4rem;

		& + .banner-content { margin-top: 0; }
	}

	.page-banner-no-mask {
		.page-banner {
			& > .page-banner-image {
				&:after { display: none; }
			}
		}
	}
}

.gutenberg-compatible-template.page-has-banner,
.using-gutenberg.page-has-banner,
.archive.page-has-banner  {
	.breadcrumbs-container {
		+ #lsx-banner {
			@include media('<=tablet') {
				margin-top: 50px;
			}
		}
	}
}

@include customizer-banners-banner-colours(#FFF);