/**
 * Color Picker Field - Editor Styles
 */

.giraforms-color-picker-field .giraforms-color-picker-wrapper {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.giraforms-color-picker-field .giraforms-color-preview {
	position: relative;
	width: 50px;
	height: 50px;
	border-radius: 4px;
	border: 2px solid #ddd;
	overflow: hidden;
}

.giraforms-color-picker-field .giraforms-color-preview input[type="color"] {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.giraforms-color-picker-field .giraforms-color-hex-input {
	flex: 1;
	max-width: 150px;
	font-family: monospace;
	text-transform: uppercase;
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
}