@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-box-sizing( @type: border-box ) {
	-webkit-box-sizing: @type;
	-moz-box-sizing: @type;
	box-sizing: @type;
}

.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;
	}
}

.oo-ui-transition( @value ) {
	-webkit-transition: @value;
	-moz-transition: @value;
	transition: @value;
}

// 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;

@background-color-base: #fff;
@background-color-base--hover: #eaecf0;
@background-color-base--disabled: #eaecf0;

@color-base: #202122;
@color-base--inverted: #fff;
@color-base--subtle: #72777d;
@color-base--disabled: #72777d;
@color-progressive: #36c;
@color-erroneous: #d33;

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

@border-base: 1px solid #a2a9b1;
@border-color-base--disabled: #c8ccd1;
@border-color-base--active: #72777d;
@border-color-input--hover: @border-color-base--active;
@border-color-erroneous: @color-erroneous;

@box-shadow-base--focus: inset 0 0 0 1px @color-progressive;
@box-shadow-dialog: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
@box-shadow-widget: inset 0 0 0 1px transparent;
@box-shadow-erroneous--focus: inset 0 0 0 1px @color-erroneous;

// `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-base--inverted; // 'coined' effect
@text-shadow-base--disabled: @text-shadow-base;

@opacity-base--disabled: 0.51;

@transition-base:             @transition-duration-base;
@transition-ease-medium:      @transition-duration-medium;
// Transitions > Durations
@transition-duration-base:    100ms;
@transition-duration-medium:  250ms;