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

/*!
 * OOUI definitions used by the existing CSS (will make it easier to put this
 * widget in OOUI once OOUI is capable of handling it)
 */

.oo-ui-unselectable() {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.oo-ui-inline-spacing( @spacing, @cancelled-spacing: 0 ) {
	margin-right: @spacing;

	&:last-child {
		margin-right: @cancelled-spacing;
	}
}

// Variables taken from OOUI's WikimediaUI theme, see its common.less for further explanations
@ooui-font-size-browser: 16; // assumed browser default of `16px`
@ooui-font-size-base: 0.875 / 1em; // equals `14px` at browser default of `16px`
@ooui-unit: em;

@min-size-indicator: 12px;
@size-base: 32 / @ooui-font-size-browser / @ooui-font-size-base;
@size-icon: 24 / @ooui-font-size-browser / @ooui-font-size-base;
@size-indicator: 12 / @ooui-font-size-browser / @ooui-font-size-base;
@max-width-base: 50em;
@max-width-input: @max-width-base;

@padding-input-text: @padding-vertical-base @padding-horizontal-input-text;
@padding-horizontal-base: 12px;
@padding-horizontal-input-text: 8px;
@padding-vertical-base: 6px;
// All paddings holding icons need `em`s due to font-size derived icon scaling.
@padding-top-button-clear: 28 / @ooui-font-size-browser / @ooui-font-size-base; // As it's inside an input, we need to reduce from borders surrounding.
@padding-start-input-text-icon: 6 / @ooui-font-size-browser / @ooui-font-size-base;
@padding-start-input-text-icon-label: 32 / @ooui-font-size-browser / @ooui-font-size-base;
@padding-start-button-clear: 4 / @ooui-font-size-browser / @ooui-font-size-base;

// `line-height` has to be relative/in `em` to enable user override in browser settings.
@line-height-widget-base: unit( 18 / @ooui-font-size-browser / @ooui-font-size-base, @ooui-unit ); // equals `18px` at base `font-size: 14px;

@text-shadow-base: 0 1px 1px @color-inverted; // 'coined' effect
@text-shadow-base--disabled: @text-shadow-base;