@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;
@use "../utils/theme-variables" as *;

.components-text-control__input,
.components-text-control__input[type="text"],
.components-text-control__input[type="tel"],
.components-text-control__input[type="time"],
.components-text-control__input[type="url"],
.components-text-control__input[type="week"],
.components-text-control__input[type="password"],
.components-text-control__input[type="color"],
.components-text-control__input[type="date"],
.components-text-control__input[type="datetime"],
.components-text-control__input[type="datetime-local"],
.components-text-control__input[type="email"],
.components-text-control__input[type="month"],
.components-text-control__input[type="number"] {
	width: 100%;
	height: $grid-unit-40;
	// Override input style margin in WP forms.css.
	margin: 0;
	background: $components-color-background;
	color: $components-color-foreground;
	@include input-control( $components-color-accent );
	border-color: $components-color-border;

	&::placeholder {
		color: $components-color-dark-gray-placeholder;
	}

	&.is-next-40px-default-size {
		height: $grid-unit-50;

		// Subtract 1px to account for the border, which isn't included on the element
		// on newer components like InputControl, SelectControl, etc.
		// These values should be shared with the `controlPaddingX` in ./utils/config-values.js
		padding-left: $grid-unit-15;
		padding-right: $grid-unit-15;
	}
}

.components-text-control__input[type="email"],
.components-text-control__input[type="url"] {
	/* rtl:ignore */
	direction: ltr;
}