.inputWrapper {
	background-color: var(--color-neutral-canvas-default-bg);
	border-radius: var(--component-radii-md);
	border: var(--component-border-width-md) solid var(--stroke-subtle);
	color: var(--color-neutral-canvas-default-fg-default);
	display: flex;
}

.input {
	background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
	background: initial;
	color: inherit;
	border: none;
	font: var(--font-body-sm-default);
	padding: var(--component-spacing-sm) var(--component-spacing-md);
	flex-grow: 1;
	width: 100%;
}

.input:focus {
		outline: none;
	}

.input::-webkit-outer-spin-button,
	.input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

.input[type='number'] {
		-moz-appearance: textfield;
	}

.size-small {
		gap: var(--component-spacing-2xs);
		font: var(--font-body-sm-default);
		height: var(--size-control-small);
	}

.size-small .input {
			padding: var(--component-spacing-sm);
		}

.size-medium {
		gap: var(--component-spacing-xs);
		font: var(--font-body-sm-default);
		height: var(--size-control-medium);
	}

.size-medium .input {
			padding: var(--component-spacing-md);
		}

.size-large {
		gap: var(--component-spacing-sm);
		font: var(--font-body-sm-default);
		height: var(--size-control-large);
	}

.size-large .input {
			padding: var(--component-spacing-lg);
		}

.leadingVisual {
	color: var(--fg-subtle);
	align-self: center;
	pointer-events: none;
	display: flex;
	justify-content: center;
	flex-shrink: 0;
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	position: absolute;
	left: var(--component-spacing-sm);
	top: 50%;
	transform: translateY(-50%);
}

.input.inputWithLeadingVisual {
	padding-left: calc(var(--size-100) + var(--component-spacing-md));
}

.trailingVisual {
	color: var(--color-neutral-surface-minimal-idle-fg-default);
	align-self: center;
	display: flex;
	justify-content: center;
	padding-right: var(--component-spacing-xs);
}