/*----------------- attr-edit-set -------------------*/ 
#attr-edit-set							{ 
	.attribute-title					{ font-weight:bold; margin:20px 0 5px; }
	li									{ margin:0; padding:0; list-style:none; }
	h3									{ margin:15px 0 0; padding:0; }
	.attributes							{ column-rule:1px outset #efefef; padding-bottom:15px; border-bottom:1px solid #e7e7e7; 
		&:last-child					{ border-bottom:none; padding-bottom:0; }
	}
}
@media screen and (min-width: 0px) and (max-width: 600px)
										{ 
	#attr-edit-set .attributes			{ column-count:1; }
}
@media screen and (min-width: 600px) and (max-width: 800px)
										{ 
	#attr-edit-set .attributes			{ column-count:2; }
}
@media screen and (min-width: 800px) and (max-width: 1000px)
										{ 
	#attr-edit-set .attributes			{ column-count:3; }
}
@media screen and (min-width: 1000px) and (max-width: 1200px)
										{ 
	#attr-edit-set .attributes			{ column-count:4; }
}
@media screen and (min-width: 1200px) and (max-width: 1400px)
										{ 
	#attr-edit-set .attributes			{ column-count:5; }
}
@media screen and (min-width: 1400px) and (max-width: 1600px)
										{ 
	#attr-edit-set .attributes			{ column-count:6; }
}
@media screen and (min-width: 1600px) and (max-width: 1800px)
										{ 
	#attr-edit-set .attributes			{ column-count:7; }
}
@media screen and (min-width: 1800px) and (max-width: 20000px)
										{ 
	#attr-edit-set .attributes			{ column-count:8; }
}

/*----------------- filters -------------------*/ 
.attr-filter							{ border:0; 
	/*----------------- ui-slider -------------------*/ 
	.ui-slider-horizontal				{ height:4px; }
	.ui-widget-content					{ border:none; background:none; background-color:#e3e3e3; }
	.ui-widget-header					{ border:none; background:#424242; color:#fff; }
	.ui-slider .ui-slider-handle		{ top:-7px; width:26px; height:16px; margin-left:0px; border-radius:3px; cursor:pointer; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); background-repeat:no-repeat; background-size:contain; background-position:center center; background-size:18px; box-shadow:0px 1px 0px #bbbbbb; 
		&:last-of-type					{ margin-left:-23px; }
	}
	.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default
										{ background-image:none; background:#C9C9C9; border:none; }
	/*----------------- Slider -------------------*/ 
	.attr-set .slider					{ margin-top:1.3em; 
		input							{ display:inline-block; width:50%; border:none; margin-top:10px; font-size:.8em; background:none; box-shadow:none; padding-left:0; padding-right:0; 
			&:last-child				{ text-align:right; }
		}
	}
	/*----------------- toggle open all & hide arrow* -------------------*/ 
	&.is-open							{ 
		.attr-set						{ display:block; }
		.attr-filter-set .attr-filter-set-button
										{ display:none; }
	}
}
.attr-filter-head						{ padding:0 0 5px; text-transform:uppercase; color:#777; font-weight:700; border-bottom:1px solid #e3e3e3; margin-bottom:1em; 
	&::before							{ content:'Filter by'; display:inline-block; }
}

/*----------------- attr-filter-set -------------------*/ 
.attr-filter-set						{ 
	.attr-filter-set-mobile-button, .attr-filter-set-button
										{ display:inline-block; margin-top:.2em; margin-right:0.2em; height:13px; width:13px; float:right; background-image:url(/modules/attribute/media/arrow_side.svg); background-repeat:no-repeat; background-size:contain; background-position:right; opacity:0.4; }
	.attr-filter-set-mobile-button		{ display:none; }
	.attr-filter-set-title				{ cursor:pointer; margin:10px 0 5px; padding:2px; color:#777; font-weight:700; clear:both; }
	&.is-open .attr-filter-set-button	{ background-image:url(/modules/attribute/media/arrow_down.svg); }
	.attr-set							{ display:none; }
	&.is-open .attr-set					{ display:block; padding-bottom:10px; }
	/*----------------- swatch -------------------*/ 
	&.is-swatch li						{ display:inline; float:left; margin:0; padding-right:5px; 
		a								{ display:inline-block; padding:0; width:26px; height:26px; margin-bottom:5px; cursor:pointer; 
			.checkbox					{ width:26px; height:26px; border:1px solid #888; }
		}
		.attr-label						{ display:none; }
		a.is-swatch						{ border:none; }
	}
}

/*----------------- attr-set -------------------*/ 
.attr-set li							{ list-style:none outside none; margin-left:0; 
	&.price								{ margin-right:20px; margin-left:10px; }
	a									{ color:inherit; cursor:pointer; 
		i								{ font-style:normal; font-size:0.8em; }
		.checkbox						{ position:relative; bottom:3px; width:15px; height:15px; background-color:#fcfcfc; border:1px solid #e3e3e3; display:inline-block; margin-right:5px; text-align:center; font-size:12px; color:#424242; vertical-align:middle; cursor:pointer; }
		&.checked .checkbox:before		{ content:"✓"; }
		&:hover							{ text-decoration:none; color:inherit; }
		&.checked						{ background-position:(-49px) -14px; 
			&.is-swatch .checkbox:before{ content:' '; background-image:url(/media/icons/tick_swatch.png); background-repeat:no-repeat; display:block; height:13px; background-position:top right; background-size:contain; }
		}
		&.nocheck						{ background:none; padding:1px 0 1px 1px; }
	}
}

/*----------------- attr-search -------------------*/ 
#attr-search							{ 
	#search_attr						{ width:100%; }
	button								{ width:16px; background-color:transparent; background-image:url(/modules/attribute/media/search.svg); background-repeat:no-repeat; background-position:center center; background-size:16px; }
}

/*----------------- attr-filter-selected-wrapper -------------------*/ 
.attr-filter-selected-wrapper			{ margin:5px 0; padding:0 15px; overflow:hidden; 
	.attr-filter-selected				{ display:inline-block; float:left; font-size:12px; margin-right:5px; margin-bottom:5px; padding:4px; padding-left:20px; background:#fff url('/media/icons/cross_black.svg') no-repeat 4px center/12px; border:1px solid #bbb; cursor:pointer; }
}

/*----------------- attr-dialog -------------------*/ 
#attr-dialog-close						{ display:none; }
#attr-dialog-close::before				{ content:'Done'; }
#attr-dialog-head						{ display:none; }
.attr-filter-mobile-action				{ display:none; }

/*----------------- mobile -------------------*/ 
@media screen and (max-width: 767px) {
	.attr-filter-wrapper				{ margin-bottom:15px; 
		.attr-filter					{ background:transparent; 
			.ui-slider .ui-slider-handle{ height:20px; width:30px; top:-9px; 
				&:last-of-type			{ margin-left:-27px; }
			}
		}
	}
	.attr-filter-set					{ 
		.attr-filter-set-mobile-button	{ display:inline-block; }
		.attr-set li.checked, &.is-selected .attr-set li.slider
										{ display:block; }
		.attr-filter-set-button			{ display:none; }
	}
	.attr-set .slider					{ margin-top:1.5em; }
	.attr-filter-selected-wrapper		{ margin:0 0 10px; padding:0; }
	.attr-filter-head, .attr-filter-subsets
										{ display:none; }
	.attr-filter-selected				{ background-color:#f1f2f1; }
	.attr-filter-mobile-action			{ display:flex;
		#attr-filter-mobile-button		{ flex:1; 
			&::before					{ content:'Filter'; display:block; padding:5px 20px; border:1px solid #c1c1c1;; text-align:center; cursor:pointer; }
		}
		.attr-filter-mobile-sort		{ flex:1; width:100%; margin-left:15px;
			select						{ width:100%; }
		}
	}
	.folder-options .row-sort-options	{ display:none;}

	
	/*----------------- attr-dialog -------------------*/ 
	.attr-dialog						{ 
		.attr-filter-mobile-action		{ display:none; }
		.attr-filter					{ position:fixed; top:0; left:0; right:0; height:100vh; z-index:1001; overflow-y:auto; background:#fff; padding:0 4%; }
		.attr-filter-head				{ display:block; background:transparent; margin:20px 0; padding:0; }
		#attr-dialog-close				{ display:block; float:right; }
		.attr-filter-subsets			{ display:block; 
			.attr-filter-set			{ display:block; 
				.attr-set				{ display:none; }
			}
		}
	}
	
	/*----------------- attr-dialog-set -------------------*/ 
	.attr-dialog-set					{ 
		.attr-filter-head::before		{ content:''; }
		.attr-dialog-head				{ cursor:pointer; 
			&::before					{ content:'< More filters'; }
		}
		.attr-filter-selected-wrapper	{ display:none; }
		.attr-filter-subsets			{ 
			.attr-filter-set			{ display:none; 
				&.is-mobile-open		{ display:block; 
					.attr-filter-set-mobile-button
										{ display:none; }
					.attr-set			{ display:block; }
				}
			}
		}
	}
}