/**
 * WooCommerce Brands
 */

/**
 * Imports
 */
@import "bourbon";
@import "../../sass/utils/variables";
@import "../../sass/utils/mixins";
@import "susy";
@import "../../sass/vendors/modular-scale";

/**
 * Header region
 */
.header-widget-region {

	.widget_brand_thumbnails {

		ul.brand-thumbnails {

			@include clearfix;
			text-align: center;

			li {
				display: inline-block;
				width: auto !important;
				float: none !important;
				margin-bottom: 0 !important;

				img {
					max-height: 16px;
					width: auto;
					display: block;
				}
			}
		}
	}
}

/**
 * WooCommerce Brand Layered Nav
 */
.widget_brand_nav {

	ul {

		li {

			.count {
				float: right;
			}
		}
	}
}

/**
 * WooCommerce Brand Archive
 */
.tax-product_brand {

	.woocommerce-products-header {
		display: flex;
		flex-direction: column;
		margin: 0 0 ms(4);
		text-align: center;

		.brand-thumbnail {
			margin: 0 0 ms(1);
			width: auto;
			max-height: ms(4);
			align-self: center;
			order: 1;
		}

		.woocommerce-products-header__title,
		.term-description {
			order: 2;
		}
	}
}

div#brands_a_z {

	@include clearfix;

	ul.brands_index {
		margin-left: 0;
		padding: 0;

		li {
			float: none;
			display: inline-block;
			margin: 0 ms(-5) ms(-6) 0;
			padding: 0;
			text-transform: uppercase;

			a,
			span {
				float: none;
				display: block;
				border: 0;
				padding: ms(-4);
				min-width: ms(3);
				text-align: center;
				background-color: #eee;
				color: $color_body;
				line-height: 1;
			}

			span {
				opacity: 0.3;
			}
		}
	}

	h3 {
		text-transform: uppercase;
	}

	a.top {
		padding: ms(-2);
		background-color: #eee;
		color: $color_body;
		border: 0;
		line-height: 1;
	}

	ul.brands {
		margin-left: 0;
		list-style-position: inside;

		li {
			margin: 0 0 ms(-4);
			padding: 0 0 ms(-4);
			border-bottom: 1px solid $color_border;
		}
	}
}

/**
 * WooCommerce Brand single product
 */
.storefront-wc-brands-single-product {
	margin: 0 0 ms(-3);

	img {
		max-height: ms(4);
	}
}

@include susy-media($desktop) {

	div#brands_a_z {

		ul.brands_index {

			@include span(3 of 12);
			transition: all 0.5s ease;
		}

		h3 {

			@include span(last 9 of 12);
			clear: right;
			text-transform: uppercase;

			&:first-of-type {
				margin-top: 0;
			}
		}

		a.top {
			clear: right;
		}

		ul.brands {

			@include span(last 9 of 12);
			clear: right;
		}
	}
}
