/*
 * Four-side box input: number fields for top/right/bottom/left plus a link
 * toggle that mirrors one value across all four.
 *
 * Grid-based, not the previous flex + percentage-width layout. That old
 * layout sized the 4 fields + button at 25% + 25% + 25% + 25% + 20% = 120%
 * and relied on flex-shrink to squeeze it back to 100%. The current
 * WordPress core NumberControl reserves 12px of padding per side
 * internally; combined with that squeeze (and each field's default
 * `min-width: auto` refusing to shrink below its own content size), two-digit
 * values were clipping against their own padding.
 *
 * Grid tracks give each field its exact width outright, with no shrink math
 * to fight - `min-width: 0` on the grid items is what actually stops the
 * field's intrinsic content size from overriding the track, which is the
 * direct fix for the clipping.
 */

.atlb_input__controls {
	display: grid;
	grid-template-columns: repeat(4, 1fr) 32px;
	column-gap: 6px;
	margin-bottom: 24px;

	.components-input-control {
		min-width: 0;
		width: auto;
	}

	.components-input-control__container {
		border-radius: 3px !important;
	}

	.components-input-control__input {
		text-align: center !important;
		padding-left: 4px !important;
		padding-right: 4px !important;
	}

	.components-input-control__label {
		display: block;
		margin-top: 4px;
		padding-top: 0 !important;
		font-size: 11px !important;
		font-weight: 400 !important;
		color: #757575 !important;
		text-align: center;
		text-transform: capitalize !important;
	}

	/*
	 * Link toggle. Height is pinned to the number input's own rendered
	 * height (measured at 40px against the current core NumberControl) so
	 * the two sit flush - `align-self: start` keeps it from stretching down
	 * through the label row below the input.
	 */
	.atlb__linked_settings {
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: start;
		width: 32px;
		height: 40px;
		padding: 0;
		background: #fff;
		border: 1px solid #757575;
		border-radius: 3px;
		cursor: pointer;
		transition: background 0.1s ease, border-color 0.1s ease;

		svg {
			width: 16px;
			height: 16px;
		}
	}

	.atlb__linked_settings:hover {
		border-color: #406343;
	}

	.atlb__linked_settings.active {
		background: #406343;
		border-color: #406343;
		color: #fff;
	}
}

.atlb__devices_inputs {
	button.atlb__device.active {
		color: #406343;
		font-size: 11px;
		font-weight: 600;
	}
}