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

.wc-multiselectpair {
	white-space: nowrap;

	> span {// The containers for the parts of the multiSelectPair
		display: inline-block;
		vertical-align: top;

		+ span {
			//just enough margin to keep the buttons and selects visually separated but not enough to make them appear
			//as separate controls. This is why we do not use the usual hgap_small property as that tends to
			//imply a separation of components within a custom grouping, rather than a separation of parts within a
			//compound control.
			margin-left: 1px;
		}
	}

	label { //Making the label display:block will define a minimum size for the selects.
		display: block;
	}

	select { //Allow the select to grow with the label. NOTE: min-height is roughly the height of the four buttons.
		min-height: 8rem;
		min-width: 100%;
	}

	.wc_msp_btncol button { // the add and remove buttons
		display: block;

		&[value='rem'] { //a small gap between the add and remove buttons
			margin-top: $vgap-normal;
		}
	}
}
