/* wc.ui.dateField.scss */

// Styling specific to the date input component including the calendar.

// We use a single ID'd component for all calendar date pickers and move it around to where it is needed.
// scss-lint:disable IdSelector
@import 'mixins-common';

.wc-datefield {
	position: relative;
}

// calendar launch button
.wc_wdf_cal {
	@include border($width: 0); // remove the generic wc_btn_icon border.
	@include border($pos: left);
	@include margin($pos: left);
}

[role='combobox'] { // NOTE: all of the nested rules apply to nested selectors. This differentiates datefield from combo.
	white-space: nowrap;

	> input {
		border: 0 none;
		//max-width: calc(100% - 2rem); // allow for icon with button artefacts.
	}

	&[aria-expanded='true'] > [role='listbox'] {
		border: 0 none;
		display: block;
		left: $border-width * -1;
		min-width: 100%;

		dialog & {
			left: auto;
			min-width: initial;
		}
	}
}
