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

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

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

f-form-group {
	&[variant="compact"][direction="horizontal"] {
		f-input {
			&: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.f-search-border {
	--input-border-radius-curved: 0px 4px 4px 0px;
	--input-border-radius-round: 0px 22px 22px 0px;
}

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

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