.tm-product-filter {
	text-align: center;
	width: 100%;
}

.tm-product-filter__filter {
	+ .tm-product-filter__filter {
		margin-top: 15px;
	}
}

.tm-product-filter__select,
.tm-product-filter__text {
	.term-link {
		margin: 0 6px 6px 0;
		vertical-align: top;
	}

	.term-link {
		color: var(--minimog-color-text);
		border: 1px solid #f5f5f5;
		border-radius: 2px;
		background: #f5f5f5;
		font-weight: $body-font-weight-medium;
		line-height: 22px;
		padding: 2px 9px;
		user-select: none;
	}

	.term-name {
		font-size: .94em;
	}

	.term-link.selected {
		border-color: $primary-color;
		color: $primary-color;
	}
}

.tm-product-filter__color,
.tm-product-filter__image {
	.term-shape {
		position: relative;
		width: 38px;
		height: 38px;
		display: block;
		border-radius: 50%;
	}

	.term-shape-border {
		@extend %NormalTransition;
		--size: 28px;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: var(--size);
		height: var(--size);
		border-radius: 50%;
		border: 1px solid #e3e3e3;
	}

	.term-shape-bg {
		@extend %NormalTransition;
		--size: 26px;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: var(--size);
		height: var(--size);
		border-radius: 50%;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.term-name {
		display: none;
	}

	.term-link.selected {
		.term-shape-border {
			--size: 100% !important;
			border: 1px solid #696969;
		}

		.term-shape-bg {
			--size: 28px;
		}
	}
}

.tm-product-filter__button {
	margin-top: 52px;
}
