// Toggle buttons

.btn-toggle {
	display: inline-block;
	padding: 4px 10px 4px 4px;
	border: 1px solid mix(#ffffff, $black, 70%);
	border-radius: $borderRadiusS;
	color: $white;
	line-height: $baseLineHeight;
	background: mix(#ffffff, $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;
		@include 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;
		}
	}
}