/*
 * Overlay styles for locked ACF fields (ACF Permissions).
 */

.acf-field.wrk-acfp-locked {
	position: relative;
}

.acf-field.wrk-acfp-locked > .acf-input,
.acf-field.wrk-acfp-locked > .acf-label {
	opacity: 0.82;
}

.acf-field.wrk-acfp-locked .wrk-acfp-overlay {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	background: repeating-linear-gradient(
		135deg,
		rgba(127, 127, 127, 0.06),
		rgba(127, 127, 127, 0.06) 10px,
		rgba(127, 127, 127, 0.12) 10px,
		rgba(127, 127, 127, 0.12) 20px
	);
	border: 1px dashed rgba(160, 160, 160, 0.55);
	border-radius: 3px;
	cursor: not-allowed;
	pointer-events: auto;
}

.acf-field.wrk-acfp-locked .wrk-acfp-overlay__inner {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 3px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
	color: #1d2327;
	font-size: 12px;
	line-height: 1.4;
	max-width: 90%;
}

.acf-field.wrk-acfp-locked .wrk-acfp-overlay__icon {
	font-size: 14px;
	line-height: 1;
}

/* Block pointer events on the actual inputs so nothing can be typed / clicked. */
.acf-field.wrk-acfp-locked > .acf-input * {
	pointer-events: none;
}

/* But let the overlay itself receive events (for hover / focus rings). */
.acf-field.wrk-acfp-locked .wrk-acfp-overlay,
.acf-field.wrk-acfp-locked .wrk-acfp-overlay * {
	pointer-events: auto;
}

/* Subtle hue by mode. */
.acf-field.wrk-acfp-mode-read_only .wrk-acfp-overlay {
	border-color: rgba(214, 54, 56, 0.45);
}
.acf-field.wrk-acfp-mode-edit_if_empty .wrk-acfp-overlay,
.acf-field.wrk-acfp-mode-edit_if_set .wrk-acfp-overlay {
	border-color: rgba(240, 184, 73, 0.6);
}

.wrk-acfp-lock-hint--allowed {
	color: #1e4620;
	background: #edfaef;
	border-color: #9dd2a3;
}

.wrk-acfp-lock-hint--bypass {
	color: #614200;
	background: #fff8e5;
	border-color: #e6c76a;
}