/* Root class of native select */
.root {
	font-size: var(--font-size-base);
	display: flex;
	flex-direction: column;
	font-family: var(--font-family);
}

/* Wrapper class for native select and dropdown arrow */
.inputWrapper {
	display: inline-block;
	position: relative;
	width: 100%;
}

/* Class for select element */
.select {
	appearance: none;
	-webkit-appearance: none;
	background: var(--color-background);
	border: 1px solid var(--color-text-primary);
	border-radius: 0;
	cursor: pointer;
	display: block;
	font-size: inherit;
	line-height: var(--line-height-base);
	height: calc(var(--line-height-base) + 2 * var(--grid-base) + 2 * var(--border-width));
	max-width: 100%;
	padding: var(--spacing-regular) calc(var(--spacing-regular) * 3) var(--spacing-regular)
		var(--spacing-regular);
	width: 100%;
	border: var(--border-width) solid var(--color-border);
	border-bottom-color: var(--color-border-strong);
	color: var(--color-text-primary);
}

/* Class for dojo stylized dropdown arrow */
.arrow {
	bottom: 0;
	position: absolute;
	right: 4px;
	top: 0;
	width: 1.5em;

	border-left: var(--border-width) solid var(--color-border);
	bottom: var(--border-width);
	color: var(--color-text-faded);
	font-size: var(--font-size-icon);
	line-height: var(--line-height-base);
	padding: var(--spacing-regular);
	pointer-events: none;
}

/* Class for disabled select state */
.disabled .select {
	background-color: var(--color-background-faded);
}
