// common mixins imported from this file
@use "sass:map";
@import "./../../mixins/scss/mixins";
@import "./../f-input/f-input-variables";

:root {
	--input-border-radius-curved: 4px;
	--input-border-radius-round: 22px;
}

f-input-light {
	width: 100%;
	&[disabled] {
		@include disabled();
	}
	@each $state, $color in $states {
		&[state="#{$state}"] {
			@include input-color($state);
		}
	}

	.f-input-wrapper {
		// Important :  always include base mixins
		@include base();
		display: flex;
		flex: 1 0 auto;
		align-items: center;
		position: relative;
		height: var(--form-input-div-size);

		&[disabled] {
			@include disabled();
			pointer-events: none;
			opacity: 1;
		}

		@each $size, $value in $sizes {
			&[size="#{$size}"] {
				height: map.get($value, "main-height");
			}
		}

		.word-break {
			word-break: normal !important;
		}

		@each $category, $value in $categories {
			&[category^="#{$category}"] {
				background-color: map.get($value, "background");
				&:hover .f-input {
					background-color: map.get($value, "hover") !important;
				}
				&:hover {
					background-color: map.get($value, "hover") !important;
				}
			}
		}

		@each $state, $color in $states {
			&[state="#{$state}"] {
				@include input-color($state);
				&[variant="block"][category="fill"] {
					border-bottom: 1px solid map.get($color, "border");
					border-top: none;
					border-right: none;
					border-left: none;
					&:focus-within {
						border-bottom: 1px solid map.get($color, "focus");
						outline: none;
					}
				}
				&[variant="block"][category="transparent"] {
					border-bottom: 1px solid map.get($color, "border");
					border-top: none;
					border-right: none;
					border-left: none;
					&:focus-within {
						border-bottom: 1px solid map.get($color, "focus");
						outline: none;
					}
				}
				&[variant="block"][category="outline"] {
					border: 1px solid map.get($color, "border");
					&:focus-within {
						border-bottom: 1px solid map.get($color, "focus");
						outline: none;
					}
				}
				&[variant="curved"][category="fill"] {
					border: 1px solid map.get($color, "input");
					border-radius: var(--input-border-radius-curved);
					&:focus-within {
						border: 1px solid map.get($color, "focus");
						outline: none;
					}
				}
				&[variant="curved"][category="outline"] {
					border: 1px solid map.get($color, "border");
					border-radius: var(--input-border-radius-curved);
					&:focus-within {
						border: 1px solid map.get($color, "focus");
						outline: none;
					}
				}
				&[variant="curved"][category="transparent"] {
					border: 1px solid map.get($color, "border");
					border-radius: var(--input-border-radius-curved);
					&:focus-within {
						border: 1px solid map.get($color, "focus");
						outline: none;
					}
				}
				&[variant="round"][category="fill"] {
					border-radius: var(--input-border-radius-round);
					border: 1px solid map.get($color, "input");
					&:focus-within {
						border: 1px solid map.get($color, "focus");
						outline: none;
					}
				}
				&[variant="round"][category="outline"] {
					border-radius: var(--input-border-radius-round);
					border: 1px solid map.get($color, "border");
					&:focus-within {
						border: 1px solid map.get($color, "focus");
						outline: none;
					}
				}
				&[variant="round"][category="transparent"] {
					border-radius: var(--input-border-radius-round);
					border: 1px solid map.get($color, "border");
					&:focus-within {
						border: 1px solid map.get($color, "focus");
						outline: none;
					}
				}
			}
		}

		.f-input-prefix {
			position: relative;
			display: flex;
			padding: 9px 0px 9px 12px;
			gap: 12px;
			align-items: center;
		}

		.f-input-suffix {
			position: relative;
			padding: 9px 12px 9px 0px;
			display: flex;
			gap: 12px;
			align-items: center;
		}

		.loader-suffix {
			position: relative;
			display: flex;
			gap: 12px;
			align-items: center;
			@include rotate("svg");
			pointer-events: none;
			padding: 0px 12px 0px 0px;

			svg {
				position: relative;
				height: var(--form-input-loader);
				width: var(--form-input-loader);
			}
			@each $state, $color in $states {
				&[state="#{$state}"] {
					svg path.loader-fill {
						fill: map.get($color, "focus");
					}
				}
			}
		}

		@each $size, $value in $sizes {
			&[size="#{$size}"] {
				.loader-suffix {
					svg {
						height: map.get($value, "loader");
						width: map.get($value, "loader");
					}
				}
			}
		}

		.f-input {
			@include base();
			display: flex;
			flex: 1 1 auto;
			padding: 0px 12px;
			height: 22px;
			font-style: normal;
			font-weight: 325;
			font-size: 12px;
			line-height: 18px;
			color: var(--color-text-default);
			color-scheme: dark;
			width: 50px;
			-webkit-background-clip: text;

			@each $category, $value in $categories {
				&[category^="#{$category}"] {
					background-color: map.get($value, "background");
					border: none;
					&:focus {
						outline: none;
					}
				}
			}
			&[variant="round"] {
				border-radius: 22px;
			}
			&[variant="curved"] {
				border-radius: 4px;
			}
			&[variant="block"] {
				border-radius: 4px;
			}
			&::placeholder {
				/* Chrome, Firefox, Opera, Safari 10.1+ */
				font-style: normal;
				font-weight: 325;
				font-size: 12px;
				line-height: 18px;
				color: var(--color-text-subtle);
			}
			/* Chrome, Safari, Edge, Opera */
			&::-webkit-outer-spin-button,
			&::-webkit-inner-spin-button {
				-webkit-appearance: none;
				margin: 0;
			}
			/* Firefox */
			&[type="number"] {
				-moz-appearance: textfield;
			}
			&[type="date"]::-webkit-calendar-picker-indicator {
				cursor: pointer;
				border-radius: 4px;
				margin-right: 2px;
				opacity: 0.6;
				font-size: 15px;
			}

			&[type="date"]::-webkit-calendar-picker-indicator:hover {
				opacity: 1;
			}
		}
	}
	[slot="help"] {
		margin-top: 4px;
	}
}

f-form-group {
	&[variant="compact"][direction="horizontal"] {
		f-input-light {
			&:first-child {
				--input-border-radius-curved: 4px 0px 0px 4px;
				--input-border-radius-round: 22px 0px 0px 22px;
			}
			&:last-child {
				--input-border-radius-curved: 0px 4px 4px 0px;
				--input-border-radius-round: 0px 22px 22px 0px;
			}
			&:not(:first-child):not(:last-child) {
				--input-border-radius-curved: 0px 0px 0px 0px;
				--input-border-radius-round: 0px 0px 0px 0px;
			}
		}
	}
}

f-input-light.f-search-border {
	--input-border-radius-curved: 0px 4px 4px 0px;
	--input-border-radius-round: 0px 22px 22px 0px;
}

f-input-light.f-search-border-button {
	--input-border-radius-curved: 0px 0px 0px 0px;
	--input-border-radius-round: 0px 0px 0px 0px;
}

f-input-light.f-search-suggest-button {
	--input-border-radius-curved: 4px 0px 0px 4px;
	--input-border-radius-round: 22px 0px 0px 22px;
}