/* wc.ui.combo.scss */
@import 'mixins-common';

// This redundant rule is not as redundant as you might think so just leave it be!
datalist {
	display: none;
}

[role='combobox'] {
	display: inline-block;
	position: relative;
	white-space: nowrap;

	@if ($wc-ui-color-error-bg != -1) {
		// The whole combo is invalid but we only want to apply the background color to the textbox.
		&[aria-invalid='true'] > input {
			background-color: $wc-ui-color-error-bg;
		}
	}

	> [role='listbox'] {
		min-width: 100%;

		dialog & {
			min-width: initial;
		}
	}

	&[aria-expanded='false'] > [role='listbox'] {
		display: none;
	}

	> button {
		@if ($wc-ui-color-border-form-control != -1) {
			@include border($pos: left, $width: 0);
			@if ($wc-input-padding != -1) {
				padding-bottom: $wc-input-padding;
				padding-top: $wc-input-padding;
			}
			@else { // this could cause issues with some browsers.
				padding-bottom: 2px;
				padding-top: 2px;
			}
		}
		@else { // this could cause issues with some browsers.
			padding-bottom: 2px;
			padding-top: 2px;
		}

		&:before {
			content: $fa-var-caret-down;
		}
	}
}
