@import (reference) "../../../styles/index.less";

@input-prefix: ~"@{renum-prefix}-input";

@input-padding-block: 0.375em;
@input-padding-inline: 0.75em;
@input-padding-icon: (1em + @input-padding-inline);

@input-height: (unit(@line-height, em) + (@input-padding-block * 2));

@input-border-radius: @border-radius-medium;
@input-border-radius-fix: @input-border-radius;

@input-icon-top: ((@input-height - 1em) * 0.5);

@input-shadow-focus: 0 0 0 @outline-width var(--primary-muted);

.input(@display: inline-block, @insert-width: true) {
	position: relative;
	display: @display;
	padding-block: @input-padding-block;
	padding-inline: @input-padding-inline;
	if(@insert-width, ~'width: 100%;')
	height: @input-height;
	background-color: var(--input-bg);
	border: @border-width-medium @border-style var(--input-border);
	border-radius: @input-border-radius;
	letter-spacing: inherit;
	font-feature-settings: inherit;
	color: var(--input-color);
	font-size: @font-size-medium;
	line-height: 1;
	outline: 0;
	transition: @transition-speed-fast @transition-easing;
	transition-property: color, background-color, border, box-shadow;
	z-index: 1;

	&:hover {
		border-color: var(--input-border-hover);
	}

	&:focus,
	&:active {
		border-color: var(--input-border-active);
		box-shadow: @input-shadow-focus;
	}

	&:is([disabled], :disabled) {
		&,
		&:hover,
		&:focus,
		&:active {
			color: var(--input-color-disabled);
			background-color: var(--input-bg-disabled);
			border-color: var(--input-border-disabled);
			box-shadow: none;
			cursor: not-allowed;
			opacity: 1;
		}
	}
}