/* wc.ui.combo.scss */
@import 'mixins_common.scss';

//scss-lint:disable QualifyingElement
// Qualifying elements are important here to distinguish simple combos (input with list attribute) from date/partialDate
// combos (which are divs with complex content).

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

input[role='combobox'] {
	@include background-image($url: '../images/down.png', $height: 1em, $width: 1em, $x: 100%);
	@include border;
	@include border-box;
	padding-right: $line-size;

	&[disabled] {
		background-image: url('../images/down-d.png');
	}

	~ [role='listbox'] {
		@include border;
		background-color: $wc-ui-color-global-bg;
		display: block;
		list-style-type: none;
		margin: 0;
		max-width: 100%;
		padding: 0;
		position: absolute;
		&[aria-busy='true'] { // we do not want dynamic suggestion lists to go transparent when busy
			// scss-lint:disable ImportantRule
			background-color: $wc-ui-color-global-bg !important;
		}
	}
}

li[role='option'] {
	margin: 0;
	min-height: 1em;
	padding: $hgap-small;

	&:hover,
	&:focus {
		background-color: $wc-ui-color-invite-bg;
		cursor: pointer;
	}
}

/* end wc.ui.combo.scss */
