.picker-canvas {
	cursor: crosshair;
}

.hue-canvas {
	cursor: ns-resize;
}

.picker-pointer,
.hue-pointer {
	position: absolute;
	pointer-events: none;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.picker-pointer {
	width: 14px;
	height: 14px;
	box-shadow: 0 0 0 1.5px black, inset 0 0 0 1.5px white;
}

.hue-pointer {
	width: 100%;
	height: 4px;
	border-radius: 0;
	box-shadow: 0 0 0 1.5px black, inset 0 0 0 1.5px white;
	transform: translateY(-50%);
}

.aspect-square {
	aspect-ratio: 1 / 1;
}

.palette-add {
	cursor: pointer;
}

.lock-toggle {
	fill: #9CA3AF;
	transition: transform 0.2s ease-in-out;
}
.is-locked .lock-toggle {
	fill: #4B5563;
}
.lock-toggle:hover {
	transform: scale(1.2);
}