/**
 * WP PowerSuite – shared color field row (circle picker + hex + reset).
 *
 * @package WP_PowerSuite\Admin\Assets
 */

.wpps-color-field-row {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: nowrap;
}

.wpps-color-picker-circle {
	width: 40px !important;
	height: 40px !important;
	min-width: 40px;
	min-height: 40px;
	flex-shrink: 0;
	border-radius: 50% !important;
	border: 2px solid #c3c4c7 !important;
	padding: 0 !important;
	cursor: pointer;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	overflow: hidden;
	background: transparent;
}

.wpps-color-picker-circle::-webkit-color-swatch-wrapper {
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 50% !important;
}

.wpps-color-picker-circle::-webkit-color-swatch {
	border: none !important;
	border-radius: 50% !important;
	width: 100% !important;
	height: 100% !important;
}

.wpps-color-picker-circle::-moz-color-swatch {
	border: none !important;
	border-radius: 50% !important;
	width: 100% !important;
	height: 100% !important;
}

.wpps-color-code-wrap {
	display: inline-block;
	position: relative;
	margin: 0;
	flex-shrink: 0;
}

.wpps-color-code-wrap .wpps-color-code-input {
	width: 100px;
	padding-right: 25px;
	font-family: Consolas, Monaco, monospace;
	text-transform: uppercase;
}

.wpps-color-code-wrap .wpps-color-reset {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	cursor: pointer;
	color: #646970;
}

.wpps-color-code-wrap .wpps-color-reset:hover {
	color: var(--wpps-accent, var(--wp-admin-theme-color, #2271b1));
}

.wpps-color-code-wrap .wpps-color-reset .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.wpps-color-field-row__label {
	min-width: 4.5rem;
	font-size: 12px;
	font-weight: 600;
	color: #1d2327;
}
