/*! ColorKit tools: shared control sizing (css/ck-tools.css). Loaded on every tool page as a dependency of
 *  Coloris. One control height for fields, selects and buttons, so anything sitting in a row lines up.
 *  Tool templates can still opt into a different height by setting --ck-control-h on a container. */
.tool {
	--ck-control-h: 44px;
}
.tool .button,
.tool .gb-button {
	min-height: var(--ck-control-h);
	padding-top: 0;
	padding-bottom: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	box-sizing: border-box;
	line-height: 1;
	vertical-align: middle;
}
.tool select,
.tool input[type="text"],
.tool input[type="number"]:not(.ck-stepper-input) {
	height: var(--ck-control-h);
	box-sizing: border-box;
}
/* icon-only buttons are squares of the same size */
.tool .button.ck-icon {
	width: var(--ck-control-h);
	min-width: var(--ck-control-h);
	height: var(--ck-control-h);
	padding-left: 0;
	padding-right: 0;
}
/* the - 5 + stepper pill matches the row height too */
.tool .ck-stepper {
	min-height: var(--ck-control-h);
	box-sizing: border-box;
}
.tool .button.mini {
	--ck-control-h: 32px;
}
/* Tailwind colors (.ck-tw, not a .tool): its action buttons join the 44px row of the color field */
.ck-tw .ck-tw-actions .button {
	height: 44px;
	min-height: 44px;
	box-sizing: border-box;
}
.ck-tw .ck-tw-actions .button.ck-icon {
	width: 44px;
	min-width: 44px;
	padding: 0;
}