@use '../TextField/TextField.scss' as *;
@use '../Textarea/Textarea.scss' as *;

@use './variables' as *;

.s-input__slot {
	border-radius: inherit;
	align-items: center;
	color: inherit;
	display: flex;
	margin-bottom: $input-slot-margin-bottom;
	position: relative;
	transition: $primary-transition;
	width: 100%;
	height: inherit;
}

.s-input__control {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.s-input__details {
	color: var(--theme-text-secondary);
	display: flex;
	flex: 1 0 auto;
	max-width: 100%;
	font-size: 12px;
	overflow: hidden;

	& > [slot='messages'] {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-grow: 1;
	}
}

.s-input {
	display: flex;
	align-items: center;
	flex-direction: row;
	flex: 1 1 auto;
	font-size: $input-font-size;
	letter-spacing: $input-letter-spacing;
	max-width: 100%;
	text-align: $input-text-align;

	input {
		max-height: $input-max-height;
	}

	input,
	textarea {
		color: var(--theme-text-primary);

		&:invalid {
			box-shadow: none;
		}

		&:focus,
		&:active {
			outline: none;
		}

		&::placeholder {
			color: var(--theme-text-disabled);
		}
	}

	& > {
		[slot='prepend-outer'],
		[slot='append-outer'] {
			align-self: flex-start;
			display: inline-flex;
			margin-bottom: 4px;
			margin-top: 4px;
			line-height: 1;
		}

		[slot='prepend-outer'] {
			margin-right: $input-prepend-append-outer-margin;
		}

		[slot='append-outer'] {
			margin-left: $input-prepend-append-outer-margin;
		}
	}

	.s-icon {
		user-select: none;
		align-items: center;
		display: inline-flex;
		height: $input-icon-height;
		flex: 1 0 auto;
		justify-content: center;
		min-width: $input-icon-min-width;
		width: $input-icon-width;
	}

	label {
		height: $input-label-height;
		line-height: $input-label-letter-spacing;
		color: var(--theme-text-secondary);
		white-space: nowrap;
		transition: $primary-transition;
	}

	&:focus-within {
		.s-icon {
			color: inherit;
		}
	}

	&:disabled,
	&.disabled {
		pointer-events: none;
		color: var(--theme-text-disabled);

		input,
		textarea {
			color: var(--theme-text-disabled);
		}

		.s-icon {
			color: var(--theme-icons-inactive);
		}

		label {
			color: var(--theme-text-disabled);
		}
	}

	&.dense {
		.s-input__slot {
			margin-bottom: $input-dense-slot-margin-bottom;
		}
	}
}