// --------------------------------------------------------------------------------------------
// BRANDS
// --------------------------------------------------------------------------------------------

.brands-widget {

	.brand-item {
		text-align: center;

		a {
			display: block;
			padding-left: 20px;
			padding-right: 20px;
			padding-bottom: 20px;
			padding-top: 20px;
		}

		img {
			max-height: 60px;

			&.basel-lazy-load {
				object-fit: contain;
			}
		}
	}
}

// BRAND STYLE

.brands-list {

	.brand-item {
		text-align: left;
		margin-bottom: 15px;

		a {
			padding: 0;

			&:hover {
				text-decoration: none;
				color: $primary-color;
			}
		}

		&:last-child {
			margin-bottom: 0;
		}
	}
}

.brands-grid,
.brands-list {
	
	.brands-items-wrapper {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}	

	&.brands-columns-1 {

		.brand-item {  
			-webkit-box-flex:0;
			-ms-flex:0 0 100%;
			flex:0 0 100%;
			max-width: 100%; 
		}
	}

	&.brands-columns-2 {

		.brand-item {  
			-webkit-box-flex:0;
			-ms-flex:0 0 50%;
			flex:0 0 50%;
			max-width: 50%; 
		}
	}

	&.brands-columns-3 {

		.brand-item {
			-webkit-box-flex:0;
			-ms-flex:0 0 33.33333333%;
			flex:0 0 33.33333333%;
			max-width: 33.33333333%;
		}
	}

	&.brands-columns-4 {

		.brand-item {
			-webkit-box-flex:0;
			-ms-flex:0 0 25%;
			flex:0 0 25%;
			max-width: 25%;
		}
	}

	&.brands-columns-5 {

		.brand-item {
			-webkit-box-flex:0;
			-ms-flex:0 0 20%;
			flex:0 0 20%;
			max-width: 20%;
		}
	}

	&.brands-columns-6 {

		.brand-item {
			-webkit-box-flex:0;
			-ms-flex:0 0 16.66666666%;
			flex:0 0 16.66666666%;
			max-width: 16.66666666%; 
		}
	}
}

// BRAND STYLE

.brands-style-bordered {

	.brand-item { 
		border-width: 1px;
		border-color: rgba(118, 118, 118, 0.14);
	}

	&.brands-grid {
		overflow: hidden;

		.brands-items-wrapper {
			margin-right: -2px;
			margin-bottom: -2px;
		}

		.brand-item {
			border-right-style: solid;
			border-bottom-style: solid;
		}
	}

	&.brands-carousel {

		.owl-stage-outer {
			border-width: 1px;
			border-style: solid;
			border-color: rgba(118, 118, 118, 0.14);		
		}

		.brand-item {
			border-right-style: solid;
		}
	}

	&.brands-list {

		.brands-items-wrapper {
			margin-left: -10px;
			margin-right: -10px;
		}

		.brand-item {
			margin-bottom: 10px;
			padding-left: 10px;
			padding-right: 10px;

			> a {
				border-bottom: 1px solid;
				border-color: rgba(118, 118, 118, 0.14);
			}
		}		
	}

	.color-scheme-light & {

		&.brands-grid {

			.brand-item  {
				border-color: $dark-border-color;
			}
		}

		&.brands-list {

			.brand-item  {
			
				a {
					border-color: $dark-border-color;
				}
			}
		}
	}
}

// BRAND HOVERS

.brands-hover-simple {

	.brand-item {

		img {
			-webkit-filter: grayscale(100%);
			filter: grayscale(100%);
			transition:
			filter .3s ease;
			-webkit-transition:
			-webkit-filter .3s ease;
		}

		&:hover {

			img {
				-webkit-filter: grayscale(0);
				filter: grayscale(0);
			}			
		}
	}
}

.brands-hover-alt {

	.brand-item {

		img {
			-webkit-filter: grayscale(100%);
			filter: grayscale(100%);
			opacity: 0.5;
			transition:
			filter .3s ease,
			opacity .3s ease;
			-webkit-transition:
			-webkit-filter .3s ease,
			opacity .3s ease;
		}

		&:hover {

			img {
				opacity: 1;
				-webkit-filter: grayscale(0);
				filter: grayscale(0);
			}
		}
	}
}

.brands-carousel {
	margin-left: -10px;
	margin-right: -10px;

	.brand-item {

		a {
			padding-left: 10px;
			padding-right: 10px;
		}
	}
}

.not-brand-selected {
	text-align: center;
	padding: 20px 0;
}