[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,0.2);
        color: #fff;
        font-weight: 400;
        font-size: calc(var(--wd-swatch-text-size) - 4px);
        opacity: 0;
        transition: inherit;
        border-radius: inherit;
        content: "\f107";
        font-family: "Yekan"
    }

    [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)
    }