.wc-block-active-filters {
	margin: 0 0 $gap;
	overflow: hidden;

	.wc-block-active-filters__clear-all {
		float: right;
		background: transparent none;
		border: none;
		padding: 0;
		text-decoration: underline;
		cursor: pointer;
		font-size: 1em;

		&:hover {
			background: transparent none;
		}
	}
	.wc-block-active-filters-list {
		margin: 0 0 $gap-smallest;
		list-style: none outside;
		clear: both;

		li {
			margin: 0 0 $gap-smallest;
			padding: 0 16px 0 0;
			list-style: none outside;
			clear: both;
			position: relative;
		}

		button {
			background: transparent;
			border: 0;
			appearance: none;
			height: 0;
			padding: 16px 0 0 0;
			width: 16px;
			overflow: hidden;
			position: absolute;
			right: 0;
			top: 50%;
			margin: -8px 0 0 0;

			&::before {
				width: 16px;
				height: 16px;
				background: transparent url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='9' r='9' fill='%2324292d'/%3E%3Crect x='4.5' y='6.8866' width='3.375' height='9.9466' transform='rotate(-45 4.5 6.8866)' fill='white'/%3E%3Crect x='11.5334' y='4.5' width='3.375' height='9.9466' transform='rotate(45 11.5334 4.5)' fill='white'/%3E%3C/svg%3E%0A") center center no-repeat; /* stylelint-disable-line */
				display: block;
				content: "";
				position: absolute;
				top: 0;
			}
		}

		&.wc-block-active-filters-list--chips {
			li {
				display: inline-block;
				background: #c4c4c4;
				border-radius: 4px;
				padding: 4px 8px;
				margin: 0 6px 6px 0;
				color: #24292d;

				.wc-block-active-filters-list-item__type {
					display: none;
				}
			}
			button {
				float: none;
				vertical-align: middle;
				margin: -2px 0 0 9px;
				height: 0;
				padding: 12px 0 0 0;
				width: 12px;
				overflow: hidden;
				position: relative;

				&::before {
					width: 12px;
					height: 12px;
					background: transparent url("data:image/svg+xml,%3Csvg width='12' viewBox='0 0 9 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='7.03329' width='2' height='9.9466' transform='rotate(45 7.03329 0)' fill='%2324292d'/%3E%3Crect x='8.4476' y='7.07104' width='2' height='9.9466' transform='rotate(135 8.4476 7.07104)' fill='%2324292d'/%3E%3C/svg%3E%0A") center center no-repeat; /* stylelint-disable-line */
					display: block;
					content: "";
					position: absolute;
					top: 0;
				}
			}
		}
	}
}
