/*!
 * MediaWiki Widgets – PHP DateInputWidget styles.
 *
 * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
 * @license The MIT License (MIT); see LICENSE.txt
 */

// Variables taken from OOUI's WikimediaUI theme
@ooui-font-size-browser: 16; // assumed browser default of `16px`
@ooui-font-size-base: 0.875em; // equals `14px` at browser default of `16px`

@background-color-base: #fff;

@color-base--emphasized: #000;

@border-base: 1px solid #a2a9b1;
@border-color-base--focus: #36c;
@border-color-input--hover: #72777d;
@border-radius-base: 2px;

@padding-input-text: @padding-top-base @padding-horizontal-input-text @padding-bottom-base;
@padding-horizontal-input-text: 8 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.57142857em`≈`7px`
@padding-top-base: 8 / @ooui-font-size-browser / @ooui-font-size-base;
@padding-bottom-base: 7 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.5em`≈`7px`

@box-shadow-widget: inset 0 0 0 1px transparent;
@box-shadow-widget--focus: inset 0 0 0 1px #36c;

@line-height-widget-singleline: 15 / @ooui-font-size-browser / @ooui-font-size-base; // equals `1.07142857em`≈`15px`; Firefox needs a value, Chrome the unit;

@transition-ease-medium: @transition-duration-medium; // `ease` is the initial value
@transition-duration-medium: 250ms;

// Mixins taken from OOUI
.oo-ui-box-sizing( @type: border-box ) {
	-webkit-box-sizing: @type;
	-moz-box-sizing: @type;
	box-sizing: @type;
}

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

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

.oo-ui-transition( @value1, @value2: X, ... ) {
	@value: ~`"@{arguments}".replace( /[\[\]]|\,\sX/g, '' )`; // stylelint-disable-line function-comma-space-after, function-whitespace-after, string-quotes, value-keyword-case
	-webkit-transition: @value;
	-moz-transition: @value;
	transition: @value;
}

// DateInputWidget rules
.mw-widget-dateInputWidget {
	&.oo-ui-textInputWidget {
		display: inline-block;
		position: relative;
		width: 21em;
		margin-top: 0.25em;
		// .oo-ui-inline-spacing( 0.5em ); already inherited from `.oo-ui-inputWidget`
		margin-bottom: 0.25em;
		margin-left: 0;
	}

	// Note that this block applies to both the PHP widget and the JS widget
	&-handle,
	&.oo-ui-textInputWidget input {
		display: inline-block;
		position: relative;
		cursor: pointer;
		/**
		 * Ensures non-infused and infused widget have the same height.
		 * Equal to line height + top padding + bottom padding
		 */
		max-height: 2.458em;
	}

	// Ensure `.mw-widget-dateInputWidget-handle` similar appearance to OOUI's `.oo-ui-textInputWidget`
	&-handle {
		background-color: @background-color-base;
		color: @color-base--emphasized;
		.oo-ui-box-sizing( border-box );
		width: 100%;
		border: @border-base;
		border-radius: @border-radius-base;
		padding: @padding-input-text;
		line-height: @line-height-widget-singleline;
	}

	&.oo-ui-widget-enabled {
		.mw-widget-dateInputWidget-handle {
			box-shadow: @box-shadow-widget; // necessary for smooth transition
			.oo-ui-transition(
				border-color @transition-ease-medium,
				box-shadow @transition-ease-medium
			);

			&:hover {
				border-color: @border-color-input--hover;
			}

			&:focus {
				outline: 0;
				border-color: @border-color-base--focus;
				box-shadow: @box-shadow-widget--focus;
			}

			& > .oo-ui-labelElement-label {
				cursor: pointer;
			}
		}
	}

	&-active {
		&.oo-ui-textInputWidget input {
			cursor: text;
		}
	}
}