@use "sass:math";
/* variables specific to current element */

$search-input-height-large:  map-deep-get($token-sizes-unit-map, "56");

.#{$namespace}input {

	/* Save root element context for easy access if nesting is needed */

	$self: &;

	/* properties of current element  + media queries */
	position: relative !important;

	/* Pseudo Elements */

	&::before {
	}

	&::after {
	}

	/*
	Include elements that are linked to the current element but have to reside at the root level of the stylesheet
	(e.g: keyframes)
	*/
	@at-root {
	}


	/* children - write selector in full in comments in order to facilitate search */

	&__iconLeft,
	&__iconRight,
	&__clearBtn,
	&__searchBtn {

		position: absolute;
		top: 0;
		height: $input-height;
		display: flex;
		align-items: center;

	}

	&__searchActions {

		position: absolute;
		top: 0;
		right: $input-padding-x;
		height: $input-height;
		display: flex;
		align-items: center;

		#{$self}__clearBtn,
		#{$self}__searchBtn {

			position: relative;
			top: auto !important;
			right: auto !important;

		}

		#{$self}__searchBtn {

			margin-left: map-deep-get($token-spacer-inline-map, "sm");

		}

	}
	
	&__clearBtn {

		right: math.div($input-padding-x, 2);
		display: none;

	}

	&__searchBtn {
		right: math.div($input-padding-x, 2);
	}

	&__iconLeft,
	&__iconRight {

		@include custom-prop-fallback("color","sys-color-text-primary-muted");
		pointer-events: none;

	}

	&__iconLeft {
		left: $input-padding-x;
	}

	&__iconRight {
		right: $input-padding-x;
		&.-isButton {
			pointer-events: auto;
		}
	}

	// input__childElement
	&__autocomplete {

		position: relative;
		//top: map-deep-get($token-spacer-stack-max-map, "sm");

		// follows same logic as parent

		.show {

			float: none;
			width: 100%;
			top: 0;
			left: 0;
			right: 0;

		}

	}

	&__autocompleteToggle {

		z-index: z("low");
		pointer-events: auto;

		&[aria-expanded="true"] {
			[class*="icon"] {
				&::before {
					content: map-deep-get($token-icon-map, "chevronup");
				}
			}
		}

	}
	
	&__shadowInput {

		border-bottom: 0;
		position: absolute;
		background-color: transparent;
		z-index: z("zero");
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		pointer-events: none;
		padding-right: 3.125ch;

	}

	&__shadowValue {
		color: transparent;
		max-width: 100%;
	}

	&__shadowCurrency {
		line-height: $input-line-height;
		position: relative;
		top: -0.025em;
		margin-left: 0.125ch;
		color: $input-placeholder-color;
	}

	&__autocompleteInner {

		box-shadow: map-deep-get($token-shadow-map, "detail");
		display: none;
		position: absolute;
		top: map-deep-get($token-spacer-stack-max-map, "sm") !important;
		left: 0 !important;
		width: 100%;

	}

	&__autocompleteSelected {

		padding-top: map-deep-get($token-spacer-stack-max-map, "sm");
		@include spacer-component-stack("sm");

	}

	&__phoneWrapper {
		display: flex;
	}
	
	&__phoneCustomPrefix,
	&__phoneSelect {
		width: 90px !important;
		flex-shrink: 0;
	}

	&__phoneCustomPrefix {
		padding-left: map-deep-get($token-spacer-unit-map, "24");
	}
	
	&__phoneNumberPrefix {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		left: 0;
		padding-left: $input-padding-x;
		height: $input-height;
	}

	&__hint {

		@include form-feedback-hint();

	}

	.form-control {

		&[disabled] {

			+ #{$self}__shadowInput #{$self}__shadowCurrency {
				@include custom-prop-fallback("color", "sys-color-text-neutral-vivid")
			}

		}

	}

	/* modifiers */

	// input -multiple
	&.-multiple {

		// follows same logic as base element

		.form-control ~ .form-control {

			height: subtract($input-height, 0.53rem);

		}

		> *[readonly],
		> *:disabled,> *[disabled] {

			border-radius: 0;

			&:first-of-type {

				border-top-left-radius: map-deep-get($token-radius-map, "8");
				border-top-right-radius: map-deep-get($token-radius-map, "8");

			}

			&:last-of-type {

				border-bottom-left-radius: map-deep-get($token-radius-map, "8");
				border-bottom-right-radius: map-deep-get($token-radius-map, "8");

			}

		}

	}

	// input -autocomplete
	&.-autocomplete {

		&.-shown {

			z-index: z("fixed");

			//#{$self}__autocomplete {
			//
			//	z-index: z("fixed");
			//
			//}

			#{$self}__autocompleteInner {

				display: block;

			}

		}

	}

	// input -hasIcon
	&.-hasIcon {

		position: relative;
		
		&.-hasIconRight {

			padding-right: $input-padding-x*5;

		}

		.form-control {

			padding-right: map-deep-get($token-spacer-unit-map, "40");

			&:focus {

				+ #{$self}__iconRight {

					@include custom-prop-fallback("color", "comp-input-active-border-color")

				}

			}

		}

	}
	
	&.-hasShadow {
		
		.form-control {

			padding-right: 3.125ch;

		}

		.-hasIconRight {

			padding-right: calc(3.125ch + ($input-padding-x*4));

			~ #{$self}__shadowInput {

				padding-right: calc(3.125ch + ($input-padding-x*4));

			}

		}
		
	}

	// input -search
	&.-search {

		position: relative;
		flex-grow: 1;

		.form-control {

			flex-grow: 1;
			border-radius: map-deep-get($token-radius-map, "32");
			height: $input-height;
			padding-left: $input-padding-x*6;
			padding-right: $input-padding-x*2;
			border-width: $input-border-width*2;
			border-style: solid;
			@include custom-prop-fallback("border-color", "comp-input-border-color");
			@include form-control-focus($ignore-warning: true);

			&:focus {

				border-color: $border-color;

			}

		}

		#{$self}__iconLeft {

			@include custom-prop-fallback("color","sys-color-text-primary-muted");
			left: $input-padding-x*2;

		}

		#{$self}__searchBtn {

			display: none;

		}

		#{$self}__searchBtn,
		#{$self}__clearBtn {

			height: $input-height;

		}

		&.-isFocused {

			.form-control {

				padding-right: $input-padding-x*14;
				background-color: $input-bg;
				@include custom-prop-fallback("background-color", "comp-input-background-color");
				border-color: $border-color;

			}

			#{$self}__searchBtn {

				display: inline-flex;

			}
		}

		&.-hasValue {

			#{$self}__clearBtn {

				display: inline-flex;

			}

		}

		&.-bgWhite {

			.form-control {

				background-color: map-deep-get($token-color-grayscale-map, "0");
				border-color: map-deep-get($token-color-grayscale-map, "0");

				&:focus {

					box-shadow: map-deep-get($token-shadow-map, "active");
					border-color: map-deep-get($token-color-grayscale-map, "0") !important;

				}


			}

			&.-isFocused {

				.form-control {

					box-shadow: map-deep-get($token-shadow-map, "active");
					border-color: map-deep-get($token-color-grayscale-map, "0");

				}

			}

		}

		&.-large {

			.form-control,
			#{$self}__iconLeft,
			#{$self}__iconRight,
			#{$self}__clearBtn,
			#{$self}__searchBtn,
			#{$self}__searchActions {

				height: $search-input-height-large;

			}

			#{$self}__searchBtn,
			#{$self}__searchActions {

				right: math.div($search-input-height-large - map-deep-get($token-button-size-big-map, "mobile" ,"min-height"),2);

			}

		}

		&.-noBorder {

			.form-control {
				border-color: transparent;
				@include form-control-focus($ignore-warning: true);
			}

		}

	}

	// input -calendar
	&.-calendarSmall,
	&.-calendar {

		position: relative;

		.form-control {

			&[disabled] {

				~ #{$self}__iconRight * {
					color: $input-disabled-color;
				}

			}

			&[readonly] {

				pointer-events: none;

				~ #{$self}__iconRight * {
					color: $input-disabled-color;
				}

			}

		}

	}

	// input -phone
	&.-phone {

		#{$self}__phoneCustomPrefixWrapper {
			display: none;
		}

		&.-phoneCustomPrefix {

			#{$self}__phoneSelect {
				display: none;
			}

			#{$self}__phoneCustomPrefixWrapper {
				display: block;
			}

		}

		&.is-invalid {

			.invalid-feedback {

				display: block;

			}

		}

	}

	&.-inputLg {

		#{$self}__shadowCurrency {

			line-height: inherit;
			top: 0.15em;

		}

		.form-control,
		#{$self}__shadowInput {

			font-size: $font-size-lg-max;
			height: $input-height-lg;

		}

		#{$self}__iconLeft,
		#{$self}__iconRight,
		#{$self}__clearBtn,
		#{$self}__searchBtn {

			height: $input-height-lg;

			> * {

				font-size: map-deep-get($token-font-size-map,"body","xl");

			}

		}

	}

	&.-inputXl {

		#{$self}__shadowCurrency {

			line-height: inherit;
			top: -0.075em

		}

		.form-control,
		#{$self}__shadowInput {

			font-size: map-deep-get($token-font-size-map,"body","xl");
			height: $input-height-xl;

		}

		#{$self}__iconLeft,
		#{$self}__iconRight,
		#{$self}__clearBtn,
		#{$self}__searchBtn {

			height: $input-height-xl;

			> * {

				font-size: map-deep-get($token-font-size-map,"body","xl");

			}

		}

	}

	&.-input2xl,
	&.-inputXxl {

		#{$self}__shadowCurrency {

			line-height: inherit;

		}

		.form-control,
		#{$self}__shadowInput {

			@extend %textBodyXxl;
			height: subtract($input-height-2xl, $border-width);
			font-weight: map-deep-get($token-font-weight-map, "regular");

			@include media-breakpoint-up(xl) {
				height: $input-height-2xl;
			}

			#{$self}__shadowCurrency {

				top: -0.055em;

			}

		}

		#{$self}__iconLeft,
		#{$self}__iconRight,
		#{$self}__clearBtn,
		#{$self}__searchBtn {

			height: subtract($input-height-2xl, $border-width);
			@extend %textBodyXxl;

			@include media-breakpoint-up(xl) {
				height: $input-height-2xl;
			}
			
			> * {

				font-size: map-deep-get($token-font-size-map,"body","xl");
			}

		}

	}

	/* Chrome, Safari, Edge, Opera */
	&::-webkit-outer-spin-button,
	&::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	/* Firefox */
	&[type="number"] {
		-moz-appearance: textfield;
	}

	/* random parent element */
	/* 
	*
	*   Syntax : .randomParentElt & {}
	*
	*/

	/* Pseudo Classes */

	&:hover {
		@media (hover: hover) {

		}
	}

	//&:placeholder-shown,
	&:focus {

		~ #{$self}__shadowValue {

			display: none;

		}

	}

	&:active {
	}

	&:focus,
	&:active {
	}

}