/* ------------------------------------------------------------------------------
 *
 *  # Uniform form inputs plugin
 *
 *  Styles for uniform.min.js - form components styling
 *
 *  Version: 1.0
 *  Latest update: Mar 10, 2015
 *
 * ---------------------------------------------------------------------------- */


// Chckbox
// ------------------------------

// Base
.checker {
	position: relative;
	display: inline-block;
	cursor: pointer;
	vertical-align: middle;

	// Set general size
	&,
	span,
	input {
		width: @checkbox-size;
		height: @checkbox-size;
	}

	// Checkbox setup
	span {
		color: @color-slate-700;
		border: @checkbox-border-width solid @color-slate-500;
		display: inline-block;
		text-align: center;
		position: relative;

		// Checkmark icon
		&:after {
			content: "\e600";
			font-family: 'icomoon';
			display: none;
			font-size: @icon-font-size;
			line-height: 1;
			position: absolute;
			top: (@checkbox-size - @icon-font-size - (@checkbox-border-width * 2)) / 2;
			left: (@checkbox-size - @icon-font-size - (@checkbox-border-width * 2)) / 2;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		// Checked style
		&.checked {
			&:after {
				display: block;
			}
		}
	}

	// Hide original checkbox
	input[type=checkbox] {
		border: none;
		background: none;
		display: -moz-inline-box;
		display: inline-block;
		margin: 0;
		vertical-align: top;
		cursor: pointer;
		position: absolute;
		top: -(@checkbox-border-width);
		left: -(@checkbox-border-width);
		z-index: 2;
		.opacity(0);
	}


	//
	// Posiitons
	//

	// Left checkbox
	.checkbox &,
	.checkbox-inline & {
		position: absolute;
		top: ((@line-height-computed - @checkbox-size) / 2);
		left: 0;
	}

	// Horizontal form correction
	.form-horizontal .checkbox &,
	.form-horizontal .checkbox-inline & {
		top: ((@padding-base-vertical + 1) + (@line-height-computed / 2) - (@checkbox-size / 2));
	}

	// Right checkbox
	.checkbox-right & {
		left: auto;
		right: 0;
	}


	//
	// States
	//

	// Active state
	&.active,
	.checkbox > label:active &,
	.checkbox-inline:active & {
		span {
			&:after {
				display: block;
				.opacity(0.75);
			}
		}
	}

	// Disabled
	&.disabled {
		.opacity(0.5);

		// Disable cursor
		&,
		input[type=checkbox] {
			cursor: @cursor-disabled;
		}

		// When label is clicked
		.checkbox > label:active &,
		.checkbox-inline:active & {
			span:after {
				.opacity(0);
			}

			span.checked:after {
				.opacity(1);
			}
		}
	}


	//
	// Custom colors
	//

	&[class*=border-] {

		// Inherit colors
		span {
			border-color: inherit;
			color: inherit;
		}
	}
}

// Update checker colors in dropdown variations
.dropdown-menu > .active:not(.disabled),
.dropdown-menu[class*=bg-],
.navbar-inverse .navbar-form,
.sidebar:not(.sidebar-default) .checkbox {
	.checker {
		span {
			border-color: #fff;
			color: #fff;
		}
	}
}



// Radio
// ------------------------------

// Base
.choice {
	position: relative;
	display: inline-block;
	cursor: pointer;
	vertical-align: middle;
	border-radius: 100%;

	// Set general size
	&,
	span,
	input {
		width: @checkbox-size;
		height: @checkbox-size;
	}

	// Radio setup
	span {
		border: @checkbox-border-width solid @color-slate-500;
		display: -moz-inline-box;
		display: inline-block;
		border-radius: 100%;
		text-align: center;
		position: relative;

		// Add colored circle
		&:after {
			content: "";
			position: absolute;
			top: ((@checkbox-size / 2) - @checkbox-border-width - ((@checkbox-size - 10) / 2));
			left: ((@checkbox-size / 2) - @checkbox-border-width - ((@checkbox-size - 10) / 2));
			border: ((@checkbox-size - 10) / 2) solid;
			border-color: inherit;
			width: 0;
			height: 0;
			border-radius: 100%;
			display: none;
		}

		// Checked style
		&.checked {
			&:after {
				display: block;
			}
		}
	}

	// Hide radio
	input[type=radio] {
		&:extend(.checker input[type=checkbox]);
	}


	//
	// Posiitons
	//

	// Left radio
	.radio &,
	.radio-inline & {
		position: absolute;
		top: ((@line-height-computed - @checkbox-size) / 2);
		left: 0;
	}

	// Horizontal form correction
	.form-horizontal .radio &,
	.form-horizontal .radio-inline & {
		top: ((@padding-base-vertical + 1) + (@line-height-computed / 2) - (@checkbox-size / 2));
	}

	// Right radio
	.radio-right & {
		left: auto;
		right: 0;
	}


	//
	// States
	//

	// Active state
	&.active,
	.radio > label:active &,
	.radio-inline:active & {
		span {
			&:after {
				display: block;
				.opacity(0.75);
			}
		}
	}

	// Disabled
	&.disabled {
		.opacity(0.5);

		// Disable cursor
		&,
		input[type=radio] {
			cursor: @cursor-disabled;
		}

		// When label is clicked
		.radio > label:active &,
		.radio-inline:active & {
			span:after {
				.opacity(0);
			}

			span.checked:after {
				.opacity(1);
			}
		}
	}


	//
	// Custom colors
	//

	&[class*=border-] {
		span {
			border-color: inherit;

			&:after {
				border-color: inherit;
			}
		}
	}
}

// Update checker colors in dropdown variations
.dropdown-menu > .active,
.dropdown-menu[class*=bg-],
.navbar-inverse .navbar-form,
.sidebar:not(.sidebar-default) .checkbox {
	.choice {
		span {
			border-color: #fff;
		}
	}
}



// File uploader
// ------------------------------

// Base
.uploader {
	width: 100%;
	position: relative;
	display: -moz-inline-box;
	display: inline-block;
	vertical-align: middle;
	border-radius: (@input-border-radius + 1);

	// File name text
	.filename {
		color: @gray-light;
		height: @input-height-base;
		padding: @padding-base-vertical @padding-base-horizontal;
		padding-right: (@input-height-base * 1.25);
		cursor: pointer;
		width: 100%;
		float: left;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		cursor: default;
		border: 1px solid @input-border;
		background-color: #fff;
		border-radius: @input-border-radius;
		text-align: left;
	}

	// Action button
	.action {
		position: absolute;
		color: @text-color;
		top: 0;
		right: 0;
		width: @input-height-base;
		height: @input-height-base;
		cursor: pointer;
		z-index: 1;
		border: 1px solid @input-border;
		.border-right-radius(@input-border-radius);

		> i {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -(@icon-font-size / 2);
			margin-left: -(@icon-font-size / 2);
		}
	}
	&[class*=bg-] .action {
		background-color: inherit;
		border-color: inherit;
		color: inherit;
	}

	// Hide file input
	input[type=file] {
		width: 100%;
		margin-top: 0;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		height: @input-height-base;
		border: 0;
		cursor: pointer;
		z-index: 10;
		.opacity(0);
	}

	// Disabled state
	&.disabled {
		.action {
			.opacity(0.6);
		}
		.filename {
			background-color: @input-bg-disabled;
			cursor: @cursor-disabled;
		}
	}
}


//
// Sizing
//

// Large
.uploader-lg {
	input[type=file],
	.action,
	.filename {
		height: @input-height-large;
	}

	.action {
		width: @input-height-large;
	}

	.filename {
		padding-top: @padding-large-vertical;
		padding-bottom: @padding-large-vertical;
		padding-right: (@input-height-large * 1.25);
	}
}

// Small
.uploader-sm {
	input[type=file],
	.action,
	.filename {
		height: @input-height-small;
	}

	.action {
		width: @input-height-small;
	}

	.filename {
		padding-top: @padding-small-vertical;
		padding-bottom: @padding-small-vertical;
		padding-right: (@input-height-small * 1.25);
	}
}

// Mini
.uploader-xs {
	input[type=file],
	.action,
	.filename {
		height: @input-height-mini;
	}

	.action {
		width: @input-height-mini;
	}

	.filename {
		padding-top: @padding-xs-vertical;
		padding-bottom: @padding-xs-vertical;
		padding-right: (@input-height-small * 1.25);
	}
}
