@import (reference) "functions.less";

// Main Switch Button container
.wpbones-switch-button {
	// Theme
	&.wpbones-switch-button-flat-square input[type="checkbox"] + label {
		padding: 2px;
		width: 48px;
		height: 24px;
		vertical-align: middle;
		background-color: @wpbones-switch-theme-flat-color-off;
		.wpbones-switch-border-radius(3px);
		.wpbones-switch-transition(background 0.4s);
	}

	&.wpbones-switch-button-flat-square.disabled input[type="checkbox"] + label {
		background-color: @wpbones-switch-theme-flat-color-disabled;
	}

	&.wpbones-switch-button-flat-square:hover input[type="checkbox"] + label {
		background-color: @wpbones-switch-theme-flat-color-on;
	}

	&.wpbones-switch-button-flat-square.disabled:hover
		input[type="checkbox"]
		+ label {
		background-color: @wpbones-switch-theme-flat-color-disabled;
	}

	&.wpbones-switch-button-flat-square input[type="checkbox"] + label:before,
	&.wpbones-switch-button-flat-square input[type="checkbox"] + label:after {
		display: inline-block;
		position: absolute;
		content: "";
	}

	// inner background
	&.wpbones-switch-button-flat-square input[type="checkbox"] + label:before {
		top: 2px;
		left: 2px;
		bottom: 2px;
		right: 2px;
		background-color: #fff;
		.wpbones-switch-border-radius(2px);
		.wpbones-switch-transition(background 0.4s);
	}

	&.wpbones-switch-button-flat-square input[type="checkbox"] + label:after {
		top: 4px;
		left: 4px;
		bottom: 4px;
		width: 16px;
		background-color: @wpbones-switch-theme-flat-color-off-border;
		.wpbones-switch-border-radius(2px);
		.wpbones-switch-transition(margin 0.4s, background 0.4s;);
	}

	&.wpbones-switch-button-flat-square.disabled
		input[type="checkbox"]
		+ label:after {
		background-color: @wpbones-switch-theme-flat-color-disabled-border;
	}

	&.wpbones-switch-button-flat-square:hover
		input[type="checkbox"]:checked
		+ label {
		background-color: @wpbones-switch-theme-flat-color-off;
	}

	&.wpbones-switch-button-flat-square input[type="checkbox"]:checked + label {
		background-color: @wpbones-switch-theme-flat-color-on;
	}

	&.wpbones-switch-button-flat-square.disabled
		input[type="checkbox"]:checked
		+ label {
		background-color: @wpbones-switch-theme-flat-color-disabled;
	}

	&.wpbones-switch-button-flat-square
		input[type="checkbox"]:checked
		+ label:after {
		margin-left: 24px;
		background-color: @wpbones-switch-theme-flat-color-on-border;
	}

	&.wpbones-switch-button-flat-square.disabled
		input[type="checkbox"]:checked
		+ label:after {
		margin-left: 24px;
		background-color: @wpbones-switch-theme-flat-color-disabled-border;
	}

	&.wpbones-switch-button-flat-square {
		&.wpbones-switch-mode-select {
			input[type="checkbox"] + label:after,
			&:hover input[type="checkbox"]:checked + label,
			input[type="checkbox"] + label {
				background-color: @wpbones-switch-theme-flat-color-on !important;
			}
		}
	}
}