/* The controls (Metronic's kt-input): the chrome's own skin over wp-admin's, which these selectors outweigh. */
.rooster-admin-settings .rooster-admin-input,
.rooster-admin-settings .rooster-admin-textarea,
.rooster-admin-settings select,
.rooster-admin-settings input[type="text"].rooster-admin-color {
	@apply min-h-8 w-full max-w-[40rem] rounded-md border border-control bg-background px-2.5 py-1 text-sm text-foreground shadow-none;
}

.rooster-admin-settings .rooster-admin-input--short {
	@apply max-w-40;
}

.rooster-admin-settings input[type="text"].rooster-admin-color {
	@apply w-40;
}

.rooster-admin-settings .rooster-admin-input:focus,
.rooster-admin-settings .rooster-admin-textarea:focus,
.rooster-admin-settings select:focus {
	@apply border-accent shadow-(--ra-shadow-focus);
	outline: 0;
}

/* A colour field the chrome's script makes core's picker (chrome.js, wpColorPicker) is a 32 px button, as tall as the
   field it replaces, without core's 6 px under it (0.86.1, admin only: the rows below moved 6 px when the script ran; the picker's
   panel keeps its own 6 px above it). */
.rooster-admin-has-chrome .wp-picker-container .wp-color-result.button {
	@apply mb-0;
}