// Brand slider, Brand product
//  Variables
//  _____________________________________________
@brand_tab_item: 6;
@brand_tab_tablet_item: 5;
@brand_tab_small_tablet_item: 4;
@brand_tab_mobile_item: 2.5;
& when (@media-common = true) {
	.brand-list-tab-container-content{
		position: relative;
	}
	.brand-list-tab-container-content .products{
		margin:0;
	}
	.brand-list-tab-container-content .tab-loadding{
	    position: absolute;
	    top: 0;
	    z-index: 1;
	    background-color: rgba(255, 255, 255, 1);
	}
	.brand-list-tab-container-content .show-blocks{
	    display: block !important;
		opacity: 1;
		z-index: 1;
	}
	.brand-list-tab-container-content .hide-blocks{
	    display: block !important;
	    position: absolute;
	    top: 0;
	    width: 100%;
	    bottom: 0;
		opacity: 0;
		z-index: 0;
	}
	.brand-list-tab-container-content .hide-blocks.click-show-block{
		opacity: 1;
		z-index: 1;
	}
	.block-widget-rokanthemes-brand{
		text-align: center;
		#rokanthemes-carousel{
			.owl-stage{
				display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
			    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
			    display: -ms-flexbox;      /* TWEENER - IE 10 */
			    display: -webkit-flex;     /* NEW - Chrome */
			    display: flex;   
			    align-items: center;
			}
			.item-row-slider-brand{
				.brand-item{
					&:not(:last-of-type){
						margin-bottom: 3rem;
					}
				}
			}
		}
		.block-title{
		    margin-top: 40px;
		    margin-bottom: 30px;
		    text-align: center;
		    overflow: hidden;  
		}
		.owl-theme .owl-pagination{
		  position: static;
		  margin-top: 15px;
		}
		.brand-item{
			img{
				margin: auto;
			}
			.brand-name{
				font-family: @heading__font-family__base;
				text-transform: capitalize;
				font-weight: @font-weight__semibold;
				.lib-font-size(18);
				a{
					&:not(:hover){
						color: @heading__color__base;
					}
				}
			}
		}
	}
	.brand-item{
	  text-align: center;
	}
	.brand-item .name,
	.brand-item  .brand-name{
	  margin-top: 10px;
	}
	.brand-label{
	  margin-top: 20px;
	  display: block;
	}
	// Brand group view
	.rokanthemesbrand-group-view{
		.brandlist{
			.brand-item{
				margin-bottom: 3rem;
			}
			.toolbar-products {
				.pages{
					display: block;
					margin-top: 30px;
					float: left;
				}
				.toolbar-amount{
					float: right;
					margin-top: 30px;
				}
			}
		}
	}
	// Brand page
	.brand-view {
	  margin-bottom: 5rem;
	  border-bottom: 1px solid @border-color__base;
	  .brand-image{
	  	margin-bottom: 1.5rem
	  }
	  .brand-description{
	  	margin-top: 1rem;
	  	margin-bottom: 3rem;
	  }
	  .filter-options-title{
	  	padding-top: 0;
	  }
	}
	.rokanthemesbrand-index-index{
		.page-title-wrapper{
			display: none;
		}
		.sidebar{
			.block{
				.filter-options{
					.filter-options-title{
						padding-top: 0;
					}
				}
			}
		}
		.brandlist{
			.block-content{
				.row{
					.brand-item{
						background: @color-white;
						padding: 1rem;
					}
					&:not(:last-of-type){
						.brand-item{
							margin-bottom: 3rem;
						}
					}
				}
			}
		}
	}
	// Brand on product detail page, quick view
	.product-page-brand-common-view{
		display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	    display: -ms-flexbox;      /* TWEENER - IE 10 */
	    display: -webkit-flex;     /* NEW - Chrome */
	    display: flex;   
	    align-items: center;
	    flex-wrap: wrap;
	    > *{
	    	margin: 0;
	    }
	    .brand-label{
	    	margin-bottom: @list-item__margin-bottom; // Margin bottom same as li
	    	margin-right: 0.5rem;
	    	color: @heading__color__base;
	    }
	    .product-brands{
	    	padding-left: 0;
	    	list-style: none;
		    .brand-item{
		    	display: inline-block;
		    	img{
		    		max-width: 12rem;
		    		@_transform: translateZ(0);
		    		.lib-css(transform, @_transform, @_prefix: 1);
		    		margin-bottom: 0.3rem;
		    	}
		    	a{
		    		display: block;
		    		white-space: nowrap;
				  	text-overflow: ellipsis;
				  	overflow: hidden;
				  	text-transform: capitalize;
				  	&:not(:hover){
				  		color: @text__color;
				  	}
		    	}
		    }
		}
	}
	.brand-list-tab-container-content{
		position: relative;
	}
	.brand-list-tab-container-content .products{
		margin:0;
	}
	.brand-list-tab-container-content .show-block {
	    display: block !important;
	    position: absolute;
	    top: 0;
	    width: 100%;
		opacity:0;
		bottom: 0;
	}
	// Brand list-tab
	.brand-product-tab{
		::-webkit-scrollbar {
			  height: 3px;
		}

		/* Track */
		::-webkit-scrollbar-track {
		  background: #f1f1f1;
		}

		/* Handle */
		::-webkit-scrollbar-thumb {
		  background: #ccc;
		}

		/* Handle on hover */
		::-webkit-scrollbar-thumb:hover {
		  background: #ccc;
		}
		.widget-brand-list-tab-title{
			position: relative;
			padding-right: 3.5rem;
			a{
				position: absolute;
				top: 55%;
				right: 0;
				@transform: translateY(-50%);
				.lib-css(transform, @transform, @_prefix: 1);
				border-bottom: 1px solid #969696;
				padding-bottom: 1px;
    			line-height: 1.3;
				&:not(:hover){
					color: #555;
				}
			}
			@media only screen and (max-width: @screen__xs){
				display: none;
			}
		}
		.brand-list-tab-container-title{
			display: grid;
			overflow: auto;		
			border-right: 1px solid @border-color__base;	
			margin-bottom: 3rem;
			.title{
				margin-bottom: 0;
				padding: 2rem;
				border: 1px solid @border-color__base;
				border-right: 0;
				position: relative;
				background: @color-white;
			    display: inline-flex;
			    justify-content: center;
			    align-items: center;
				&:before{
					content: '';
					position: absolute;
					top: -1px;
					right: 0;
					bottom: -1px;
					left: 0;
					background: transparent;
					border: 2px solid transparent;
					z-index: 1;
				}
				&.active{
					&:before{
						border-color: @theme__color__primary;
					}
				}
				img, span{
					display: block;
					margin: auto;
				}
				a{
					display: block;
					text-align: center;
					position: relative;
					z-index: 2;
					span{
						margin-top: 0.5rem;
					}
					&:not(:hover){
						span{
							color: @text__color;
						}
					}
				}
			}
		}
		.row-container-brand-content-tab{
			.products.list{
				.lib-list-reset-styles(); 
			}
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
	// Brand list-tab
	.brand-product-tab{
		.brand-list-tab-container-title{
			grid-template-columns: repeat(1000, 100%/@brand_tab_item);	
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__l) {
	.brand-product-tab{
		.brand-list-tab-container-title{
			grid-template-columns: repeat(1000, 100%/@brand_tab_tablet_item);	
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
	.brand-product-tab{
		.brand-list-tab-container-title{
			grid-template-columns: repeat(1000, 100%/@brand_tab_small_tablet_item);	
		}
	}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
	.brand-product-tab{
		.brand-list-tab-container-title{
			grid-template-columns: repeat(1000, 100%/@brand_tab_mobile_item);	
		}
	}
}