/* Kuma NetSuite Integration - colour swatches */
.knet-blocked-color-swatches {
	display: flex;
	flex-wrap: wrap;
}

.knet-blocked-color-swatches .swatchly-swatch {
	border: none;
	padding: 0;
}

.knet-blocked-color-swatch.selected img,
.knet-blocked-color-swatch.selected .knet-blocked-color-box {
	outline: 2px solid #222;
	outline-offset: 2px;
}

.knet-blocked-color-swatch {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

.knet-blocked-color-swatch::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(5px);
	background: #111;
	color: #fff;
	font-size: 12px;
	line-height: 1;
	padding: 7px 10px;
	border-radius: 4px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: all .2s ease;
	z-index: 9999;
	pointer-events: none;
}

.knet-blocked-color-swatch::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 5px;
	border-style: solid;
	border-color: #111 transparent transparent transparent;
	margin-bottom: -2px;
	opacity: 0;
	visibility: hidden;
	transition: all .2s ease;
	z-index: 9999;
}

.knet-blocked-color-swatch:hover::after,
.knet-blocked-color-swatch:hover::before {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.knet-blocked-color-swatch img,
.knet-blocked-color-box {
	transition: all .2s ease;
}

.knet-blocked-color-swatch:hover img,
.knet-blocked-color-swatch:hover .knet-blocked-color-box {
	transform: scale(1.08);
}

.swatchly-swatch.swatchly-disabled {
	pointer-events: all !important;
}

.knet-swatch-img {
	width: 35px;
	height: 35px;
	border-radius: 5px;
	margin: 5px;
	cursor: pointer;
}

.knet-blocked-color-box {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	margin: 5px;
	display: inline-block;
	cursor: pointer;
}