@import 'p-reset.less';

@x25baseline: ceil(@baseline * 2.5);


/**
 * (P)Reset
 */

// Typography
h1, h2, h3, h4, h5, h6, p{
	margin: 0; padding: 0;
	margin-bottom: @baseline * 2;
}

// Headers
h1, h2, h3, h4, h5, h6{
	color: currentColor;
	text-transform: uppercase;
	// margin-top: @baseline / 2;
}

.size-h1, h1{ font-size: @basefont * 2.50; line-height: @baseline * 1.50; font-weight: 900;}
.size-h2, h2{ font-size: @basefont * 2.50; line-height: @baseline * 1.50; font-weight: 900;}
.size-h3, h3{ font-size: @basefont * 1.50; line-height: @baseline * 1.50; font-weight: 900;}
.size-h4, h4{ font-size: @basefont * 1.25; line-height: @baseline * 1.25; font-weight: 900;}
.size-h5, h5{ font-size: @basefont * 1.00; line-height: @baseline * 1.00; font-weight: 900;}
.size-h6, h6{ font-size: @basefont / 1.25; line-height: @baseline / 1.25; font-weight: 900;}

h1, h3, h5{
	background: @accent;
	color: @white;
	font-family: @titlefont;
	display: inline-block;
	padding: @baseline / 2;
	padding-left: @pagePadding; margin-left: -@pagePadding;
	@media @tablet{ padding-left: @pagePadding--tablet; margin-left: -@pagePadding--tablet; }
	@media @phone{ padding-left: @pagePadding--phone; margin-left: -@pagePadding--phone; }
}
h2, h4, h6{
	font-family: @bodyfont;
}



/**
 * Buttons / Inputs
 */

button, .button, .btn, input, .input,
body a.button, a.btn, body a.input,
textarea, select{
	border: 2px solid currentColor;
	background: none;
	color: currentColor;
	font-family: inherit;
	font-size: @basefont;
	line-height: @baseline * 1.5;
	display: inline-block;
	margin: 0; padding: 0;
	margin-bottom: @baseline / 2;
	padding-left: @baseline / 2; padding-right: @baseline / 2;
	border-radius: @brad;
	&.small{
		font-size: @basefont / 1.5;
		line-height: @baseline / 1.2;
		vertical-align: text-bottom;
		padding-left: @baseline / 4; padding-right: @baseline / 4;
	}
	&.big{
		font-size: @basefont * 1.5;
		font-weight: 900;
		line-height: @baseline * 2.5;
		padding-left: @baseline; padding-right: @baseline;
	}
	&.crazybig{ border: none; font-size: @basefont * 9; line-height: @baseline * 3; text-align: right; overflow: hidden; }
}

// Buttons
.button, .btn{
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 900;
	cursor: pointer;
	padding-left: @baseline / 1.5; padding-right: @baseline / 1.5;
	box-shadow: none;
	transition: background .3s @cubic-bezier, color .3s @cubic-bezier, box-shadow .6s @cubic-bezier, border .3s @cubic-bezier;
	&.big{
		box-shadow: none;
	}
	&:hover, &.hover{
		border-color: @accent;
		background: @accent;
		color: @white;
	}
	&.no-shadow{
		box-shadow: none;
	}
	&:active, &.active{
		box-shadow: none;
		&.big{ box-shadow: none; }
	}
}
button, input[type="submit"], input[type="button"], input[type="reset"], body a.button, body a.btn{
	.button;
}

// Inputs
.input{
	transition: border-color .3s @cubic-bezier;
	&:focus{
		outline: none;
		&:valid{ border-color: @success; }
		&:invalid{ border-color: @error; }
	}
}
input:not([type="submit"]):not([type="button"]):not([type="reset"]){
	.input;
}

textarea{
	line-height: @baseline * 1.25;
	padding-left: @baseline / 4; padding-right: @baseline / 4;
	height: @baseline * 4.75;
	border-radius: 3px;
}

select{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: @baseline * 1.5;
	padding-left: @baseline / 4; padding-right: @baseline / 4;
	cursor: pointer;
	&:extend(.input);
	option{}
}
select::ms-expand{ display: none; }

.button, .btn, .input{
	&[disabled], &.disabled{
		border: 1px solid @gray;
		background: @background;
		color: @gray;
		cursor: default;
		box-shadow: none;
	}
}


/**
 * ENDOF (P)Reset
 */


table{
	border: none;
	td{
		border: none;
		border-bottom: 1px solid fade(@black, 50%);
		padding: @baseline / 3;
	}
	tr{
		border: none;
		transition: background .3s;
		&:hover{ background: fade(@accent, 20%); }
		&:last-child{
			td{ border: none; }
		}
	}
}


/**
 * Helper Classes
 */

.section-padding{
	padding: @x3baseline;
	@media @tablet{ padding: @baseline; }
	.page-padding;
}

body{
	> header{
		position: relative;
		z-index: 120;
		.slider{
			height: @navheight * 8;
			height: 100vh;
			.slide{
				position: relative;
				height: 100%; width: 100%;
				overflow: hidden;
				.img{
					position: absolute;
					top: 0; left: 0;
					height: 100%; width: 100%;
					img{
						height: auto; width: 100%;
						min-height: 100%;
						object-fit: cover;
					}
				}
				.text{
					font-size: @x2baseline;
					line-height: @x2baseline;
					text-align: right;
					position: absolute;
					top: 50%; right: @x2baseline;
					margin-top: @navheight / 2;
					width: 75%;
					color: @white;
					transform: translateY(-50%);
					text-shadow: 0 0 150px #000;
					@media @phone{
						font-size: (@x2baseline / 1.25);
						line-height: (@x2baseline / 1);
						right: (@x2baseline / 3);
					}
					.body, .title{
						text-transform: uppercase;
					}
					.title{
						font-weight: 900;
						font-size: @x3baseline;
						line-height: @x3baseline;
						@media @phone{ font-size: (@x3baseline / 1.25); line-height: (@x3baseline / 1.25); }
					}
					.body{
						font-weight: 200;
					}
				}
			}
		}

		.logo-shade{
			background: svg-gradient(to bottom, fade(@black, 33%), fade(@black, 0%));
			display: block;
			position: fixed;
			top: 0; left: 0;
			height: @navheight * 2.25; width: 100%;
			pointer-events: none;
		}
		.logo{
			display: inline-block;
			position: fixed;
			top: 0; left: 0;
			right: 0;
			margin: 0 auto;
			// height: @navheight * 2.5; width: (@navheight * 2.5) * 3.5;
			height: @navheight * 2.5; width: 100%;
			@media @phone{ height: @navheight * 1.5; }
			padding-top: @baseline;
			text-align: center;
			opacity: 1;
			visibility: visible;
			transition: opacity .3s ease-in-out, visibility .3s ease-in-out, transform .3s ease-in-out;
			a{
				position: relative;
				display: inline-block;
				height: 100%; width: auto;
				img{
					height: 100%; width: auto;
				}
			}
			&:before{
				background: svg-gradient(to bottom, fade(@black, 33%), fade(@black, 0%));
				display: block;
				// position: fixed;
				// top: 0; left: 0;
				position: absolute;
				top: 0; left: 0;
				height: @navheight * 2.25; width: 100%;
				pointer-events: none;
			}
		}
		nav{
			position: fixed;
			top: 42%; left: 0;
			transition: transform .6s @cubic-bezier;
			ul{
				list-style: none;
				// text-align: right;
				margin: 0; padding: 0;
				li{
					background: fade(@black, 90%);
					list-style: none;
					display: block;
					width: 100%;
					position: relative;
					overflow: hidden;
					transition: background .3s @cubic-bezier;
					&:before, &:after{
						content: ' ';
						display: block;
						position: absolute;
						bottom: 0; right: 0;
						height: 2px; width: 100%;
						// transform-origin: 100% 50%;
						transform-origin: 0 50%;
						transform: scaleX(0);
					}
					&:before{
						background: svg-gradient(to right, spin(@accent, 10%),  spin(@accent, -5%));
						transition: transform .3s @cubic-bezier, background .3s @cubic-bezier;
					}
					&:after{
						background: @white;
						transition: transform .6s @cubic-bezier;
					}
					a, a:link, a:visited, a:focus, a:hover, a:active{
						color: @white;
						font-size: @baseline * .85;
						font-weight: 900;
						position: relative;
						display: block;
						padding-right: @x4baseline; padding-left: @baseline;
						line-height: ceil(@baseline * 2.5);
						height: ceil(@baseline * 2.5);
						text-decoration: none;
						text-transform: uppercase;
						.text{
						}
						.icon{
							text-align: center;
							display: block;
							position: absolute;
							top: 0; right: 0;
							height: 100%; width: ceil(@baseline * 2.5);
							opacity: 0;
							transform: translateX(@x25baseline);
							transition: opacity .6s @cubic-bezier, transform .6s @cubic-bezier;
							svg{
								display: inline-block;
								height: @baseline;
								line-height: ceil(@baseline * 2.5);
								vertical-align: sub;
							}
						}
					}
					&:hover{
						background: fade(spin(lighten(@black, 2%), -20%), 90%);
						&:before{
							transform: scaleX(1);
						}
					}
					&.active{
						background: fade(@accent, 90%);
						&:after{
							background: @white;
							transform: scaleX(1);
						}
					}
				}
			}
		}
		&.compact{
			.logo{
				opacity: 0;
				visibility: hidden;
				transform: translateY(-@baseline);
			}
			nav{
				transform: translateX(~'calc(-100% + @{x25baseline})');
				ul{
					li{
						a, a:link, a:visited, a:focus, a:hover, a:active{
							.icon{
								opacity: 1;
								transform: translateX(0);
							}
						}
					}
				}
			}
		}
	}

	&.car-single{
		> header{
			.slider{
				// height: 50vh;
			}
		}
	}

	> main{
		position: relative;
		z-index: 100;
		section{
			&.cars{
				> .row-12{ overflow: hidden; }
				.car{
					text-decoration: none;
					position: relative;
					display: block;
					margin-bottom: @x2baseline;
					//visibility: hidden;
					.shadow(@black, 2, .3);
					transition: box-shadow .6s @cubic-bezier;
					.thumb{
						position: relative;
						height: @baseline * 10;
						.img{
							position: absolute;
							top: 0; left: 0;
							height: 100%; width: 100%;
							overflow: hidden;
							opacity: .9;
							transition: opacity .6s @cubic-bezier;
							img{
								height: auto; width: 100%;
								// min-height: 150%;
								height: 100%;
								object-fit: cover;
							}
						}
						.price{
							background: @accent;
							color: @white;
							font-size: @baseline;
							font-weight: 900;
							line-height: @x2baseline;
							text-transform: uppercase;
							position: absolute;
							bottom: 0; right: 0;
							padding-left: @baseline * 1.25; padding-right: @baseline / 2;
						}
					}
					.info{
						.title{
							padding: @baseline / 1.25;
							padding-bottom: 0;
							text-transform: uppercase;
							font-size: @baseline * .9;
							line-height: @baseline;
							font-weight: 900;
							height: @baseline * 3.5;
						}
						.specs{
							font-size: @baseline / 1.75;
							line-height: @baseline;
							font-weight: 900;
							margin: 0; padding: 0;
							padding-left: @baseline / 1.5; padding-right: 0;
							padding-top: @baseline / 2; padding-bottom: @baseline / 2;
							display: flex;
							flex-flow: row wrap;
							opacity: .6;
							transition: opacity .6s;
							.spec{
								margin: 0; padding: 0;
								min-width: (100% / 5);
								padding: 0 (@baseline / 6);
								white-space: nowrap;
								flex-grow: 1;
							}
						}
					}
					&:hover{
						.shadow(@black, 3.25, .4);
						.thumb{
							.img{ opacity: 1; }
						}
						.specs{ opacity: 1; }
					}
				}
			}
			&.car{
				visibility: hidden;
				.slider{
					.img{
						text-align: center;
						img{
							display: inline-block;
						}
					}

					.slick-prev, .slick-next{
						font-size: @x2baseline;
						height: @x3baseline; width: @x2baseline;
						line-height: @x2baseline;
						overflow: hidden;
						&:before{
							font-size: @x2baseline;
							width: @x2baseline;
							line-height: @x2baseline;
							vertical-align: middle;
							text-shadow: 0 2px 6px fade(@black, 50%);
						}
					}
				}
			}
			&.banner{
				position: relative;
				height: @navheight * 4;
				height: (100vh / 2);
				background: @black;
				.bg{
					position: absolute;
					top: 0; left: 0;
					height: 100%; width: 100%;
					overflow: hidden;
					opacity: .8;
					img{
						height: auto; width: 100%;
					}
				}
				.text{
					color: @white;
					font-size: @x2baseline;
					line-height: @x25baseline;
					text-align: right;
					text-transform: uppercase;
					position: absolute;
					top: 50%; right: @x2baseline;
					transform: translateY(-50%);
					@media @phone{
						font-size: (@x2baseline / 1.25);
						line-height: (@x25baseline / 1.25);
						right: (@x2baseline / 3);
					}
					.title{
						font-size: @x3baseline; line-height: @x3baseline;
						@media @phone{ font-size: (@x3baseline / 1.25); line-height: (@x3baseline / 1.25); }
						font-weight: 900;
					}
					.body{
						font-weight: 200;

					}
				}
			}
			&.about{
			}
		}
	}
	> footer{
		background-color: @color;
		background-image: url(../images/stock/footer_bg.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		color: @background;

		.hide-from-footer{ display: none; }

		.info{
			a, a:link, a:visited, a:focus, a:hover, a:active{
				text-decoration: none;
				font-size: @baseline;
				line-height: @baseline;
				@media @phone{
					font-size: (@baseline / 1.25);
				}
			}
			i{
				text-align: right;
				display: inline-block;
				width: @baseline;
				svg{
					vertical-align: top;
					height: @baseline; width: auto;
					color: @accent;
				}
			}
		}
		.map{
			iframe, #map{
				height: @navheight * 4;
				height: 50vh; width: 100%;
			}
		}
		.signature{
			text-align: center;
			display: block;
			line-height: @baseline;
			font-size: @baseline;
			height: @baseline; width: 100%;
			overflow: hidden;
			img{
				display: inline-block;
				line-height: @baseline;
				height: @baseline / 1.25; width: auto;
				vertical-align: text-top;
			}
		}
	}
}