.ghostkit-component-input-group-wrapper {
	display: flex;

	// Place items in a row.
	> div + div {
		margin-left: -1px;
	}

	> div:focus-within {
		z-index: 1;
	}

	> div:first-of-type input {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	> div:first-of-type ~ div:not(:last-of-type) input {
		border-radius: 0;
	}

	> div:last-of-type input {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}

	// Better help styles.
	.components-base-control__help {
		margin-top: 0;
		font-size: 9px;
		font-weight: 500;
		text-align: center;
		text-transform: uppercase;
		opacity: 0.7;
	}

	// When input expanded, hide help text and make input transparent for siblings.
	&:has(.ghostkit-component-input-drag-expand) > div:not(:has(.ghostkit-component-input-drag-expand)) {
		.components-base-control__help {
			font-size: 0;

			&::first-letter {
				font-size: 9px;
			}
		}
		input {
			color: transparent;
			padding-left: 2px;
			padding-right: 2px;
		}
	}

	> div {
		position: relative;
		width: 100%;
		transition: width 0.2s ease;

		input {
			text-align: center;
			transition: padding 0.2s ease;
		}

		// Expand width when input focused.
		&:has(.ghostkit-component-input-drag-expand) {
			width: 1000%;
		}

		// Important toggle.
		.ghostkit-control-important-toggle {
			position: absolute;
			top: 10px;
			right: 2px;
			opacity: 0;
		}

		&:hover .ghostkit-control-important-toggle,
		&:has(input:focus) .ghostkit-control-important-toggle,
		.ghostkit-control-important-toggle:focus,
		.ghostkit-control-important-toggle.is-active {
			opacity: 1;
		}
	}
}