[class*="wd-swatches"].wd-bg-style-4 .wd-swatch.wd-bg {
	overflow: hidden;
}

[class*="wd-swatches"].wd-bg-style-4 .wd-swatch.wd-bg:after {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, .2);
	color: #fff;
	font-weight: 400;
	font-size: calc(var(--wd-swatch-text-size) - 4px);
	opacity: 0;
	transition: inherit;
	border-radius: inherit;
	content: "";
	font-family: "woodmart-font";
}

[class*="wd-swatches"].wd-bg-style-4 .wd-swatch.wd-bg:is(.wd-active, :hover:not(.wd-disabled)):after, [class*="wd-swatches"].wd-bg-style-4 :is(.wd-swatch-wrap a:hover, .wd-swatch-wrap.wd-active) .wd-swatch.wd-bg:after {
	opacity: 1;
}

[class*="wd-swatches"].wd-text-style-4 .wd-swatch.wd-text {
	border: 1px solid var(--wd-swatch-brd-color);
}

[class*="wd-swatches"].wd-text-style-4 .wd-swatch.wd-text .wd-swatch-text {
	font-size: calc(var(--wd-swatch-text-size) - 2px);
}

[class*="wd-swatches"].wd-text-style-4 .wd-swatch.wd-text:is(.wd-active, :hover:not(.wd-disabled)), [class*="wd-swatches"].wd-text-style-4 :is(.wd-swatch-wrap a:hover, .wd-swatch-wrap.wd-active) .wd-swatch.wd-text {
	border-color: var(--color-gray-900);
	background-color: var(--color-gray-900);
	color: var(--color-white);
}