@import 'mediawiki.mixins.less';
@import 'mediawiki.ui/variables.less';

// Checkbox
//
// Styling checkboxes in a way that works cross browser is a tricky problem to solve.
// In MediaWiki UI put a checkbox and label inside a mw-ui-checkbox div.
// This renders in all browsers except IE 6-8 which do not support the `:checked` selector;
// these are kept backwards-compatible using the `:not( #noop )` selector.
// You should give the checkbox and label matching `id` and `for` attributes, respectively.
//
// Markup:
// <div class="mw-ui-checkbox">
//   <input type="checkbox" id="component-example-3">
//   <label for="component-example-3">Standard checkbox</label>
// </div>
// <div class="mw-ui-checkbox">
//   <input type="checkbox" id="component-example-3-checked" checked>
//   <label for="component-example-3-checked">Standard checked checkbox</label>
// </div>
// <div class="mw-ui-checkbox">
//   <input type="checkbox" id="component-example-3-disabled" disabled>
//   <label for="component-example-3-disabled">Disabled checkbox</label>
// </div>
// <div class="mw-ui-checkbox">
//   <input type="checkbox" id="component-example-3-disabled-checked" disabled checked>
//   <label for="component-example-3-disabled-checked">Disabled checked checkbox</label>
// </div>
.mw-ui-checkbox {
	display: inline-block;
	line-height: @size-input-binary;
	vertical-align: middle;
}

// We use the `:not` selector to cancel out styling on IE 8 and below
// Note: This may be broken on older Opera Mini devices.
.mw-ui-checkbox:not( #noop ) {
	display: table;
	// Position relatively so we can make use of absolute pseudo elements
	position: relative;

	* {
		// Reset font sizes, see T74727
		font-size: inherit;
		vertical-align: middle;
	}

	[ type='checkbox' ] {
		display: table-cell;
		position: relative;
		// Ensure the invisible input takes up the required `width` & `height`
		width: @size-input-binary;
		height: @size-input-binary;
		// Support: Firefox mobile to override user-agent stylesheet, see T73750
		max-width: none;
		margin: 0;
		// Hide `input[type=checkbox]` and instead style the label that follows
		// Support: VoiceOver. Use `opacity` so that VoiceOver can still identify the checkbox
		opacity: 0;
		// Render *on top of* the label, so that it's still clickable, see T98905
		z-index: 1;

		& + label {
			display: table-cell;
			padding-left: 0.4em;
		}

		// Pseudo `:before` element of the label after the checkbox now looks like a checkbox
		& + label:before {
			content: '';
			background-color: #fff;
			background-origin: border-box;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 0 0;
			.box-sizing( border-box );
			position: absolute;
			// Ensure alignment of checkbox to middle of the text in long labels, see T85241
			top: 50%;
			left: 0;
			width: @size-input-binary;
			height: @size-input-binary;
			margin-top: -( @size-input-binary / 2 );
			border: 1px solid @colorGray7;
			border-radius: @border-radius-base;
		}

		// Apply a checkmark on the pseudo `:before` element when the input is checked.
		&:checked + label:before {
			background-image: url( images/checkbox-checked.svg );
			background-size: 90% 90%;
		}

		&:enabled {
			cursor: pointer;

			& + label {
				cursor: pointer;
			}

			& + label:before {
				cursor: pointer;
				.transition( ~'background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms' );
			}

			// `:focus` has to come first, otherwise a specificity race with `:hover:focus` etc is necessary
			&:focus + label:before {
				border-color: @border-color-base--focus;
				box-shadow: @box-shadow-base--focus;
			}

			&:hover + label:before {
				// FIXME: Replace with WikimediaUI Base `@border-color*` var when available.
				border-color: @color-primary--hover;
			}

			&:active + label:before {
				background-color: @background-color-input-binary--active;
				border-color: @border-color-input-binary--active;
				box-shadow: @box-shadow-input-binary--active;
			}

			&:checked {
				& + label:before {
					background-color: @background-color-input-binary--checked;
					border-color: @border-color-input-binary--checked;
				}

				&:focus + label:before {
					background-color: @background-color-input-binary--checked;
					border-color: @border-color-input-binary--checked;
					box-shadow: @box-shadow-primary--focus;
				}

				&:hover + label:before {
					// FIXME: Replace with WikimediaUI Base vars when available.
					background-color: @color-primary--hover;
					border-color: @color-primary--hover;
				}

				&:active + label:before {
					background-color: @background-color-input-binary--active;
					border-color: @border-color-input-binary--active;
				}
			}
		}

		// disabled checkboxes have a gray background
		&:disabled + label:before {
			background-color: @colorGray12;
			border-color: @colorGray12;
		}
	}
}