@import "products-filter-items";
@import "products-filter-sidebar";

.catalog-toolbar-filters__v2 {
	.catalog-filters-content {
		display: flex;
		flex-wrap: wrap;
	}
	
	.widget:not(.products-filter-widget) {
		width: calc(100% / 5);
		position: relative;
		padding: 0;
		margin: 0;
		border: none;
		
		.widget-title {
			padding: 15px 20px;
			border: 1px solid var(--rz-border-color-light);
			border-right-width: 0;
			font-size: 16px;
			text-transform: none;
			font-weight: 500;
			cursor: pointer;
			position: relative;
			white-space: nowrap;
			margin: -1px 0 0;
			overflow: hidden;
			text-overflow: ellipsis;
			
			&.rz-active {
				.razzi-svg-icon {
					transform: rotate(180deg) translateY(50%);
				}
			}
			
			.razzi-svg-icon {
				font-size: 11px;
				margin-left: 15px;
				position: absolute;
				right: 20px;
				top: 50%;
				transform: translateY(-50%);
			}
			
		}
		
		.widget-content {
			border: 1px solid var(--rz-border-color-light);
			position: absolute;
			left: 0;
			top: calc(100% - 1px);
			background-color: #fff;
			width: 280px;
			height: auto;
			z-index: 99;
			padding: 20px;
			display: none;
		}
		
		&:last-child {
			.widget-title {
				border-right-width: 1px;
			}
		}
	}
	
	.widget_price_filter {
		width: 100% !important;
	}
	
	.products-filter-widget {
		border: none;
		padding: 0;
		margin: 0;
		width: 100%;
		.widget-title {
			display: none;
		}
		
		.widget-content {
			display: block !important;
		}
		
		.products-filter__activated {
			margin-bottom: 13px;
		}
		
	}
	
	.products-filter__filters {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.products-filter__filter {
		width: calc(100% / 5);
		position: relative;
		margin-top: -1px;
		
		&:first-child,
		&:nth-child(5n + 1) {
			.products-filter__filter-name {
				border-left-width: 1px;
			}
		}
		
		&:last-child,
		&:nth-child(5n) {
			.products-filter__filter-control {
				right: 0;
				left: auto;
			}
		}
		
		.products-filter__control-buttons {
			position: relative;
			border: none;
			
			&:before {
				left: -20px;
				right: -20px;
			}
		}
	}
	
	.products-filter__filter-name {
		padding: 15px 20px;
		border: 1px solid var(--rz-border-color-light);
		border-left-width: 0;
		font-size: 16px;
		text-transform: none;
		font-weight: 500;
		cursor: pointer;
		position: relative;
		white-space: nowrap;
		margin: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		
	}
	
	.products-filter__filter-control {
		border-width: 1px;
		border-style: solid;
		border-color: var(--rz-border-color-light);
		position: absolute;
		left: 0;
		top: calc(100% - 1px);
		background-color: #fff;
		width: 280px;
		height: auto;
		z-index: 99;
		padding: 20px;
		display: none;
	}
	
	.products-filter__filters-buttons {
		justify-content: flex-start;
		margin-top: 30px;
		.button {
			min-width: 120px;
		}
	}
	
	.products-filter__filter-name.rz-active:after,
	.widget-title.rz-active .razzi-svg-icon {
		transform: rotate(180deg);
	}
}

.full-content {
	.catalog-toolbar-filters__v2 {
		.widget:not(.products-filter-widget) {
			width: calc(100% / 7);
		}
		
		.products-filter__filter {
			width: calc(100% / 7);
			
			&:nth-child(5n + 1) {
				.products-filter__filter-name {
					border-left-width: 0;
				}
			}
			
			&:nth-child(7n + 1) {
				.products-filter__filter-name {
					border-left-width: 1px;
				}
			}
			
			&:nth-child(7n) {
				.products-filter__filter-control {
					right: 0;
					left: auto;
				}
			}
		}
	}
}

.catalog-toolbar-filters__v3 {
	animation: fadein 1s;
	opacity: 0;
	display: none;
	
	&.open {
		opacity: 1;
	}
	
	.catalog-filters-content {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -15px;
	}
	
	.widget {
		border: none;
		width: 20%;
		padding: 0 15px;
		margin: 0 0 30px;
		
		.widget-title {
			display: block;
			font-size: 18px;
			font-weight: 500;
			color: var(--rz-color-dark);
			margin: 0;
			line-height: 1;
			text-transform: none;
			border-bottom: none;
			padding-bottom: 25px;
			
			.razzi-svg-icon {
				display: none;
			}
		}
	}
	
	.products-filter-widget {
		width: 100%;
		margin-bottom: 0;
		
		&:first-child {
			margin-top: 0;
		}
		
		.widget-title {
			display: none;
		}
		
		.widget {
			margin: 0;
			width: 100%;
			padding: 0;
		}
		
		.widget_price_filter .price_slider {
			margin-top: 15px;
		}
		
		.filter-header .razzi-svg-icon {
			display: none;
		}
	}
	
	.products-filter__filters {
		display: flex;
		flex-wrap: wrap;
		margin-left: -15px;
		margin-right: -15px;
	}
	
	.products-filter__filter {
		width: 20%;
		margin-bottom: 30px;
		position: relative;
		padding: 0 15px;
	}
	
	.products-filter__filter-name {
		border: none;
		padding-bottom: 0;
		
		&:after {
			display: none;
		}
	}
	
	.products-filter__option:not(.swatch) {
		&:first-child {
			padding-top: 0;
		}
		
		&:last-child {
			padding-bottom: 0;
		}
	}
	
	.products-filter--swatches {
		margin: -7.5px -7.5px 0 -7.5px;
		
		.products-filter__option {
			margin: 7.5px;
		}
		
		.swatch-color {
			font-size: 0;
			padding: 0;
			
			.bg-color {
				margin-right: 0;
				width: 28px;
				height: 28px;
				
				&:before {
					top: 7px;
					left: 11px;
				}
			}
		}
	}
	
	.filter.filter_color {
		.filter-swatches {
			display: flex;
			flex-wrap: wrap;
		}
	}
	
	.products-filter__control-buttons .button {
		padding: 0 15px;
	}
	
	.products-filter__filters-buttons {
		justify-content: flex-start;
		.button {
			min-width: 120px;
		}
	}
	
	.products-filter__filter .products-filter__control-buttons:before {
		left: 0;
		right: 0;
	}
}