/* The root style for Select */
.root {
	display: flex;
	flex-direction: column;
}

/* Class applied to the root of the trigger node */
.trigger {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background: var(--component-background);
	border: 1px solid var(--component-color);
	font-size: inherit;
	min-height: 25px;
	min-width: 200px;
	position: relative;
	padding: 0 8px;
}

.focused {
}

/* class added to the root when the menu is open */
.expanded {
}

/* class added to value when the menu is open */
.valueExpanded {
}

/* Wrapper around the widgets text value */
.value {
	flex-grow: 1;
	text-align: left;
}

/* Wrapper around the widgets placeholder value */
.placeholder {
}

/* Wrapper around the widgets arrow icon */
.arrow {
}

/* Wrapper around the popup content */
.menuWrapper {
	border: 1px solid var(--component-color);
}

/* Modifier classes */
.disabled .trigger,
.readonly .trigger {
	background-color: var(--disabled-color);
}

/* Valid class */
.valid .trigger {
	border-color: green;
}

/* Invalid class */
.invalid .trigger {
	border-color: red;
}
