<div class="arrow-slider">
	<div class="wrapper mobile-carousel">
		<div class="left" style="background-image: url(http://via.placeholder.com/1300x700/2f599e/ffffff?text=X)">
			<div class="color-overlay"></div>			
			<div class="mobile-image">
				<img src="http://via.placeholder.com/1300x700/2f599e/ffffff?text=X" alt="" />
			</div>
			<div class="content-wrap">
				<div class="content">
					<h2>Lorem ipsum dolor sit amet consectetuer</h2>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
				</div>
			</div>
			<div class="button-wrap">
				<a href="#">Button</a>
			</div>
		</div>
		<div class="right" style="background-image: url(http://via.placeholder.com/1300x700/c10764/ffffff?text=X)">
			<div class="color-overlay"></div>			
			<div class="mobile-image">
				<img src="http://via.placeholder.com/1300x700/c10764/ffffff?text=X" alt="" />
			</div>

			<div class="content-wrap">
				<div class="content">
					<h2>Lorem ipsum dolor sit amet consectetuer</h2>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
					
				</div>
			</div>
			
			<div class="button-wrap">
				<a href="#">Button</a>
			</div>
		</div>
	</div>
	<div class="mobile-arrows"></div>
</div>
 

@mobile: ~"(max-width: 767px)";
@desktop: ~"(min-width: 768px)";

// Demo page styling only
html {
	font-size: 16px;
	line-height: 26px;
	font-weight: normal;
}

h2 {
	font-size: 2rem;
	line-height: 2.25rem;
	padding: 0;
	margin: 0;
}

// Arrow Slider Styling
.arrow-slider {
	width: 100%;
}

// Mobile Carousel Styles
@media @mobile {
	.arrow-slider {
		margin: 15px auto;
		position: relative;
		
		// Slider wrapper
		.mobile-carousel {
			margin: 0 15px;
		}
		
		// Arrows
		.mobile-arrows {
			display: block;
			position: absolute;
			top: 0;
			z-index: 5;
			width: 100%;
			height: auto;
			-webkit-transition: height 1s ease;
			transition: height 1s ease;
			
			.slick-next {
				right: 30px;
				left: auto;
			}

			.slick-prev {
				left: 30px;
				right: auto;
			}
		}
		
		// Shared styles for left and right 
		.left, .right {
			display: block;
			position: relative;
			background-image: none !important; //Need to override the inline-style
			
			// Contains the image on mobile
			.mobile-image {
				-webkit-transition: all 1s ease;
				transition: all 1s ease;
				
				img {
					max-width: 100%;
    					height: auto;
				}
			}
			
			.color-overlay {
				display: none;
			}
			
			// Positions the actual content
			.content {
				margin-top: 10px;
				padding: 15px 15px 0 15px;
				text-align: center;
			}
			
			// Positions the button
			.button-wrap {
				padding: 15px;
				text-align: center;
			}
		}
	}
}

// Desktop Arrow Styles
@media @desktop {
	.arrow-slider {
		margin-bottom: -3px;
		
		.mobile-arrows, .mobile-image {
			display: none;
		}
		
		.wrapper {
			position: relative;
			height: 52.08333333vw;
			max-height: 700px;
			overflow: hidden;
		}
		
		// Shared styles for left and right non-hover states
		.left, .right {
			cursor: pointer;
			background-size: 100vw;
			bottom: 0;
			overflow: hidden;
			position: absolute;
			top: 0;
			transition: all 1s ease;
			width: 50%;
			background-repeat: no-repeat;
			
			//The color of the overlay on the opposite side when the hover is triggered appears
			.color-overlay {
				background-color: white;
				opacity: 0;
				bottom: 0;
				left: 0;
				position: absolute;
				right: 0;
				top: 0;
				transition: opacity 1s ease, background-color 1s ease;
				z-index: 1;
			}
			
			// Positions to content and button wrappers center-ly
			.content-wrap, .button-wrap {
				opacity: 0;
				height: auto;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				z-index: 2;
				
			}
			
			// Transition for the button
			.button-wrap {
				width: auto;
				transition: opacity .5s ease;
			}
			
			// Transition for the content wrap
			.content-wrap {
				width: 0;
				transition: opacity 1s ease;
			}

			// Positions the actual content
			.content {
				position: absolute;
				left: 0;
				transform: translateY(-50%);
				top: 50%;
				width: auto;
				max-width: 370px;
			}
		}

		// Left style
		.left {
			background-position: left center;
			left: 0;
			z-index: 1;
			
			.content-wrap {
				left: 8%;
			}
			
			.button-wrap {
				left: 30%;
			}
		}

		// Right style
		.right {
			background-position: right center;
			right: 0;
			z-index: 2;
		   	clip-path: polygon(0 0, 0 50%, 0 100%, 100% 100%, 100% 0);

			.content-wrap {
				right: 75%;
			}
			
			.button-wrap {
				left: 50%;
			}
		}

		// Shared styles for left and right hover states
		&.left-focused {
			.right {
				width: 55%;
				-webkit-clip-path: polygon(0 0, 80px 50%, 0 100%, 100% 100%, 100% 0);
				clip-path: polygon(0 0, 80px 50%, 0 100%, 100% 100%, 100% 0);

				.color-overlay, .content-wrap {
					opacity: 1;
				}
			}

			.left {
				z-index: 1;
				width: 70%;
				
				.button-wrap {
					opacity: 1;
				}
			}
		}

		&.right-focused {
			.right {
				width: 62.5%;
				-webkit-clip-path: polygon(80px 0, 0 50%, 80px 100%, 100% 100%, 100% 0);
				clip-path: polygon(80px 0, 0 50%, 80px 100%, 100% 100%, 100% 0);
				
				.button-wrap {
					opacity: 1;
				}
			}

			.left {
				width: 45%;

				.color-overlay, .content-wrap {
					opacity: 1;
				}
			}
		}
	}
}

//Set up the arrow slider functionality depending on if its mobile or desktop sizing
function arrowSliderSetup() {
	
	// Mobile carousel
	if ($(window).outerWidth() < 768) {
		
		// Set the height of the mobile arrow class to match the height of the image slide so we can vertially center it
		$('.mobile-arrows').css('height', $('.mobile-image').outerHeight());
		
		//Init the carousel if it already has not been initialized
		if(!$('.mobile-carousel').hasClass('slick-initialized')){
			$('.mobile-carousel').slick({
				dots: true,
				draggable: true,
				infinite: true,
				speed: 300,		
				adaptiveHeight: false,
				arrows: true,
				appendArrows: $('.mobile-arrows')
			});
		}
		
		// Remove desktop class
		if($('.arrow-slider').hasClass('desktop-view')){
			$('.arrow-slider').removeClass('desktop-view');
		}
		
	// Desktop slider
	} else {
		// If the user resizes their screen from mobile to desktop, destroy the mobile carousel
		if($('.mobile-carousel').hasClass('slick-initialized')){
			$('.mobile-carousel').slick('unslick');
		}
		
		// Set up the arrow hover actions for desktop, just once
		if(!$('.arrow-slider').hasClass('desktop-view')){
			arrowSliderDesktop()
		}
		
		$('.arrow-slider').addClass('desktop-view');
	}
}

function arrowSliderDesktop() {
	const slider = $('.arrow-slider');
	const sliderLeft = $('.arrow-slider .left');	
	const sliderRight = $('.arrow-slider .right');

	// Mouse-listeners for the left and right sides of the slider
	sliderLeft.mouseenter(function() {
		slider.addClass('left-focused');
	}).mouseleave(function() {
		slider.removeClass('left-focused');
	});
	
	sliderRight.mouseenter(function() {
		slider.addClass('right-focused');
	}).mouseleave(function() {
		slider.removeClass('right-focused');
	});
}


$(document).ready(function(){

	// Set up the arrow slider functionality depending on if its mobile or desktop sizing
	arrowSliderSetup();
	
	// On window resize, set up the arrow slider functionality depending on if its mobile or desktop sizing
	$(window).resize(function () {
		arrowSliderSetup();
	});
	
});