@import "./../../mixins/scss/mixins";
@import "./f-select-variables";

f-select {
	display: flex;
	flex-direction: row;
	align-items: center;
	&[disabled] {
		@include disabled();
	}
	@each $state, $color in $states {
		&[state="#{$state}"] {
			@include input-color($state);
		}
	}
}

f-form-group {
	&[variant="compact"][direction="horizontal"] {
		f-select {
			&: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-select.f-search-border {
	--input-border-radius-curved: 4px 0px 0px 4px;
	--input-border-radius-round: 22px 0px 0px 22px;
	&[category="fill"][state="default"] {
		border-right: 1px solid var(--color-border-default);
	}
}

f-div[direction="column"] {
	> f-select {
		flex: 1 1;
		max-height: 100%;
		width: 100%;
	}
}

f-div[direction="row"] {
	> f-select {
		flex: 1 1;
		max-width: 100%;
		height: 100%;
	}
}