@import 'bourbon'; // http://bourbon.io/

@import '../partials/variables'; // colors, fonts etc...

@import '../partials/mixins'; // custom mixins

@import '../partials/layout'; // responsive grid and media queries

/* -------------------------------- 

Primary style

-------------------------------- */

*, *::after, *::before {
	@include box-sizing(border-box);
}

html {
	font-size: 62.5%;
}

body {
	font: {
		size: 1.6rem;
		family: $primary-font; // variables inside partials > _variables.scss
	}
	color: $color-5;
	background-color: $color-3;
}

a {
	color: $color-2;
	text-decoration: none;
}

img {
	max-width: 100%;
}

/* -------------------------------- 

Main Components 

-------------------------------- */

header {
	height: 170px;
	line-height: 170px;
	text-align: center;
	background: $color-1;
	@include font-smoothing;

	h1 {
		font-size: 2rem;
		color: $color-4;
	}

	@include MQ(M) {
		height: 200px;
		line-height: 200px;

		h1 {
			font-size: 2.6rem;
		}
	}
}

.cd-single-item {
	position: relative;
	background: $color-4;
}

.cd-slider-wrapper {
	position: relative;
	z-index: 1;
	@include transition(width $expand-animation-duration);
	/* Force Hardware Acceleration in WebKit */
	@include transform(translateZ(0));
	@include backface-visibility(hidden);
	will-change: width;

	@include MQ(L) {
		width: 50%;

		.cd-slider-active & {
			width: 100%;
		}
	}
}

.cd-slider {
	position: relative;
	z-index: 1;	
	overflow: hidden;

	&::before {
		/* never visible - this is used in jQuery to check the current MQ */ 
		content: 'mobile';
		display: none;
	}

	li {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		height: 100%;
		width: 100%;
		@include transform(translateX(100%));
		@include transition(transform .3s);

		img {
			display: block;
			width: 100%;
		}

		&.selected {
			position: relative;
			z-index: 2;
			@include transform(translateX(0));
		}

		&.move-left {
			@include transform(translateX(-100%));
		}
	}

	@include MQ(L) {
		cursor: pointer;

		&::before {
			/* never visible - this is used in jQuery to check the current MQ */ 
			content: 'desktop';
		}

		&::after {
			/* slider cover layer - to indicate the image is clickable */
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			background: rgba($color-1, .4) url('../img/cd-icon-zoom.svg') no-repeat center center;
			/* size of the icon */
			background-size: 48px;
			opacity: 0;
			z-index: 4;
			@include transition(opacity .2s);
		}

		.no-touch &:hover::after {
			opacity: 1;
		}

		.cd-slider-active & {
			cursor: auto;

			&::after {
				display: none;
			}
		}
	}
}

@include MQ(L) {

	.cd-slider-navigation li, .cd-slider-pagination {
		opacity: 0;
		visibility: hidden;
		@include transition(opacity $expand-animation-duration 0s, visibility 0s $expand-animation-duration);

		.cd-slider-active & {
			opacity: 1;
			visibility: visible;
			@include transition(opacity $expand-animation-duration $expand-animation-duration, visibility 0s $expand-animation-duration);
		}
	}
}

.cd-slider-navigation li {
	position: absolute;
	z-index: 2;
	@include center(y); // see partials > _mixins.scss

	&:first-of-type {
		left: 10px;
	}

	&:last-of-type {
		right: 10px;
	}

	a {
		display: block;
		width: 48px;
		height: 48px;
		background: url('../img/cd-icon-arrow.svg') no-repeat center center;
		@include transition(opacity .2s 0s, visibility 0s 0s );

		/* image replacement */
		overflow: hidden;
		text-indent: 100%;
		white-space: nowrap;

		&.inactive {
			opacity: 0;
			visibility: hidden;
			@include transition(opacity .2s 0s, visibility 0s .2s );
		}

		.no-touch &:hover {
			opacity: .7;
		}
	}

	&:first-of-type a {
		@include transform(rotate(180deg));
	}

	@include MQ(L) {
		&:first-child {
			left: 30px;
		}

		&:last-child {
			right: 30px;
		}
	}
}

.cd-slider-pagination {
	/* you won't see this element in the html but it will be created using jQuery */
	position: absolute;
	z-index: 2;
	bottom: 30px;
	@include center(x); // mixins inside partials > _mixins.scss
	@include clearfix;
	visibility: hidden;

	.touch & {
		visibility: hidden;
	}

	li {
		display: inline-block;
		float: left;
		margin: 0 5px;

		&.selected a {
			background: $color-3;
		}
	}

	a {
		display: block;
		height: 12px;
		width: 12px;
		border-radius: 50%;
		border: 1px solid $color-3;
		/* fix a bug in IE9/10 - transparent anchor not clickable */
		background-color: rgba(#FFF, 0);

		/* image replacement */
		overflow: hidden;
		text-indent: 100%;
		white-space: nowrap;
	}
}

.cd-slider-wrapper .cd-close {
	display: none;
	position: absolute;
	z-index: 2;
	top: 30px;
	right: 30px;
	width: 48px;
	height: 48px;
	background: url('../img/cd-icon-close.svg') no-repeat center center;

	/* image replacement */
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	
	visibility: hidden;
	opacity: 0;
	@include transition(transform .3s 0s, visibility 0s $expand-animation-duration);

	.cd-slider-active & {
		visibility: visible;
		opacity: 1;
		@include transition(transform .3s 0s, visibility 0s 0s, opacity $expand-animation-duration $expand-animation-duration);
	}

	.no-touch .cd-slider-active &:hover {
		@include transform(scale(1.2));
	}

	@include MQ(L) {
		display: block;
	}
}

.cd-item-info {
	padding: 50px 5%;

	h2, p {
		max-width: 480px;
	}

	h2 {
		font: {
			size: 2.4rem;
			weight: bold;
		}
	}

	p {
		line-height: 1.6;
		margin: 1em 0;
		color: lighten($color-5, 25%);
	}

	.add-to-cart {
		@include appearance(none);
		border: none;
		padding: .8em 1.6em;
		background-color: $color-2;
		color: $color-4;
		@include font-smoothing;
		font: {
			family: $primary-font;
			size: 1.6rem;
			weight: bold;
		}
		cursor: pointer;
		border-radius: 4px;
	}

	@include MQ(L) {
		position: absolute;
		width: 50%;
		top: 0;
		right: 0;
		padding: 60px 60px 0;
		margin: 0;
	}
}

.cd-content p {
	width: 90%;
	max-width: $M;
	padding: 4em 0;
	margin: 0 auto;
	color: darken($color-3, 30%);
	line-height: 1.8;
}