/*!
 * 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;
	}
}

.mw-widget-dateInputWidget {
	display: inline-block;
	position: relative;

	&-handle {
		width: 100%;
		display: inline-block;
		cursor: pointer;

		.oo-ui-unselectable();
		.oo-ui-box-sizing(border-box);
	}

	&.oo-ui-widget-disabled .mw-widget-dateInputWidget-handle {
		cursor: default;
	}

	> .mw-widget-calendarWidget {
		position: absolute;
		z-index: 1;
	}

	// Theme-specific styles
	width: 21em;
	margin: 0.25em 0;

	.oo-ui-inline-spacing(0.5em);

	&-handle {
		padding: 0.5em 1em;
		border: 1px solid #ccc;
		border-radius: 0.1em;
		line-height: 1.275em;
		background-color: white;
	}

	> .oo-ui-textInputWidget input {
		padding-left: 1em;
	}

	> .mw-widget-calendarWidget {
		background-color: white;
	}

	&-active > .mw-widget-calendarWidget {
		margin-top: -2px;
		// Immitate focussed input styles
		// First shadow generates bottom and right "border", second shadow generates bottom and left,
		// resulting in no "border" at the top. Note that this generates a 2px-wide "border", not 1px.
		// It makes sense when you think about it long enough and look up what each value means. Enjoy.
		// (This is symmetrical anyway, and CSSJanus can't flip it correctly. T62805)
		/* @noflip */
		box-shadow: inset -1px -1px 0 1px #347bff, inset 1px -1px 0 1px #347bff;
		border-top: 1px solid #ccc;

		&:focus {
			outline: none;
			// Add border at the top on focus
			margin-top: -3px;
			border-top: 2px solid #347bff;
		}
	}

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

	&.oo-ui-widget-disabled {
		.mw-widget-dateInputWidget-handle {
			color: #ccc;
			text-shadow: 0 1px 1px #fff;
			border-color: #ddd;
			background-color: #f3f3f3;
		}
	}

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

	&-empty {
		.mw-widget-dateInputWidget-handle {
			color: #ccc;
		}
	}
}