// Toggle buttons

.btn-toggle {
	display: inline-block;
	padding: 4px 10px 4px 4px;
	border: 1px solid tint(@black, 70%);
	border-radius: @borderRadiusS;
	color: @white;
	line-height: @baseLineHeight;
	background: tint(@black, 70%);
	cursor: pointer;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;

	input {
		display: none;
	}

	.btn-toggle-check {
		display: inline-block;
		width: 16px; height: 16px;
		line-height: 16px;
		.margin-right(@rtl, @spacingXs);
		border-radius: (@borderRadiusS - 1);
		background: @white;
		text-align: center;

		.vicon {
			visibility: hidden;
			font-size: 10px;
		}
	}
}

.btn-toggle-checked {
	border-color: @green2;
	background: @green2;

	.btn-toggle-check {
		.vicon {
			visibility: visible;
			color: @green2;
		}
	}
}

.btn-toggle:hover {
	border-color: darken(@green2, 3%);
	background: darken(@green2, 3%);
}

.btn-toggle-alt {
	&.btn-toggle-checked {
		border-color: @blue4;
		background: @blue4;

		.btn-toggle-check {
			.vicon {
				color: @blue4;
			}
		}
	}

	&:hover {
		border-color: darken(@blue4, 3%);
		background: darken(@blue4, 3%);
	}
}


// Toggle buttons in forms

.core-form {
	label.btn-toggle {
		display: inline-block;

		input {
			display: none;
		}
	}
}