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

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

@indicator-size: unit( 12 / 16 / 0.8, em );

.mw-widget-dateInputWidget {
	&.oo-ui-textInputWidget {
		display: inline-block;
		position: relative;
		width: 21em;
		margin-top: 0.25em;
		.oo-ui-inline-spacing( 0.5em );
		margin-bottom: 0.25em;
		margin-left: 0;
	}

	&-handle,
	&.oo-ui-textInputWidget input {
		background-color: #fff;
		display: inline-block;
		position: relative;
		.oo-ui-box-sizing( border-box );
		width: 100%;
		.oo-ui-unselectable();
		cursor: pointer;
		padding: 0.5em 1em;
		border: 1px solid #a2a9b1;
		border-radius: 2px;
		outline: 0;
		line-height: 1.275;
		/**
		 * Ensures non-infused and infused widget have the same height.
		 * Equal to line height + top padding + bottom padding
		 */
		height: 2.275em;

		> .oo-ui-labelElement-label {
			padding: 0;
		}

		> .oo-ui-indicatorElement-indicator {
			display: none;
		}
	}

	&.oo-ui-indicatorElement .mw-widget-dateInputWidget-handle > .oo-ui-indicatorElement-indicator {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: @indicator-size;
		height: 100%;
		margin: 0 0.775em;
	}

	> .oo-ui-textInputWidget {
		z-index: 2;

		& input {
			padding-left: 1em;
		}
	}

	&-calendar {
		background-color: #fff;
		position: absolute;
		margin-top: -2px;
		box-shadow: 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 );
		z-index: 1;

		&:focus {
			box-shadow: inset 0 0 0 1px #36c, 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 );
			z-index: 3;
		}
	}

	&-empty {
		.mw-widget-dateInputWidget-handle {
			color: #54595d;
			outline: 0;
		}
	}

	&.oo-ui-flaggedElement-invalid {
		.mw-widget-dateInputWidget-handle {
			border-color: #f00;
			box-shadow: inset 0 0 0 0 #f00;
		}
	}

	&.oo-ui-widget-enabled {
		.mw-widget-dateInputWidget-handle:hover {
			border-color: #72777d;
		}
	}

	&.oo-ui-widget-disabled {
		.mw-widget-dateInputWidget-handle {
			background-color: #eaecf0;
			color: #72777d;
			border-color: #c8ccd1;
			text-shadow: 0 1px 1px #fff;
			cursor: default;

			> .oo-ui-indicatorElement-indicator {
				opacity: 0.51;
			}
		}
	}
}