//--------------------------------------------------------------------------------------------------------------------------------------------------------------
// control-input module
// Control inputs include radio buttons and checkboxes. They allow users to select one or more options.
//
// Content:
// - sass-versioning
// - globals
//--------------------------------------------------------------------------------------------------------------------------------------------------------------


@import '_globals.scss';
@import '_print.scss';


//--------------------------------------------------------------------------------------------------------------------------------------------------------------
// control inputs
//--------------------------------------------------------------------------------------------------------------------------------------------------------------
.au-control-input {
	display: inline-block;
	position: relative;

	&.au-control-input--block {
		@include AU-clearfix();
		display: block;

		& + .au-control-input--block {
			@include AU-space( margin-top, 1unit );
		}
	}
}

.au-control-input__input {
	// hiding the native element behind our SVG so for browsers that don’t support SVG have a fallback
	position: absolute;
	@include AU-space( left, 0.5unit );
	@include AU-space( top, 0.5unit );
	cursor: pointer;
	margin: 0;

	.au-control-input--small & {
		@include AU-space( left, 0.25unit );
		@include AU-space( top, 0.25unit );
	}

	& + .au-control-input__text {
		cursor: pointer;
	}

	// :invalid is split a part for IE8
	&:invalid + .au-control-input__text {
		background-color: mix( $AU-color-error, $AU-color-background, 5% );

		&:after {
			border-color: $AU-color-error;
		}
	}

	// :invalid is split a part for IE8
	.au-control-input--invalid & + .au-control-input__text {
		background-color: mix( $AU-color-error, $AU-color-background, 5% );

		&:after {
			border-color: $AU-color-error;
		}
	}

	// :invalid is split a part for IE8
	.au-control-input--dark &:invalid + .au-control-input__text, {
		background-color: mix( $AU-color-error, $AU-colordark-background, 15% );
	}

	// :invalid is split a part for IE8
	.au-control-input--dark.au-control-input--invalid & + .au-control-input__text {
		background-color: mix( $AU-color-error, $AU-colordark-background, 15% );
	}

	// :invalid is split a part for IE8
	.au-control-input--alt.au-control-input--invalid & + .au-control-input__text {
		background-color: mix( $AU-color-error, $AU-color-background-shade, 15% );
	}

	// :invalid is split a part for IE8
	.au-control-input--dark.au-control-input--alt &:invalid + .au-control-input__text {
		background-color: mix( $AU-color-error, $AU-colordark-background-alt, 15% );
	}

	// :invalid is split a part for IE8
	.au-control-input--alt.au-control-input--dark.au-control-input--invalid & + .au-control-input__text {
		background-color: mix( $AU-color-error, $AU-colordark-background-alt, 15% );
	}


	.au-control-input--valid & + .au-control-input__text {
		background-color: mix( $AU-color-success, $AU-color-background, 5% );

		&:after {
			border-color: $AU-color-success;
		}
	}

	.au-control-input--dark.au-control-input--valid & + .au-control-input__text {
		background-color: mix( $AU-color-success, $AU-colordark-background, 15% );
	}

	.au-control-input--alt.au-control-input--valid & + .au-control-input__text {
		background-color: mix( $AU-color-success, $AU-color-background-shade, 15% );
	}

	.au-control-input--alt.au-control-input--dark.au-control-input--valid & + .au-control-input__text {
		background-color: mix( $AU-color-success, $AU-colordark-background-alt, 15% );
	}

	&[type=radio] {
		& + .au-control-input__text:before,
		& + .au-control-input__text:after {
			border-radius: 50%;
		}
	}

	// disabled styling
	&[disabled] { // for IE
		cursor: not-allowed;

		& + .au-control-input__text {
			cursor: not-allowed;
		}

		& + .au-control-input__text {
			color: $AU-color-foreground-muted;
		}
	}

	&:disabled {
		cursor: not-allowed;

		& + .au-control-input__text {
			cursor: not-allowed;
		}

		& + .au-control-input__text {
			color: $AU-color-foreground-muted;
		}
	}

	.au-control-input--dark & {
		&[disabled] {
			& + .au-control-input__text {
				color: $AU-colordark-foreground-muted;
			}
		}

		&:disabled {
			& + .au-control-input__text {
				color: $AU-colordark-foreground-muted;
			}
		}
	}


	// CHECKBOXES
	&[type=checkbox] {
		// normal
		& + .au-control-input__text {
			&:before {
				@include AU-getControlShape( 'checkbox', 'background', $AU-color-foreground-text, $AU-color-background );
			}

			&:after {
				background-image: none;
			}
		}

		// normal checked
		&:checked + .au-control-input__text {
			&:after {
				@include AU-getControlShape( 'checkbox', 'foreground', $AU-color-foreground-text );
			}
		}

		// alt
		.au-control-input--alt & {
			& + .au-control-input__text:before {
				@include AU-getControlShape( 'checkbox', 'background', $AU-color-foreground-text, $AU-color-background-alt );
			}

			&:disabled {
				& + .au-control-input__text:before {
					@include AU-getControlShape( 'checkbox', 'background', mix( $AU-color-foreground-text, $AU-color-background-shade, 20% ), $AU-color-background-alt-shade );
				}
			}
		}

		// disabled
		&:disabled {
			& + .au-control-input__text:before {
				@include AU-getControlShape( 'checkbox', 'background', mix( $AU-color-foreground-text, $AU-color-background-shade, 20% ), $AU-color-background-alt );
			}

			&:checked + .au-control-input__text:after {
				@include AU-getControlShape( 'checkbox', 'foreground', mix( $AU-color-foreground-text, $AU-color-background-shade, 20% ) );
			}
		}

		// Focus
		&:focus + .au-control-input__text:before {
			@include AU-outline();
			outline-offset: 2px;
		}

		// dark
		.au-control-input--dark & {
			& + .au-control-input__text:before {
				@include AU-getControlShape( 'checkbox', 'background', $AU-colordark-foreground-text, $AU-colordark-background );
			}

			// dark checked
			&:checked + .au-control-input__text:after {
				@include AU-getControlShape( 'checkbox', 'foreground', $AU-colordark-foreground-text );
			}

			// disabled
			&:disabled {
				& + .au-control-input__text:before {
					@include AU-getControlShape( 'checkbox', 'background', mix( $AU-colordark-foreground-text, $AU-colordark-background-shade, 20% ), $AU-colordark-background-shade );
				}

				&:checked + .au-control-input__text:after {
					@include AU-getControlShape( 'checkbox', 'foreground', mix( $AU-colordark-foreground-text, $AU-colordark-background-shade, 20% ) );
				}
			}

			// Focus
			&:focus + .au-control-input__text:before {
				@include AU-outline( 'dark' );
				outline-offset: 2px;
			}
		}

		// dark alt
		.au-control-input--alt.au-control-input--dark & {
			& + .au-control-input__text:before {
				@include AU-getControlShape( 'checkbox', 'background', $AU-colordark-foreground-text, $AU-colordark-background-alt );
			}

			&:disabled {
				& + .au-control-input__text:before {
					@include AU-getControlShape( 'checkbox', 'background', mix( $AU-colordark-foreground-text, $AU-colordark-background-alt, 20% ), $AU-colordark-background-alt-shade );
				}

				&:checked + .au-control-input__text:after {
					@include AU-getControlShape( 'checkbox', 'foreground', mix( $AU-colordark-foreground-text, $AU-colordark-background-alt, 20% ) );
				}
			}
		}
	}

	// RADIOS
	&[type=radio] {
		// normal
		& + .au-control-input__text {
			&:before {
				@include AU-getControlShape( 'radio', 'background', $AU-color-foreground-text, $AU-color-background );
			}

			&:after {
				background-image: none;
			}
		}

		// normal checked
		&:checked + .au-control-input__text {
			&:after {
				@include AU-getControlShape( 'radio', 'foreground', $AU-color-foreground-text );
			}
		}

		// alt
		.au-control-input--alt & {
			& + .au-control-input__text:before {
				@include AU-getControlShape( 'radio', 'background', $AU-color-foreground-text, $AU-color-background-alt );
			}

			&:disabled {
				& + .au-control-input__text:before {
					@include AU-getControlShape( 'radio', 'background', mix( $AU-color-foreground-text, $AU-color-background-shade, 20% ), $AU-color-background-alt-shade );
				}
			}
		}

		// disabled
		&:disabled {
			& + .au-control-input__text:before {
				@include AU-getControlShape( 'radio', 'background', mix( $AU-color-foreground-text, $AU-color-background-shade, 20% ), $AU-color-background-alt );
			}

			&:checked + .au-control-input__text:after {
				@include AU-getControlShape( 'radio', 'foreground', mix( $AU-color-foreground-text, $AU-color-background-shade, 20% ) );
			}
		}

		// focus
		&:focus + .au-control-input__text:before {
			// Add 2px so it doesn't touch green or red
			@include AU-space( box-shadow, 0 0 0 0.25unit $AU-color-foreground-focus );

			.ie8 &,
			.lt-ie8 & {
				// Not using AU-focus as we are not applying :focus to this element
				@include AU-outline();
				outline-offset: 2px;
			}
		}

		// dark
		.au-control-input--dark & {
			& + .au-control-input__text:before {
				@include AU-getControlShape( 'radio', 'background', $AU-colordark-foreground-text, $AU-colordark-background );
			}

			// dark checked
			&:checked + .au-control-input__text:after {
				@include AU-getControlShape( 'radio', 'foreground', $AU-colordark-foreground-text );
			}

			// disabled
			&:disabled {
				& + .au-control-input__text:before {
					@include AU-getControlShape( 'radio', 'background', mix( $AU-colordark-foreground-text, $AU-colordark-background-shade, 20% ), $AU-colordark-background-shade );
				}

				&:checked + .au-control-input__text:after {
					@include AU-getControlShape( 'radio', 'foreground', mix( $AU-colordark-foreground-text, $AU-colordark-background-shade, 20% ) );
				}
			}

			// Focus
			&:focus + .au-control-input__text:before {
				@include AU-space( box-shadow, 0 0 0 0.25unit $AU-colordark-foreground-focus );

				.ie8 &,
				.lt-ie8 & {
					@include AU-outline( 'dark' );
					outline-offset: 2px;
				}
			}
		}

		// dark alt
		.au-control-input--alt.au-control-input--dark & {
			& + .au-control-input__text:before {
				@include AU-getControlShape( 'radio', 'background', $AU-colordark-foreground-text, $AU-colordark-background-alt );
			}

			&:disabled {
				& + .au-control-input__text:before {
					@include AU-getControlShape( 'radio', 'background', mix( $AU-colordark-foreground-text, $AU-colordark-background-alt, 20% ), $AU-colordark-background-alt-shade );
				}

				&:checked + .au-control-input__text:after {
					@include AU-getControlShape( 'radio', 'foreground', mix( $AU-colordark-foreground-text, $AU-colordark-background-alt, 20% ) );
				}
			}
		}
	}
}

/**
 * The label text
 */
.au-control-input__text {
	@include AU-fontgrid( sm );
	@include AU-space( padding, 0.25unit 0.5unit 0.5unit 2.5unit );
	@include AU-space( margin-right, 1unit );
	display: block;
	font-family: $AU-font;
	color: $AU-color-foreground-text;

	// styling for both SVG layers
	&:before,
	&:after {
		@include AU-space( width, 2.375unit );
		@include AU-space( height, 2.375unit );
		content: ' ';
		display: block;
		position: absolute;
		box-sizing: border-box;
		background-repeat: no-repeat;
		z-index: 100;
		left: -3px; // offset for 3px border focus
		top: -3px;  // offset for 3px border focus
		border: 3px solid transparent;

		.au-control-input--small & {
			@include AU-space( width, 1.75unit );
			@include AU-space( height, 1.75unit );
		}
	}

	.au-control-input--small & {
		@include AU-space( padding, 0.2unit 0.5unit 0 1.95unit );
		@include AU-space( margin-right, 1unit );
		@include AU-fontgrid( sm, nospace );
	}

	&:after {
		z-index: 101;
	}

	// Colour options
	.au-control-input--dark & {
		color: $AU-colordark-foreground-text;
	}
}