.color-pickable {
	text-decoration-line: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

#codePanel.codeControl .color-pickable {
	cursor: pointer;
	/* outline: 1px solid var(--greyC) !important; */
	border-radius: 0px;
	background: var(--greyE);
	text-decoration-thickness: 3px;
}

#codePanel.codeControl .color-pickable:hover {
	background: var(--greyD);
}


.cm-color-swatch {
	width: 12px;
	height: 12px;
	border-radius: 2px;
	display: inline-block;
	margin-left: 4px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	cursor: pointer;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.cm-colorpicker-overlay {
	position: absolute;
	z-index: 5000;
	width: 280px;
	background: var(--grey2);
	color: #fff;
	border-radius: 15px;
	padding: 15px;
	box-shadow: 0 3px 10px #999;
	user-select: none;
	z-index: 1;
}

/* Arrow pointer for placement indication */
.cm-colorpicker-overlay::before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	left: var(--caret-offset, 20px);
}

.cm-colorpicker-overlay[data-placement="bottom"]::before {
	top: -8px;
	border-width: 0 8px 8px 8px;
	border-color: transparent transparent var(--grey2) transparent;
}

.cm-colorpicker-overlay[data-placement="top"]::before {
	bottom: -8px;
	border-width: 8px 8px 0 8px;
	border-color: var(--grey2) transparent transparent transparent;
}
.cm-colorpicker-overlay .colorpicker-mode-container {display: flex;flex-direction: column;gap: 15px;margin-bottom: 15px;}
.cm-colorpicker-overlay .formItem {
	margin-bottom: 5px;
}

.cm-colorpicker-overlay .mode-picker {
	margin-bottom: 12px;
}

.cm-colorpicker-overlay .hex-grid {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 10px;
	gap: 1px;
}

.cm-colorpicker-overlay .hex-row {
	display: flex;
	gap: 1px;
	margin-top: 1px;
	margin-bottom: -7px;
}


.cm-colorpicker-overlay .hex-cell {
	width: 19px;
	height: 22px;
	cursor: pointer;
	display: inline-block;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: none;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	margin: 0;
	padding: 0;
}

.cm-colorpicker-overlay .hex-cell:hover {
	outline: 10px solid !important;
	outline-color: rgba(255, 255, 255, 0.5) !important;
	outline-offset: -2px;
	border-radius: 15px;
}

.cm-colorpicker-overlay .hex-cell:checked {
	border-radius: 15px;
	border: 4px solid #fff;
}

.cm-colorpicker-overlay .preset-saturation {
	margin-bottom: 12px;
}

.cm-colorpicker-overlay .color-mode {
}

.cm-colorpicker-overlay .OPradio .btn-group {
	background: var(--grey3);
	box-shadow: 0 0 5px 0px var(--grey2);
	z-index: 1;
}

.cm-colorpicker-overlay .color-spectrum {
	position: relative;
	width: 100%;
	height: 230px;
	aspect-ratio: 1.2;
	border-radius: 8px;
	overflow: hidden;
	cursor: crosshair;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
	touch-action: none;
	will-change: background;
}

.cm-colorpicker-overlay .spectrum-cursor {
	position: absolute;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid #ffffff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.cm-colorpicker-overlay .color-slider {
	position: relative;
	height: 14px;
	border-radius: 999px;
	overflow: hidden;
	cursor: pointer;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
	touch-action: none;
}

.cm-colorpicker-overlay .color-slider .slider-gradient {
	position: absolute;
	inset: 0;
	pointer-events: none;
	will-change: background;
}

.cm-colorpicker-overlay .color-slider .slider-thumb {
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid #ffffff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.checker-bg {
	position: relative;
}
.checker-bg::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: 12px 12px;
	background-image: linear-gradient(45deg, #5a5a5a 25%, transparent 25%, transparent 75%, #5a5a5a 75%, #5a5a5a), linear-gradient(45deg, #5a5a5a 25%, transparent 25%, transparent 75%, #5a5a5a 75%, #5a5a5a);
	background-position: 0 0, 6px 6px;
	z-index: -1;
}

.cm-colorpicker-overlay .mode-controls {
	display: grid;
	gap: 8px;
	margin-bottom: 16px;
}

.cm-colorpicker-overlay .section-title {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}

.cm-colorpicker-overlay .results {
	background: rgba(0, 0, 0, 0.25);
	border-radius: 12px;
	padding: 8px 12px;
	display: grid;
	gap: 6px;
	font-size: 12px;
	letter-spacing: 0.01em;
}

.cm-colorpicker-overlay .results .label {
	opacity: 0.75;
	margin-right: 4px;
}

.cm-colorpicker-overlay .result-row {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

.cm-colorpicker-overlay .result-row span {
	font-variant-numeric: tabular-nums;
}

.cm-colorpicker-overlay .colorFormat {
	padding-top: 15px;
	border-top: 1px solid var(--grey4);
	margin-bottom: -15px;
}

/* Palettes Mode */
.cm-colorpicker-overlay .palettes-mode {
	margin-bottom: 0;
	max-height: 400px;
	/* overflow-y: auto; */
	min-height: 328px;
	margin-left: -15px;
	width: calc(100% + 30px);
	padding: 15px;
	margin-top: -25px;
	overflow: auto;
}

.cm-colorpicker-overlay .palette-section {
	margin-bottom: 15px;
}

.cm-colorpicker-overlay .palette-section:last-child {
	margin-bottom: 0;
}

.cm-colorpicker-overlay .palette-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0px;
}

.cm-colorpicker-overlay .btn-save-palette {
	padding: 4px 10px;
	font-size: 11px;
	background: var(--primary);
	color: white;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.2s;
}

.cm-colorpicker-overlay .btn-save-palette:hover {
	background: var(--primaryHover);
}

.cm-colorpicker-overlay .btn-save-palette:disabled {
	background: var(--grey4);
	cursor: not-allowed;
}

.cm-colorpicker-overlay .palette-colors {
	display: flex;
	flex-wrap: wrap;
	gap: 0px;
	border-radius: 10px;
	/* overflow: hidden; */
}

.cm-colorpicker-overlay .palette-color {
	width: 41px;
	aspect-ratio: 1;
	cursor: pointer;
	border-radius: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.cm-colorpicker-overlay .palette-color-preview {
	width: 100%;
	height: 100%;
	position: absolute;
}
.cm-colorpicker-overlay .palette-color:hover {
	outline: 1px solid var(--greyA) !important;
	z-index:2;
}

.cm-colorpicker-overlay .palette-color:hover .palette-color-preview {
	box-shadow: inset 0 0 0 3px var(--grey6);
}

.cm-colorpicker-overlay .palette-color.selected {
	box-shadow: inset 0 0 0 3px var(--black);
	outline: 1px solid var(--white) !important;
	z-index: 1;
}
.cm-colorpicker-overlay .palette-color.selected .palette-color-preview {
	box-shadow: inset 0 0 0 3px var(--black);
}

.cm-colorpicker-overlay .palette-empty {
	padding: 15px;
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
	background: rgba(0, 0, 0, 0.2);
	border-radius: 8px;
}

.cm-colorpicker-overlay .palette-loading {
	padding: 20px;
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
	font-size: 12px;
}

.cm-colorpicker-overlay .user-palettes {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cm-colorpicker-overlay .user-palette {
	position: relative;
}

.cm-colorpicker-overlay .palette-title-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}
.cm-colorpicker-overlay .user-palette:hover .palette-title {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	text-decoration-style: dotted;
}

.cm-colorpicker-overlay .palette-title {
	margin-bottom: 0px;
	display: inline-block;
	color: var(--red);
	height: auto;
	line-height: 1.4;
	max-width: 100%;
}

.cm-colorpicker-overlay .btn-delete-palette {
	width: 20px;
	height: 20px;
	padding: 0;
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.6);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, color 0.2s;
}

.cm-colorpicker-overlay .btn-delete-palette:hover {
	background: rgba(255, 0, 0, 0.6);
	color: white;
}

/* mobile adjustments */
@media (max-width: 768px) {
	.cm-colorpicker-overlay {
		/* position: fixed; */
		/* left: 15px !important; */
		/* width: calc(100% - 30px); */
	}

	.cm-colorpicker-overlay .palettes-mode {
		max-height: 250px;
	}

	.cm-colorpicker-overlay .palette-color {
		/* width: 28px; */
		/* height: 28px; */
	}
}

.cm-colorpicker-overlay .palette-title:hover {
	/* background-color: var(--grey3);
	cursor: pointer;
	box-shadow: inset 0 0 0 2px; */
}

.cm-colorpicker-overlay .user-palette[data-has-color="true"] .palette-color-new {
	display: none;
}

.cm-colorpicker-overlay .palette-color .icon {
	display: none;
	background-color: #333;
	border-radius: 50px;
	color: #333;
	width: 21px;
	height: 21px;
}

.cm-colorpicker-overlay .user-palettes.deleteMode .palette-color .icon {
	display: block;
}
.cm-colorpicker-overlay .user-palettes.deleteMode .palette-title {
	/* display: none; */
}

.cm-colorpicker-overlay .user-palettes.deleteMode .palette-color-new {
	transform: scale(0);
	/* opacity: 0; */
}

.cm-colorpicker-overlay .palette-color-new {
	transform: scale(0.8);
	transition: transform 100ms, opacity 100ms, border-radius 100ms;
	opacity: 0.7;
	border-radius: 21px;
	overflow: hidden;
}

.cm-colorpicker-overlay .palette-color-new:hover {
	transform: scale(1);
	box-shadow: none;
	opacity: 1;
	border-radius: 0;
}

.cm-colorpicker-overlay .palette-color-new .icon {
	display: block;
}