/* 
================================
Colour Swatch Mappings 
================================
*/


.colour-swatch-link {
    display: inline-block;
    margin-right: 18px;
}

.colour-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
		display: inline-block;
	  flex: none;
	  outline: 1px solid #6E7F89;
}

.colour-swatch[data-colour="White"] {
    background-image: url('/wp-content/plugins/sm_wordpress_plugin/assets/img/white.webp');
}

.colour-swatch[data-colour="Stainless Steel"] {
    background-image: url('/wp-content/plugins/sm_wordpress_plugin/assets/img/stainless_steel.webp');
}

.colour-swatch[data-colour="Granite"] {
    background-image: url('/wp-content/plugins/sm_wordpress_plugin/assets/img/granite.webp');
}

.colour-swatch[data-colour="Black Steel"] { 
	background-image: url('/wp-content/plugins/sm_wordpress_plugin/assets/img/black_steel.webp');
}

.colour-swatch[data-colour="Turquoise"] { 
	background-image: url('/wp-content/plugins/sm_wordpress_plugin/assets/img/aqua.webp');
}

.colour-swatch[data-colour="Black"] {
	background-image: url('/wp-content/plugins/sm_wordpress_plugin/assets/img/black.webp');
}

.colour-swatch[data-colour="Red"] { 
	background-image: url('/wp-content/plugins/sm_wordpress_plugin/assets/img/red.webp');
}

.colour-swatch[data-colour="Panel Ready"] { 
	background-image: url('/wp-content/plugins/sm_wordpress_plugin/assets/img/panel_ready.webp');
}

.colour-swatch-link.is-active .colour-swatch {
    outline: 2px solid var(--e-global-color-secondary);
}