// Forms Tweak
.form-control {
	@include form-control;
}

// Buttons
.btn, .post-password-form input[type="submit"] {
	@include btn;
}

// Default
.btn-default {
	@include btn-default; color: $c1;
}

// Default White
.btn-default-white {
	@include btn-default-white;
}

// Default Black
.btn-default-black {
	@include btn-default-black;
}

// Primary
.btn-primary, .post-password-form input[type="submit"] {
	@include btn-primary;
}

// password form
.post-password-form input[type="password"] {
	padding: 13px;
	margin-left: 5px;
}

// Button Sizes
.btn-lg { @include btn-lg; }
.btn-sm { @include btn-sm; }
.btn-xs { @include btn-xs; }

// Btn Corners
.btn.btn--rounded {border-radius: 3px !important;}
.btn.btn--round {border-radius: 50px !important;}
.btn.btn--square {border-radius: 0 !important;}

.btn.btn-text {padding:0;}

// Button Underline
.btn.btn-underline > span {border-bottom:1px solid currentColor;}
.btn.btn-underline.btn-underline--thin > span {border-bottom-width:1px;}
.btn.btn-underline.btn-underline--thick > span {border-bottom-width:2px;}
.btn.btn-underline:active {outline: 0; box-shadow: none; }

/* Width presets */
@include rMin($lg){
	.btn.btn-fullwidth {width:100%;}
	.btn.btn-halfwidth {width:50%; white-space: normal;}
	.btn.btn-third {width:33.33%; white-space: normal;}
	.btn.btn-forth {width:25%; white-space: normal;}
}

// Icons
.dn-icon {
	display: inline-block;
	fill: currentColor;
	stroke-width:0;
	stroke: currentColor;
	height: 1em;
	position: relative;
	top: -0.0625em;
	vertical-align: middle;
	width: 1em;
}
.dn-icon-arrow-left,
.dn-icon-arrow-right {stroke-width:16px;}

/* PAGINATION */
.dn-paginationList {
	@include clearfix;
	margin: 10px 0 20px; text-align:center; display: block; text-transform: uppercase; font-size: 10px; line-height: 1.6; color: #888; list-style-type: none; padding: 10px 0;
	.pagination-item {display: inline-block; margin: 0 5px;}
	.pagination-item-link,
	.pagination-item-link:focus,
	.pagination-item-link:hover,
	.pagination-item-span,
	.pagination-item-span:focus,
	.pagination-item-span:hover { border:0; background:none; text-shadow:none; }
	// Normal state
	.pagination-item-link,
	.pagination-item-span {font-size: 12px; text-transform:uppercase; font-weight: 600; padding: 0; display: inline-block; margin: 0; width: 40px; height: 40px; line-height: 40px; text-align: center; vertical-align: middle; float: none; color: rgba(black, 0.85);border-radius: 3px;}
	// Move left and right arrows
	.pagination-item-prev {margin-right:50px;}
	.pagination-item-next {margin-left:50px;}
	// hide first or last if no pages
	.pagination-item-span-prev,
	.pagination-item-span-next { display: none;}
	// Hover state
	.pagination-item-link:hover,
	.pagination-item-prev-link:hover:before,
	.pagination-item-next-link:hover:before { color: rgba(black, 0.5); }
	// Active
	.pagination-item-active-link,
	.pagination-item-active-link:focus,
	.pagination-item-active-link:hover,
	.pagination-item-active-span,
	.pagination-item-active-span:focus,
	.pagination-item-active-span:hover { color: rgba(black, 0.5); background: none; border: 2px solid rgba(black, 0.18); height: 40px; line-height: 38px; width: 40px; cursor: default;}
	// Add left & right glyphs
	.pagination-item .u-svgArrows {
		svg {width: 14px; height: 14px;}
	}
}

// Icon list
.dn-iconList {
	@include list-reset;
	li {display: inline-block; margin: 0 10px;}
	.dn-iconList-item {
		font-size:20px; color: $b;
	}
}
.dn-iconList.dn-iconList--light {
	.dn-iconList-item {
		color: $w;
	}
}


/* Search */

.dn-searchForm {@include clearfix;}
.dn-searchForm-wrapper {position: relative; }
.dn-searchForm-text {background-color: darken($w, 5); border:0; height:50px; margin:0; float:left; width: 80%; padding: 0 10px 0 30px; font-size: 11px; }
.dn-searchForm-submit {
	background-color: darken($w, 5); border:0; padding:0; height:50px; margin:0; float:left; width: 20%; text-align: center; position: relative;
	&::before {content:''; position: absolute; left: 0; top: calc(50% - 15px); height: 30px; width: 1px; background-color: rgba($b, .1); }
}

/* header search button */
.dn-search {
	position: relative;
	&-container {
		width: 290px;
		position: absolute;
		right: 0;
		padding: 5px 10px;
		background-color: #23262b;
		z-index: 11;
		box-shadow: 0px 14px 32px 0px rgba(0, 0, 0, 0.14);
		display: none;
		@include rMax($xs) {
			width: 200px;
		}
		input {
			background-color: #23262b;
			&:focus, &:active {
				outline: none;
			}
		}
		.dn-searchForm-submit {
			background-color: #23262b;
			color: #666;
		}
		.dn-searchForm-text {
			font-size: 13px;
			padding: 0 10px 0 15px;
		}
		&.panel-opened {display: block;}
	}
	&Close {
		display: none;
	}
	&Btn {
		width: 50px;
		height: 50px;
		display: block;
		line-height: 50px;
		text-align: center;
		background-color: #1a1c20;
		span {
			color: #666;
		}
	}
	& + .dn-headerCart .dn-headerCartBtn {
		border-left: 1px solid rgba(255,255,255,0.05);
	}
}

/* tweak for autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

/* Slick Slider */

ul.znSlickSlider {@include list-reset;}
.slick-slider {position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list {
    position: relative; overflow: hidden; display: block; margin: 0; padding: 0;
    &:focus {outline: none; }
    &.dragging {cursor: pointer; cursor: hand; }
}
.slick-slider .slick-track,
.slick-slider .slick-list {transform: translate3d(0, 0, 0); }
.slick-track {
    position: relative; left: 0; top: 0; display: block;
    &:before,
    &:after {content: ""; display: table; }
    &:after {clear: both; }
    .slick-loading & {visibility: hidden; }
}
.slick-slide {
    display: none; float: left; height: 100%; min-height: 1px;
    &:active,
    &:focus {outline:none}
    [dir="rtl"] & {float: right; }
    img {display: block; }
    &.slick-loading img {display: none; }
    &.dragging img {pointer-events: none; }
    .slick-initialized & {display: block; }
    .slick-loading & {visibility: hidden; }
    .slick-vertical & {display: block; height: auto; border: 1px solid transparent; }
}
.slick-arrow.slick-hidden {display: none; }

// Slick Arrows Nav
.znSlickNav {}
.slick--showOnMouseover .znSlickNav {opacity:0; transition:opacity .15s ease-out;}
.slick--showOnMouseover:hover .znSlickNav {opacity:1;}
.znSlickNav-arr {
	font-size:16px; line-height: 1; cursor: pointer;
	svg {height: 1em; width: 1em; position: relative; top: -0.0625em; vertical-align: middle; }
	polyline {transition: all .15s ease-out; stroke: currentColor;}
	&:hover polyline {stroke-width: 35;}
	&:active polyline {stroke-width: 50;}
}
// Slick Dots
.slick-dots,
.slick-dots ul {margin:0; padding:0; list-style: none;}
.slick-dots li {display: inline-block; margin:0;}
.slick-dots li button { padding: 5px; background-color: black; opacity:.5; width: 6px; height: 6px; display: block; border-radius: 50%; text-indent: 200%; overflow: hidden; box-sizing: content-box; border: none; background-clip: content-box; transition: opacity .2s;}
.slick-dots li button:active,
.slick-dots li button:focus { outline:none; }
.slick-dots li.slick-active button {opacity:.8;}

.znSlickNav--light  .slick-dots li button,
.element-scheme--dark .slick-dots li button {background-color: white;}

.znSlickNav--light polyline {stroke: #ececec;}

// Slick Utilities
.u-slick-show1:not(.slick-slide) ~ .u-slick-show1,
.u-slick-show2:nth-child(2):not(.slick-slide) ~ .u-slick-show2,
.u-slick-show3:nth-child(3):not(.slick-slide) ~ .u-slick-show3,
.u-slick-show4:nth-child(4):not(.slick-slide) ~ .u-slick-show4,
.u-slick-show5:nth-child(5):not(.slick-slide) ~ .u-slick-show5,
.u-slick-show6:nth-child(6):not(.slick-slide) ~ .u-slick-show6 {display: none;}


// Page Loading
.dn-pageLoading {
	background-color: currentColor; color:$w; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; -webkit-touch-callout: none; user-select: none;
	.dn-pageLoading-fallback { color:inherit; filter: invert(100%); }
	// Image Perspective Animation
	&.dn-pageLoading--img-persp {
		perspective: 250px;
		& .dn-pageLoading-inner {animation: preloader-perspective-img 2s infinite ease-in-out; }
	}
	@keyframes preloader-perspective-img{
		0%{ transform: rotateY(0deg); }
		50%{ transform: rotateY(180deg); }
		100%{ transform: rotateY(360deg); }
	}
	// Image Breath Animation
	&.dn-pageLoading--img-breath .dn-pageLoading-inner {animation-name: preloader-breath-img; animation-duration: 1800ms; animation-delay: 200ms; animation-timing-function: cubic-bezier(.73,.005,.42,1.005); animation-iteration-count: infinite; animation-direction: alternate }
	@keyframes preloader-breath-img {from {opacity: .2; } to {opacity: 1; } }
}

// Toggle Header Hack for absolutely positioned header
.dn-toggleHeader {width: 34px; height: 24px; line-height: 24px; text-align: center; background-color: #3AC4C3; right: 3%; position: absolute; top: 0; display: block; z-index: 101; border-radius: 0 0 2px 2px; transition:height .3s ease-in-out, line-height .3s ease-in-out; }
.dn-toggleHeader:after {content:'HIDE HEADER'; font-size: 10px; color: #fff; line-height: 1.2; width: 60px; display: block; margin-left: -13px; margin-top: 4px;transition: opacity .2s ease-in-out; opacity: 0;}
.dn-toggleHeader:hover {height:40px; line-height:40px; }
.dn-toggleHeader span { color: $w; vertical-align: middle;}

.dn-toggleHeader:hover:after {opacity:1;}

.dn-toggleHeader + .dn-siteHeader {transition:transform .3s ease-in-out;}
.dn-toggleHeader.site-header--hide + .dn-siteHeader {transform:translateY(-100%);}
.dn-toggleHeader.site-header--hide span:before {content: "\f343";}

/* Lazy Loaded Images */
@-webkit-keyframes prodArchiveLoaderSpinner {
	0% {  -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes prodArchiveLoaderSpinner {
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

img[data-echo] { opacity:0.3;}
img.is-loaded {opacity: 1; transition:opacity .2s;}

img[data-echo].zn-ajax--loading {
	opacity: .7;
	-webkit-transition: opacity .2s ease-out;
	transition: opacity .2s ease-out;
}

img[data-echo].zn-ajax--loading::after {
	content: '';
	position: absolute;
	top: calc(50% - 30px);
	left: calc(50% - 30px);
	width: 60px;
	height: 60px;
	border: 2px solid #000;
	border-top-color: white;
	border-radius: 50%;
	-webkit-animation: prodArchiveLoaderSpinner 1.4s linear infinite;
	animation: prodArchiveLoaderSpinner 1.4s linear infinite;
	box-shadow: 0 0 35px 15px rgba(0, 0, 0, 0.15);
}

// Embed Responsive Utility
// Pulled from Bootstrap
.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video{position:absolute;top:0;left:0;bottom:0;height:100%;width:100%;border:0}
.embed-responsive-16by9{padding-bottom:56.25%}
.embed-responsive-4by3{padding-bottom:75%}