@import 'mediawiki.mixins.less';
@import '../../mediainfo-variables.less';

/* stylelint-disable selector-class-pattern */
.wbmi-input-widget {
	// For adjascent widgets, remove the border and border radius on the left.
	.oo-ui-widget + .oo-ui-widget {
		input,
		select,
		.oo-ui-dropdownWidget-handle,
		.oo-ui-buttonElement-button {
			border-bottom-left-radius: 0;
			border-left: 0;
			border-top-left-radius: 0;
		}
	}

	// See: https://phabricator.wikimedia.org/T222283
	// This overrides an override in mediawiki.legacy/shared.css which keeps
	// this input element from flipping over to RTL orientation;
	body.rtl.sitedir-ltr & input {
		direction: unset;
	}
}

// Styles for inputs meant to be displayed on a single line
.wbmi-input-widget--single-line {
	.flex-display();
	.flex-wrap( nowrap );

	.wbmi-input-widget__input {
		.flex( 1, 1, auto, 0 );
		vertical-align: middle;
	}

	.wbmi-input-widget__button {
		.flex( 0, 0, auto, 0 );
		vertical-align: middle;
	}

	.wbmi-input-widget__label {
		.flex( 1, 1, 12em, 0 );
		align-self: center;
	}

	.wbmi-input-uls {
		.flex( 1, 1, auto, 0);
		vertical-align: middle;
		max-width: 12em;
	}

	.wbmi-input-widget__dropdown {
		.flex( 1, 1, 100%, 0);
	}

	.wbmi-input-widget__custom-checkbox {
		.flex( 0, 0, 15em, 0);
		align-self: center;
		padding: 0 @wbmi-spacing-base;
	}

	> *:not( :last-child ) {
		// remove gap between input & button
		margin-right: 0;

		// Elements inside these rows will sometimes need to wrap (like in the
		// case of the GlobeCoordinateWidget). For simplicity, the border on
		// these elements is being left in since we'll want it in cases where
		// the row has to wrap; border-radius can be removed, however.

		&:not( .oo-ui-numberInputWidget ) input, /* non-numeric input field */
		.oo-ui-dropdownWidget-handle, /* dropdown */
		.oo-ui-buttonElement-button { /* button & numeric input (+/- buttons) */
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}

		// Ensure number input takes up 100% width by removing mysterious right margin.
		.oo-ui-numberInputWidget-field {
			margin-left: auto;
		}
	}

	> *:last-child {
		// as with above input, get rid of the border radius where these elements meet
		a {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
	}
}

.wbmi-input-widget--container {
	position: relative;
	width: 100%;
}

.wbmi-input-widget--options {
	// pull up 1 pixel - the above input field's button border shall act as separator
	margin-top: -1px;
	z-index: 1;

	&:not( .wbmi-input-widget__active ) {
		display: none;
	}
}

.wbmi-input-widget--options-container {
	background: @background-color-interactive-subtle;
	border: @border-base;
	padding: @wbmi-spacing-sm @wbmi-spacing-base;
	box-shadow: 2px 2px 5px -2px @wbmi-box-shadow-color;
}