/* Normalize */
.ui-system-input-value {
	outline: none;
}
/* Normalize end */


/* Common */
.ui-system-input {
	--padding-horizontal: var(--ui-space-inline-sm);
	--inline-label-margin: var(--ui-space-inline-xs);
	--border-color: var(--ui-color-base-5);
	--border-color-active: var(--ui-color-accent-main-link);
}


/* Size */
.ui-system-input {
	--padding-vertical: 4px;
	--min-height: 38px;
	--font-size: var(--ui-font-size-lg);
	--label-font-size: var(--ui-font-size-sm);
	--label-line-height: var(--ui-font-line-height-2xs);
}

.ui-system-input.--m {
	--min-height: 34px;
	--font-size: var(--ui-font-size-md);
}

.ui-system-input.--s {
	--min-height: 28px;
	--font-size: var(--ui-font-size-xs);
	--line-height: var(--ui-font-line-height-3xs);
	--label-font-size: var(--ui-font-size-4xs);
	--label-line-height: var(--ui-font-line-height-3xs);
}


/* Design */
.ui-system-input {
	--label-margin: var(--ui-space-stack-2xs2);
	--label-color: var(--ui-color-base-3);
	--background: var(--ui-color-bg-content-primary);
	--text-color: var(--ui-color-base-1);
	--placeholder-color: var(--ui-color-base-4);
	--icon-color: var(--ui-color-base-3);
	--label-background: var(--background);
}

.ui-system-input.--primary {
	--border-color: var(--ui-color-g-content-blue-3);
}

.ui-system-input.--light-grey {
	--border-color-active: var(--ui-color-accent-main-primary);
	--border-color: var(--ui-color-base-7);
}

.ui-system-input.--disabled {
	--label-color: var(--ui-color-base-5);
	--border-color: transparent;
	--background: var(--ui-color-base-7);
	--placeholder-color: var(--ui-color-base-5);
	--text-color: var(--ui-color-base-5);
	--icon-color: var(--ui-color-base-5);
	--label-background: var(--ui-color-bg-content-primary);
	pointer-events: none;
}

.ui-system-input.--naked {
	--border-color: transparent;
	--border-color-active: transparent;
	--background: none;
	--padding-horizontal: 0px;
	--inline-label-margin: 0px;
	--label-margin: 0px;
}


/* Error */
.ui-system-input:not(.--naked).--error {
	--border-color: var(--ui-color-accent-main-alert);
	--border-color-active: var(--ui-color-accent-main-alert);
}


/* Center */
.ui-system-input {
	--align: initial;
}

.ui-system-input.--center {
	--inline-label-margin: 0px;
	--align: center;
}


/* Icons */
.ui-system-input {
	--icon-size: 20px;
}

.ui-system-input-container .ui-icon-set {
	--ui-icon-set__icon-color: var(--ui-color-base-3);
	--ui-icon-set__icon-size: var(--icon-size);
}


/* Container */
.ui-system-input {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: var(--align);
	padding: 0 0 6px 0;
	min-width: 0;
}

.ui-system-input.--stretched {
	flex: 1;
}

.ui-system-input-container {
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	min-height: var(--min-height);
	padding: 0 var(--padding-horizontal);
	border-radius: var(--ui-border-radius-sm);
	border: 1px solid var(--border-color);
	background: var(--background);
	cursor: text;
}

.ui-system-input.--active .ui-system-input-container {
	border-color: var(--border-color-active);
}

.ui-system-input.--with-chips .ui-system-input-container {
	padding-left: 6px;
}

.ui-system-input.--clickable .ui-system-input-container {
	cursor: pointer;
}


/* Chips */
.ui-system-input-chip {
	align-self: flex-start;
	margin-top: var(--padding-vertical);
}

.ui-system-input-chip:last-of-type {
	margin: var(--padding-vertical) var(--padding-vertical) var(--padding-vertical) 0;
}


/* Label */
.ui-system-input-label {
	max-width: -webkit-max-content;
	max-width: max-content;
	margin-bottom: var(--label-margin);
	color: var(--label-color);
	font-size: var(--label-font-size);
	line-height: var(--label-line-height);
}

.ui-system-input-label.--inline {
	z-index: 1;
	margin-bottom: var(--ui-space-stack-2xs2-neg);
	margin-left: var(--inline-label-margin);
	padding: 0 var(--ui-space-inline-2xs);
	border-radius: var(--ui-border-radius-2xs);
	background: var(--label-background);
}

.ui-system-input-label.--error {
	position: absolute;
	bottom: 0;
	left: var(--inline-label-margin);
	max-width: calc(100% - 2 * (var(--ui-space-inline-2xs) + var(--inline-label-margin)));
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 0;
	padding: 0 var(--ui-space-inline-2xs);
	background: var(--label-background);
	color: var(--ui-color-accent-main-alert);
}


/* Input */
.ui-system-input-value {
	flex: 1;
	min-width: 0;
	border: none;
	color: var(--text-color);
	font-size: var(--font-size);
	line-height: var(--ui-font-line-height-sm);
	text-align: var(--align);
	cursor: text;
	background: var(--background);
}

.ui-system-input-value::placeholder {
	color: var(--placeholder-color);
}

.ui-system-input.--clickable .ui-system-input-value {
	cursor: pointer;
}

.ui-system-input.--with-chips.--clickable .ui-system-input-value {
	min-width: var(--placeholder-length, 0);
}


/* Icon */
.ui-system-input-icon {
	margin-right: var(--ui-space-inline-2xs);
	pointer-events: none;
}


/* Clear */
.ui-system-input-cross {
	opacity: var(--ui-opacity-50);
	cursor: pointer;
}

.ui-system-input-cross:hover {
	opacity: var(--ui-opacity-70);
}


/* Dropdown */
.ui-system-input-dropdown {
	--ui-icon-set__icon-color: var(--ui-color-base-2);
	pointer-events: none;
}