@import 'mediawiki.skin.variables.less';
@import 'mediawiki.mixins.less';

.mw-apisandbox-toolbar {
	background: @background-color-base;
	.position-sticky();
	top: 0;
	padding: 0.5em 0;
	box-shadow: @box-shadow-drop-small;
	text-align: right;
	z-index: 1;
}

#mw-apisandbox-ui .mw-apisandbox-link {
	display: none;
}

.mw-apisandbox-popup {
	.oo-ui-popupWidget-body > .oo-ui-widget {
		vertical-align: middle;
	}

	/* So DateTimeInputWidget's calendar popup works... */
	.oo-ui-popupWidget-popup,
	.oo-ui-popupWidget-body {
		overflow: visible;
	}

	/* Display contents of the popup on a single line */
	& > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-body {
		display: table;
	}

	& > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-body > * {
		display: table-cell;
	}

	& > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-body > .oo-ui-buttonWidget {
		padding-left: 0.5em;
		width: 1%;
	}

	&-help {
		min-width: 25em;

		.oo-ui-popupWidget-body-padded {
			// TODO: Upstream this fix (T266223)
			margin-top: 5px;
		}
	}
}

.mw-apisandbox-help-field {
	border-bottom: @border-subtle;
	padding-bottom: 12px;

	&:last-child {
		border-bottom: 0;
	}
}

.mw-apisandbox-optionalWidget {
	width: 100%;

	&.oo-ui-widget-disabled {
		position: relative;
		z-index: 0; /* New stacking context to prevent the cover from leaking out */
	}

	&-cover {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 2;
		cursor: pointer;
	}

	&-fields {
		display: table;
		width: 100%;
	}

	&-widget,
	&-checkbox {
		display: table-cell;
		vertical-align: middle;
	}

	&-checkbox {
		width: 1%; /* Will be expanded by content */
		white-space: nowrap;
		padding-left: 0.5em;
	}
}

.mw-apisandbox-textInputCode .oo-ui-inputWidget-input {
	font-family: monospace, monospace;
	font-size: 0.8125em;
	-moz-tab-size: 4;
	tab-size: 4;
}

.mw-apisandbox-help-field,
.mw-apisandbox-widget-field {
	max-width: 70em;
}

.mw-apisandbox-widget-field {
	.oo-ui-textInputWidget {
		/* Leave at least enough space for icon, indicator, and a sliver of text */
		min-width: 6em;
	}

	&.oo-ui-labelElement.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body {
		& > .oo-ui-fieldLayout-header {
			width: 30%;
		}

		& > .oo-ui-fieldLayout-field {
			width: 70%;
		}
	}
}

/* stylelint-disable selector-class-pattern */
.apihelp-deprecated,
.apihelp-internal {
	font-weight: bold;
	color: @color-error;
}
/* stylelint-enable selector-class-pattern */

.mw-apisandbox-deprecated-value .oo-ui-labelElement-label {
	text-decoration: line-through;
}

.oo-ui-menuOptionWidget .mw-apisandbox-flag {
	line-height: 1.42857143em;
	color: @color-subtle;
	float: right;
}