.liquid-filter-items {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	margin-bottom: 1.5em;
	color: #16171e;
}
.liquid-filter-items-inner {
	display: inherit;
	flex-flow: inherit;
	align-items: inherit;
	justify-content: inherit;

	&:only-child {
		width: 100%;
	}
}
.liquid-filter-items-label {
	margin-bottom: 0;
	line-height: 1;

	&.size-xxl {
		font-size: 72px;
		letter-spacing: -0.025em;
	}
	&.size-xl {
		font-size: 55px;
		line-height: 1;
	}
	&.size-lg {
		font-size: 24px;
	}
	&.size-md {
		font-size: 18px;
	}

	+ .filter-list {

		li {
			margin-bottom: 0;
		}
	}
}
.filter-list {
	padding: 0;
	margin: 0 0 30px;
	list-style: none;
	font-size: 0.8125em;

	&.size-lg {
		font-size: 24px;
	}
	&.size-md {
		font-size: 18px;
	}
	&.size-sm {
		font-size: 12px;
	}

	li {
		margin-bottom: 0.5em;
		position: relative;
		color: #9ba1af;
		cursor: pointer;
		transition: color 0.3s;

		span {
			display: inline-block;
		}

		&.active,
		&:hover {
			color: #16171e;
		}
	}

	.liquid-filter-items-label + & {
		margin-left: 3.5em;
		margin-bottom: 0;
	}
}

.filter-list-inline {

	li {
		display: inline-block;
	}
}

.filter-list-scheme-light {

	li {
		color: rgba(#fff, 0.5);

		&.active,
		&:hover {
			color: #fff;
		}
	}

}

.filters-underline,
.filters-line-through {
		
	li {
		
		span {
			position: relative;
			
			&:after {
				content: '';
				height: em(1, 11);
				min-height: 1px;
				position: absolute;
				background-color: #16171e;
				transform-origin: right center;
				transition: transform 0.3s;
				transform: scaleX(0);
			}
		}
		
		&.active,
		&:hover {
			
			span {

				&:after {
					transform: scaleX(1);
					transform-origin: left center;				
				}
			}
		}
	}
}

.filters-line-through {

	li {

		span {

			&:after {
				width: 110%;
				top: 50%;
				left: -5%;
				margin-top: - em(0.5, 11);
			}
		}
	}
}

.filters-underline {

	li {

		span {

			&:after {
				bottom: - em(7, 12);
				left: 0;
				width: 100%;
				height: em(2, 12);
				min-height: 2px;
			}
		}
	}
}

.filter-list-style-1 {
	margin-top: 10px;
	margin-bottom: 70px;

	span {
		transition: transform 0.4s cubic-bezier(.4,1,.5,1);
	}
	li {
		margin-bottom: 2em;

		&:before {
			content: '';
			display: inline-block;
			width: 2px;
			height: 1.2em;
			position: absolute;
			top: 50%;
			left: 0;
			margin-top: -0.6em;
			background-image: linear-gradient(to bottom, var(--color-gradient-start) 0%, var(--color-gradient-stop) 100%);
			opacity: 0;
			transform: translateX(-5px);
			transition: transform 0.3s cubic-bezier(.4,1,.5,1), opacity 0.3s cubic-bezier(.4,1,.5,1);
		}

		&.active,
		&:hover {
			
			&:before {
				opacity: 1;
				transform: translateX(0);
				transition-delay: 0.05s;
			}
			span {
				transform: translateX(15px);
			}
		}
	}
}