@import "../../style/base";
@import "input-vars";

:host {
	--_input-state-color: #{$input-state-color-inactive};
	--_input-padding-left-right: #{$input-padding-left-right};
	--_input-bg: #{$input-bg};
	--_input-border-radius: 0;
	--_input-color: #{$input-color};
	--_input-label-color: #{$input-label-color};
	--_input-border-style: #{$input-border-style};

	transform: translateZ(0);
	display: block;
	outline: none;
}

:host([disabled]) {
	pointer-events: none;
	--_input-state-color: #{$input-state-color-disabled};
	--_input-label-color: #{$input-label-color-disabled};
	--_input-color: #{$input-color-disabled};
	--_input-border-style: #{$input-border-style-disabled};
}

#container {
	background: var(--_input-bg);
	color: var(--_input-color);
	border-radius: var(--_input-border-radius);
	font-size: $input-font-size;
	font-family: $input-font-family;
	border-bottom: #{$input-border-width} var(--_input-border-style) var(--_input-state-color);
	transition: $input-transition;
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
}

#wrapper {
	position: relative;
	flex-grow: 1;
}

#label {
	left: var(--_input-padding-left-right);
	color: var(--_input-label-color);
	transition: $input-label-transition;
	font-family: $input-font-family;

	top: 50%;
	transform: translateY(-50%);

	z-index: 1;
	position: absolute;
	pointer-events: none;
	font-size: inherit;
	line-height: 1;
	white-space: nowrap;
	user-select: none;
}

:host(:hover) {
	--_input-state-color: #{$input-state-color-hover};
}

:host([filled]), :host([outlined]) {
	--_input-padding-left-right: #{$input-padding-left-right-outlined};
}

:host([filled]) {
	--_input-border-radius: #{$input-border-radius-filled};
	--_input-bg: #{$input-bg-filled};
}

:host([filled]:hover) {
	--_input-bg: #{$input-bg-filled-hover};
}

:host([outlined]) {
	--_input-border-radius: #{$input-border-radius-outlined};

	#container {
		border: #{$input-border-width} var(--_input-border-style) var(--_input-state-color);
	}
}

:host(:focus-within) {
	--_input-state-color: #{$input-state-color-active};
}

:host([dirty]), :host(:focus-within), :host([type="color"]), :host([type="date"]), :host([type="file"]), :host([type="range"]) {
	#label {
		font-size: $input-label-font-size;
		top: $input-padding-top-bottom;
		transform: translateY(0);
	}
}


::slotted(input), ::slotted(textarea), ::slotted(select), #slot-wrapper {
	caret-color: var(--_input-color-state);
	padding: #{$input-padding-top-bottom} var(--_input-padding-left-right);
	font-family: $input-font-family;
	font-size: $input-font-size;

	@include reset();

	display: block;
	color: inherit;
	-webkit-overflow-scrolling: touch;
	position: relative;
	appearance: none;
	border: none;
	outline: none;
	margin: 0;
	background: transparent;
	width: 100%;
}

:host([label]) {
	::slotted(input), ::slotted(textarea), ::slotted(select), #slot-wrapper {
		padding-top: calc(#{$input-label-space} + #{$input-padding-top-bottom});
	}
}

:host([invalid]) {
	--_input-state-color: #{$input-state-color-invalid};
}

::slotted(input[type="color"]) {
	height: #{size(60)};
	cursor: pointer;
}

::slotted([slot="before"]), ::slotted([slot="after"]) {
	color: $input-before-after-color;
}

// When there are no padding on the input we add margin on the slots
:host(:not([outlined]):not([filled])) {
	::slotted([slot="before"]) {
		margin-right: $input-padding-left-right-outlined;
	}

	::slotted([slot="after"]) {
		margin-left: $input-padding-left-right-outlined;
	}
}

:host([outlined]), :host([filled]) {
	::slotted([slot="before"]) {
		margin-left: $input-padding-left-right-outlined;
	}

	::slotted([slot="after"]) {
		margin-right: $input-padding-left-right-outlined;
	}
}