// _extend.scss
 

//form
.input-style{
	padding:1rem;
	border-color:transparent;
	line-height:1rem;
	font-family:$font__code;
	font-weight:400;
	font-style:italic;


	@include input-placeholder(){
		color: $gray-500;
  		 
	}
}

//button
.btn{
	padding: .75rem 1.8rem;
	text-transform:uppercase;
	@include font-size(.9);
	font-weight:500;
	border:1px solid;
	border-color:transparent;
	line-height:1.5;
	color:$white;
	@include transform(translateY(0));
	@include transition(all 0.3s ease);
	

	&:hover{
		@include transform(translateY(-.3rem));
		color:$white;
	}

	&:visited{
		color:$white;
	}

}

.primary-btn{
	background-color:$red;
	@include box-shadow( 0, 3px, 6px, rgba($red, 0.23));
	border-color:$red;

	&:hover{
		@include box-shadow( 0, 3px, 6px, rgba($red, 0.4));
	}
	
}
.secondary-btn{
	background-color:$blue;
	@include box-shadow( 0, 3px, 6px, rgba($blue, 0.23));
	border-color:$blue;

	&:hover{
		@include box-shadow( 0, 3px, 6px, rgba($blue, 0.4));
	}
	
}

.white-btn{
	background-color:$white;
	@include box-shadow( 0, 3px, 6px, rgba($white, 0.23));
	border-color:$blue;
	color:$red;

	&:hover,
	&:visited{
		@include box-shadow( 0, 3px, 6px, rgba($white, 0.4));
		color:$red;
	}
	
}

//links
.links{
	@include font-size(.9);
	font-weight:600;
	text-transform:uppercase;
	position:relative;
 
	&:after{
		position: absolute;
	    top: 100%;
	    left: 0;
	    width: 100%;
	    height: 2px;
	    background-color:$red;
	    content: '';
	    opacity: 0;
	    @include transform(translateY(10px));
		@include transition(all  0.3s ease);


	     
	}

	&:hover, &:focus{
		&:after{

		opacity: 1;
	    @include transform(translateY(5px));
    }
}



	&.bz-red{
		color:$red;

		&:after{
			background-color:$red;
		}
	}

	&.bz-blue{
		color:$blue;

		&:after{
			background-color:$blue;
		}
	}

	&.bz-white{
		color:$white;

		&:after{
			background-color:$white;
		}
	}

}


//icon
	.icon-left{
	    
    	position: absolute;
    	left: 0;
    	top: 5px;
	}

//scrollbar
 

.scrollbar{
	overflow:auto;
	max-height:305px;

	&::-webkit-scrollbar-button{
	    background-repeat: no-repeat;
	    width: 5px;
	    height: 0px;
   }

  &::-webkit-scrollbar-track  {
    background-color: transparent;}

  &::-webkit-scrollbar-thumb   {
    border-radius: 3px;
    background-color: $gray-500;
    width:3px;
 
   
   }
 

  &::-webkit-scrollbar {
    width: 4px;
     
	}
}

//Post-categories

.post-categories-tags{
			list-style:none;
			@include font-size(.9);

			li{
				display:inline-block;
				margin: 0.3rem 0.2rem;
			}

			a{
				background-color:$blue;
				padding: 0.4rem 1rem;
				color:$white;
				font-style:italic;
			}
		}

.box-with-shadow{
 	background-color:$white;
	@include box-shadow (0px, 3px, 6px, rgba(0, 0, 0, 0.23));
	border-color:transparent;
}


//sale
.onsale{
		background-color:$blue;
		padding: 0.4rem 1rem;
		color:$white;
		font-style:italic;
		@include font-size(.9);
		position: absolute;
    	margin: 1rem;

	}