@import 'mediawiki.skin.variables.less';
@import 'mediawiki.mixins.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;
	.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.875em; // equals `14px` at browser default of `16px`
@ooui-unit: em;

@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);

@padding-input-text: @padding-vertical-base @padding-horizontal-input-text;
@padding-horizontal-base: @spacing-75;
@padding-horizontal-input-text: @spacing-50;
@padding-vertical-base: @spacing-35;
// 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;