/*===============================================
	[SASS DIRECTORY ]
	
    [1] Minxin Link
    [2] Minxin Button
    [3] Minxin Triangle
    [4] Minxin LABEL PRODUCT
    [5] Minxin Scrollbars
    [6] Minxin Dev Custom 
  
==============================================*/

@import 'bourbon/bourbon';


.no-margin{margin: 0 !important;}

//===== Minxin Link =======

@mixin link(){
	color: $linkColor;text-decoration: none;
	&:hover{color: lighten($linkColor, 10%);}
}
@mixin linkGrayDark(){
	color: $gray-dark;
	&:hover{color: $linkColor;}
}

@mixin linkGray(){
	color: $gray;
	&:hover{color: $linkColor;}
}
@mixin linkGraylighter(){
	color: $input-color-placeholder ;
	&:hover{color: $linkColor;}
}
@mixin linkGrayLight(){
	color: $base-border-color;
	&:hover{color: $linkColor;}
}
@mixin linkWhite(){
	color: $white;
	&:hover{color: $linkColor;}
}
//====== Minxin Buton =======
@mixin buttonGrayDark(){
	padding: 9px 20px; background: $gray-darker;color: #fff;   border-radius: 3px;border: none;
	&:hover{background: $background1; border-color: $linkColor;color: #fff; }
}

@mixin buttonGray(){
	padding: 9px 20px; background: $gray;color: #fff;  border-radius: 3px;border: none;
	&:hover{background: $background1; border-color: $linkColor;color: #fff; }
}

@mixin buttonGraylighter(){
	padding: 9px 20px;background: $gray-lighter;color: #333;  border-radius: 3px;border: none;
	&:hover{background: $background1; border-color: $linkColor;color: #fff; }
	
}
@mixin buttonGraylight(){
	@include buttonGray(); 
	background: $input-color-placeholder; 
	&:hover{background: $background;}
}

@mixin buttonColor(){
	@include buttonGray();
	background: $background; border-color: $background;
	&:hover{background: $gray;border-color: $gray;}
}


@mixin bgbutton(){
	background: -moz-linear-gradient(top, #474747 0%, #212121 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#474747), color-stop(100%,#212121));
    background: -webkit-linear-gradient(top, #474747 0%,#212121 100%);
    background: -o-linear-gradient(top, #474747 0%,#212121 100%);
    background: -ms-linear-gradient(top, #474747 0%,#212121 100%);
    background: linear-gradient(to bottom, #474747 0%,#212121 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#212121',GradientType=0 );
}
@mixin buttonColorLighten($opacity){
	@include buttonGray();
	background: $background; border: none;
	&:hover{background: lighten($background, $opacity);}
}

@mixin clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}


//======   @include scrollbars(.5em, slategray);
@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white,  30%)) {
  // For Google Chrome
  /*::-webkit-scrollbar {
      width:  $size;
      height: $size;
  }*/

  ::-webkit-scrollbar-thumb {
      background: $foreground-color;
  }

  ::-webkit-scrollbar-track {
      background: $background-color;
  }

  // For Internet Explorer
  /*body {
    scrollbar-face-color: $foreground-color;
    scrollbar-track-color: $background-color;
  }*/
}

//====== Minxin Triangle  =======
// Size helper mixin
// ---
// @param [number] $width: width
// @param [number] $height ($width): height
// ---

@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

// [Private] 
// Position helper mixin
// Article about it: http://hugogiraudel.com/2013/08/05/offsets-sass-mixin/
// ---
// @param [string] $position: position type
// @param [list] $args: list of offsets and values
// ---
@mixin _position($position, $args) {
  @each $o in top right bottom left {
    $i: index($args, $o);
    @if $i{
		@if $i + 1 <= length($args){
			@if type-of( nth($args, $i + 1) )== number {
				#{$o}: nth($args, $i + 1);
			} 
			
		 }
      
    }
  }
  position: $position;
}

// Absolute positioning helper mixin
// Article about it: http://hugogiraudel.com/2013/08/05/offsets-sass-mixin/
// ---
// @param [list] $args: list of offsets and values
// ---
@mixin absolute($args) {
  @include _position(absolute, $args);
}

@mixin triangle($direction, $position, $color: currentColor, $size: 1em) {
  // Make sure the direction is valid
  @if not index(top right bottom left, $direction) {
    @warn "Direction must be one of top, right, bottom or left.";
  }

  @else {
    @include absolute($position); // Position
    @include size(0); // Size
    content: '';
    z-index: 2;

    border-#{$direction}: $size * 1 solid $color;
    $perpendicular-borders: $size solid transparent;
    
    @if $direction == top or $direction == bottom {
      border-left:   $perpendicular-borders;
      border-right:  $perpendicular-borders;
    }

    @else if $direction == right or $direction == left {
      border-bottom: $perpendicular-borders;
      border-top:    $perpendicular-borders;
    }
  }
}




/*Dev Custom */
@mixin button-group(){font-size: 0;
	.wishlist,.compare{
		opacity: 0;z-index: 1;font-size: 12px;margin: 0 4px;
		@include transition(all 0.1s ease-in-out 0s);
	}
	.wishlist{
		@include transform(translateX(40px));
	}
	.compare{
		@include transform(translateX(-40px));
		
	}
}
@mixin button-group-hover(){
	.wishlist,.compare{
		@include transform(translateX(0px));
		opacity: 1;
		@include transition(all 0.3s ease-in-out 0s);
	}
	
	.addToCart{background: $background1; color: #fff; border-color: $linkColor;}
}
@mixin title-underline($size){
    h3.modtitle{font-size: 16px; border-bottom: $size solid #e6e6e6;margin: 0 0 30px;padding: 9px 0; text-transform: uppercase; font-weight: bold; position: relative;
        &:after{content:" "; width: 125px; height: $size; background: $background1; display: block; position: absolute; bottom: 0;margin-bottom: -$size; }  
    }
    
}
@mixin owl2-controls($style:top){
	@if( $style == top){
		position: absolute;
		top: 0;
		#{$right}: 0;
		width: 100%;
		z-index: 45;
		.owl2-nav {
			div.owl2-prev{
				content: "\f104";
				top: 7px;
				@include if-ltr {#{$left}: auto; #{$right}: 37px;}
				@include if-rtl {#{$left}: auto; #{$right}: 7px;}
			}
			div.owl2-next{
				content: "\f105";
				top: 7px;
				@include if-ltr {#{$left}: auto; #{$right}: 7px;}
				@include if-rtl {#{$left}: auto; #{$right}: 37px;}
			}
			div.owl2-prev, div.owl2-next{
				height: 25px;
				width: 25px;
				font-family: $FontAwesome;
				border-radius: 25px;
				background: #fff;
				opacity: 1;
				border: 1px solid #a0a0a0;
				color: #a0a0a0;
				font-size: 0;
				margin: 0;
				padding: 0;
				text-align: center;
				&:before{
					font-size: 17px;
					line-height: 22px;
					text-align: center;
					
				}
				&:hover{
					border-color: $linkColor;
					color: $linkColor;
				}
			}
		}
	}@else if $style == detail{
		.owl2-nav{ 
			div{
				display: block;
				width: 36px;height: 36px;
				text-align: center;
				color: #999;
				z-index: 9;
				padding: 5px 0;
				cursor: pointer;
				position: absolute;
				top: 50%;
				margin-top: -18px;
				opacity: 1;
				background: transparent;
				font-size: 22px;
				&.owl2-prev{left: 0px;}
				&.owl2-next{right: 0px;}
			}    
		}
		.owl2-dots{ text-align: center;
			.owl2-dot{width:10px;height: 10px;border-radius: 50%;background: $border-home ; display: inline-block;margin: 0 3px;
				&.active{background: $background;}
			}
		}
	}
}

@mixin row-flex(){
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
}

.buttonsn{
	height: 40px;
    width: 100%;
    background-color: $background;
    text-align: center;
    text-transform: uppercase;
    font-size: 13px;
    color: #fff;
    font-weight: 700;
    margin: 0;
    border: 0;
    line-height: 40px;
    padding: 0;
    border-radius: 20px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 10px 15px rgba(194,54,0,0.1);
    &:hover{background: lighten($background,10%);}
}
.btnsn{
	 text-align: center;
    background: $background;
    border: none;
    border-radius: 0;
    color: #fff;
    text-transform: uppercase;
    padding: 8px 12px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 10px 15px rgba(194,54,0,0.1);
    &:hover{background: lighten($background,10%);}
}
.lib-list-item-product2{
		border: none;
		.image-dev{
			
			.list-button-dev{
				position: absolute;
				top: 50%;
				left: 50%;
				z-index: 10;
				transform: translate3d(-50%,-50%,0);
				-moz-transform: translate3d(-50%,-50%,0);
				-webkit-transform: translate3d(-50%,-50%,0);
				-ms-transform: translate3d(-50%,-50%,0);
				li{
					display: inline-block;
					float: left;
					height: 40px;
					width: 40px;
					background: #fff;
					position: relative;
					border-width: 0 1px 0 0;
					border-style: solid;
					border-color: #ddd;
					opacity: 0;
					transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
					&:nth-child(1){
						transform: translateX(40px);
						-moz-transform: translateX(40px);
						-webkit-transform: translateX(40px);
						-ms-transform: translateX(40px);
						z-index: 1;
						transition-delay: 0s;
					}
					&:nth-child(2){
						transition-delay: 0.2s;
						z-index: 2;
					}
					&:nth-child(3){
						transition-delay: 0.2s;
						z-index: 2;
					}
					&:nth-child(4){
						transform: translateX(-40px);
						-moz-transform: translateX(-40px);
						-webkit-transform: translateX(-40px);
						-ms-transform: translateX(-40px);
						z-index: 1;
						transition-delay: 0s;
					}
					&:first-child{border-left: 1px solid #ddd;}
					
					a, button{
						background: none;
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						line-height: 40px;
						text-align: center;
						box-shadow: none;
						border: none;
						color: $gray;
						width: 40px;
						padding: 0;
					}
					&:hover{
						
						background: $background1;
						a, button{
							color: #fff;
						}
					}
				}
			}
		}
		.caption-dev{
			text-align: center;
			padding: 0 15px;
			.rating-dev{
				margin: 5px 0;
				.fa-stack-2x{
					font-size: 11px;
				}
			}
			.title-dev{
				color: #444;
				font-size: 13px;
				
			}
			.price-dev{
				.price.product-price{font-size: 16px;}
				.price-new{font-size: 16px;}
				.price-old{font-size: 12px}
			}
			.add-cart-dev{
				background: #fff;
				border: 1px solid #ddd;
				font-size: 12px;
				text-transform: uppercase;
				color: #999;
				font-weight: bold;
				box-shadow: none;
				border-radius: 0;
				padding: 6px 20px;
				margin: 0 0 30px;
				@include transition(all 0.2s ease-in-out);

			}
		}
}

.lib-list-item-product-over2{
	
	.image-dev{
		
		.list-button-dev{
			li{
				
				opacity: 1;
				transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
				&:nth-child(1){
					transform: translateX(0);
					-moz-transform: translateX(0);
					-webkit-transform: translateX(0);
					-ms-transform: translateX(0);
					transition-delay: 0.2s;
				}
				&:nth-child(2){
					transition-delay: 0s;
				}
				&:nth-child(3){
					transition-delay: 0s;
				}
				&:nth-child(4){
					transform: translateX(0);
					-moz-transform: translateX(0);
					-webkit-transform: translateX(0);
					-ms-transform: translateX(0);
					transition-delay: 0.2s;
				}
			}
		}
	}
	
} 

/*EFECT PRODUCT NUMBER*/
.lib-two-img{
	position: relative;
	display: block;
	.img-1{
		position: relative;
        @include transform(rotateY(0deg));
		transition: all 0.5s ease-in-out;
	}
	.img-2{
		position: absolute;
		z-index: 0;
		top: 0;
		opacity: 0;
		width: 100%;
		display: block;
		padding: 0 7px;
        @include transform(rotateY(90deg));
		transition: all 0.5s ease-in-out;
		#{$left}: 0; 
	}
}

.lib-two-img-over{
	.img-1{
		opacity: 0;
        transform-style: inherit;
        @include transform(rotateY(90deg));
		transition: all 0.5s ease-in-out;
	}
	.img-2{
		padding: 0 7px;
		opacity: 1;
        transform-style: inherit;
		@include transform(rotateY(0deg));
		transition: all 0.5s ease-in-out;
	}
}
/*EFFECT SLIDERHOME*/

@keyframes myeffect-slideshow {
    0%   {
	opacity: 0;
	transform: translateY(-300px);
	-webkit-transform: translateY(-300px);
	-moz-transform: translateY(-300px);
	-ms-transform: translateY(-300px);
	-o-transform: translateY(-300px);
    }
    100% {
	opacity: 1;
	transform: translateY(0);
	-moz-transform: translateY(0);
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
    }
    
    
}
@-webkit-keyframes myeffect-slideshow {
    0%   {
	opacity: 0;
	transform: translateY(-300px);
	-webkit-transform: translateY(-300px);
	-moz-transform: translateY(-300px);
	-ms-transform: translateY(-300px);
	-o-transform: translateY(-300px);
    }
    100% {
	opacity: 1;
	transform: translateY(0);
	-moz-transform: translateY(0);
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
    }
}
    
    
@-moz-keyframes myeffect-slideshow {
    0%   {
	opacity: 0;
	transform: translateY(-300px);
	-webkit-transform: translateY(-300px);
	-moz-transform: translateY(-300px);
	-ms-transform: translateY(-300px);
	-o-transform: translateY(-300px);
    }
    100% {
	opacity: 1;
	transform: translateY(0);
	-moz-transform: translateY(0);
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
    }
}


// owl2-nav layout 1 - emarket
@mixin owl2-nav-style1($size,$fontsize : 14px,$color1,$color2){	
	position: absolute;
	top: 0;
	#{$right}: 0;
        .owl2-prev,
        .owl2-next{       
            background-color: transparent;
            border: 2px solid $color1;
            @include border-radius(50%);
            width: $size;
			height: $size;
			line-height: $size - 4px;
			text-align: center;
			float: $left;
			text-indent: -9999px;
			overflow: hidden;
			cursor: pointer;
            opacity: 1;
            z-index: 99;
            font-size: $fontsize;

			&:before{
				color: $color1;
				font-family: $FontAwesome;
				display: block;
				text-indent: 0 !important;
				width: 100%;
				height: 100%;
				font-size: $fontsize;
			}
			&.owl2-next{	
				margin-#{$left}: 5px;	
				&:before{
				  @include if-ltr{             
				  	content: "\f0da"; 
				  }  
				  @include if-rtl {
				    content: "\f0d9"; 
				  }  
				}
			}
			&.owl2-prev{					
				&:before{
				  @include if-ltr{             
				  	content: "\f0d9"; 
				  }  
				  @include if-rtl {
				    content: "\f0da"; 
				  }  
				}
			}
			&:hover{
				border-color: $color2;
				&:before{
				  color: $color2;
				}
			} 
        }
}

// owl2-nav layout 2 - emarket
@mixin owl2-nav-style2($size,$fontsize,$color){
	position: absolute;
	top: 0;
	#{$right}: 0;
	z-index: 99;
	> div{
		width: $size;
	  height: $size;
	  line-height: $size;
	  text-align: center;
	  @include border-radius(0);
	  text-indent: -9999px;
	  overflow: hidden;
	  cursor: pointer;
	  background-color: transparent;
	  position: relative;
	  display: inline-block;
	  border: none;
	  #{$right}: auto;
	  #{$right}: auto;
	  float: none;
	  &:before{
	    color: $color;
	    font-weight: 400;
	    font-family: $FontAwesome;
	    position: absolute;
	    top: -2px;
	    #{$left}: 0;
	    display: inline-block;
	    text-indent: 0;
	    width: 100%;
	    height: 100%;
	    font-size: $fontsize;
	    @include transition(all 0.2s ease-in-out 0s);
	  }
	  &.owl2-next{
	  	//#{$right}: -30px;
	    &:before{
	      @include if-ltr{             
	      	content: "\f105"; 
	      }  
	      @include if-rtl {
	        content: "\f104"; 
	      }  
	    }
	  }
	  &.owl2-prev{
	  	//#{$left}: -30px;
	    &:before{
	      @include if-ltr{             
	      	content: "\f104"; 
	      }  
	      @include if-rtl {
	        content: "\f105"; 
	      }  
	    }
	  }
	  &:hover{
	    background-color: transparent;
	    &:before{
	      color: $linkColor;
	    }
	  } 
	}
	  
}


// owl2-dots style - emarket
@mixin owl2-dot-style($width,$height,$bg){
	position: absolute;
	top: 0;
	#{$right}: 0;
	min-width: 80px;
	.owl2-dot{
		width: $width;
		height: $height;
		border-radius: $height;
		background-color: $bg;
		margin: 0 5px;
		display: inline-block;
		float: $left;
		opacity: 1;
		@include transition(all 0.2s ease-in-out 0s);  
		span{
			display: none;
			
		}
		&:hover{
			background-color: $background;
		}
		&.active{
			//span{
				width: $width + 22px;
				background-color: $background;
			//}
		}
	}
}