// TODO: Redefined here to avoid importing variables.less;
@width-breakpoint-desktop: 1000px;

@wm-expirywidget-text-width: 43.3em;

.mw-widget-ExpiryWidget.mw-widget-ExpiryWidget-hasDatePicker {
	.oo-ui-buttonSelectWidget {
		display: inline-block;
		vertical-align: top;
	}

	.oo-ui-textInputWidget.mw-widget-ExpiryWidget-relative {
		display: inline-block;
		max-width: @wm-expirywidget-text-width;
	}

	.mw-widget-selectWithInputWidget {
		display: inline;
	}

	.mw-widget-selectWithInputWidget.mw-widget-ExpiryWidget-relative .oo-ui-dropdownInputWidget {
		display: inline-block;
	}

	.mw-widget-selectWithInputWidget.mw-widget-ExpiryWidget-relative .oo-ui-textInputWidget {
		display: inline-block;
		max-width: 22.8em;
	}

	.mw-widgets-datetime-dateTimeInputWidget {
		margin-top: 0;
		margin-bottom: 0;
		max-width: @wm-expirywidget-text-width;

		.mw-widgets-datetime-dateTimeInputWidget-handle {
			max-height: 2.286em;
		}
	}

	@media ( max-width: ( @width-breakpoint-desktop - 1px ) ) {
		.mw-widget-selectWithInputWidget {
			display: block;
		}

		.mw-widget-selectWithInputWidget.mw-widget-ExpiryWidget-relative .oo-ui-dropdownInputWidget,
		.mw-widget-selectWithInputWidget.mw-widget-ExpiryWidget-relative .oo-ui-textInputWidget,
		.mw-widgets-datetime-dateTimeInputWidget {
			display: block;
			max-width: 50em;
			margin-top: 0.5em;
		}
	}
}