.product-colour-picker__dot,
.part-colour__dot,
.part-colour__bar,
.catalogue-colour-swatch__dot {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: rgb(var(--swatch-rgb, 222, 226, 233));
    box-shadow: inset 0 0 0 1px #00000018;
}

.product-colour-picker__dot,
.catalogue-colour-swatch__dot {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.product-colour-picker__swatch.is-transparent .product-colour-picker__dot,
.part-colour.is-transparent .part-colour__dot,
.part-colour.is-transparent .part-colour__bar,
.filter-color__swatch.is-transparent .catalogue-colour-swatch__dot {
    background-image:
        linear-gradient(rgba(var(--swatch-rgb, 222, 226, 233), .3), rgba(var(--swatch-rgb, 222, 226, 233), .3)),
        conic-gradient(#e5e7eb 25%, #fafbfc 0 50%, #e5e7eb 0 75%, #fafbfc 0);
    background-size: auto, 10px 10px;
}

.product-colour-picker__swatch.is-unavailable .product-colour-picker__dot,
.part-colour.is-unavailable .part-colour__dot,
.part-colour.is-unavailable .part-colour__bar,
.filter-color__swatch.is-unavailable .catalogue-colour-swatch__dot {
    background-color: #f8fafc;
    background-image: repeating-linear-gradient(135deg, #d1d5dc 0 5px, #f8fafc 5px 10px);
}

.product-colour-picker__dot::after,
.part-colour__dot::after,
.part-colour__bar::after,
.catalogue-colour-swatch__dot::after {
    position: absolute;
    inset: 0;
    background-image: var(--swatch-texture, none), var(--swatch-sheen, none);
    background-size: var(--swatch-texture-size, auto), auto;
    content: "";
    pointer-events: none;
}

.product-colour-picker__swatch.is-pearl,
.part-colour.is-pearl,
.filter-color__swatch.is-pearl {
    --swatch-sheen: linear-gradient(135deg, #ffffff70, transparent 48%, #ffffff38 70%, transparent);
}

.product-colour-picker__swatch.is-metallic,
.part-colour.is-metallic,
.filter-color__swatch.is-metallic {
    --swatch-sheen: linear-gradient(135deg, #ffffff80, transparent 30%, #ffffffa6 50%, #00000045 75%, transparent);
}

.product-colour-picker__swatch.is-chrome,
.part-colour.is-chrome,
.filter-color__swatch.is-chrome {
    --swatch-sheen: linear-gradient(135deg, #ffffffb8, #00000060 27%, #ffffffdc 43%, #ffffff10 48%, #00000080 60%, #ffffffa0 82%, transparent);
}

.product-colour-picker__swatch.is-satin,
.part-colour.is-satin,
.filter-color__swatch.is-satin {
    --swatch-sheen: linear-gradient(135deg, #ffffffa0, #d3eaff45 28%, #f5d9ff65 52%, #ffffff80 72%, transparent);
}

.product-colour-picker__swatch.is-glitter,
.part-colour.is-glitter,
.filter-color__swatch.is-glitter {
    --swatch-texture: radial-gradient(circle at 2px 2px, #ffffffe0 0 .65px, transparent 1px);
    --swatch-texture-size: 5px 5px;
}

.product-colour-picker__swatch.is-speckle,
.part-colour.is-speckle,
.filter-color__swatch.is-speckle {
    --swatch-texture: radial-gradient(ellipse at 2px 3px, #f5f5eed0 0 1px, #00000030 1.1px 1.4px, transparent 1.5px);
    --swatch-texture-size: 7px 6px;
}