@import url(/_plugin/common/css/input.css);

/*--------------------------------------------------*/
/*	OVERRIDES
/*--------------------------------------------------*/

.formulate.switch input  {
	display: none;
}

/*--------------------------------------------------*/
/*	ROUNDED THEME
/*--------------------------------------------------*/

/*--- already rounded ---*/

/*--------------------------------------------------*/
/*	GENERAL
/*--------------------------------------------------*/

.formulate.switch {
	display: block;

	min-width: 32px;
	height: 32px;

	line-height: 32px;
}

.formulate.switch > * {
	float: left;
}

.formulate.switch input ~ label,
.formulate.switch input ~ label:after {
	cursor: pointer;
	display: block;

	outline: none;
	user-select: none;

	border-radius: 30px;

	-webkit-transition: all 0.2s;
	   -moz-transition: all 0.2s;
	    -ms-transition: all 0.2s;
	     -o-transition: all 0.2s;
	        transition: all 0.2s;
}

.formulate.switch input ~ label {
	width: 64px;
	height: 32px;

	margin-right: 6px;
	float: left;

	background-color: rgba(150, 150, 150, 0.1);
	border: 1px solid #B5B5B5
}

.formulate.switch input ~ label:after {
	content: " ";

	position: relative;
	top: 0;
	left: 0;

	width: 24px;
	height: 24px;

	margin: 3px;

	background-color: #FFFFFF;
}

.formulate.switch p {
	display: block;

	height: 32px;
	line-height: 32px;
}

/*--------------------------------------------------*/
/*	CLICKED
/*--------------------------------------------------*/

.formulate.switch input:checked ~ label:after {
	-webkit-transform: translateX(32px);
	   -moz-transform: translateX(32px);
	    -ms-transform: translateX(32px);
	     -o-transform: translateX(32px);
	        transform: translateX(32px);
}

.formulate.switch input:checked ~ label:focus,
.formulate.switch input:checked ~ label:hover {
	outline: 0;
	border: 1px solid var(--color-outline);
}

/*--------------------------------------------------*/
/*	DISABLED
/*--------------------------------------------------*/

.formulate.switch input[disabled] ~ label,
.formulate.switch input[disabled] ~ label:after {
	text-decoration: line-through;
	cursor: not-allowed;
	color: #969696 !important;
}

.formulate.switch input[disabled] ~ label {
	background-color: #E1E1E1 !important;
}

/*--------------------------------------------------*/
/*	COLORS
/*--------------------------------------------------*/

/*--- DEFAULT ---*/
.formulate.switch input:checked ~ label,
.formulate.switch input:checked ~ label {
	background-color: var(--color-blue);
}

.formulate.switch:hover input:checked ~ label,
.formulate.switch:focus input:checked ~ label {
	background-color: var(--color-blue-light);
}

/*--- BLACK ---*/
.formulate.switch.black input:checked ~ label,
.formulate.switch.black input:checked ~ label {
	background-color: var(--color-black);
}

.formulate.switch.black:hover input:checked ~ label,
.formulate.switch.black:focus input:checked ~ label {
	background-color: var(--color-black-light);
}

/*--- GRAY ---*/
.formulate.switch.gray input:checked ~ label,
.formulate.switch.gray input:checked ~ label {
	background-color: var(--color-gray);
}

.formulate.switch.gray:hover input:checked ~ label,
.formulate.switch.gray:focus input:checked ~ label {
	background-color: var(--color-gray-light);
}

/*--- ORANGE ---*/
.formulate.switch.orange input:checked ~ label,
.formulate.switch.orange input:checked ~ label {
	background-color: var(--color-orange);
}

.formulate.switch.orange:hover input:checked ~ label,
.formulate.switch.orange:focus input:checked ~ label {
	background-color: var(--color-orange-light);
}

/*--- BLUE ---*/
.formulate.switch.blue input:checked ~ label,
.formulate.switch.blue input:checked ~ label {
	background-color: var(--color-blue);
}

.formulate.switch.blue:hover input:checked ~ label,
.formulate.switch.blue:focus input:checked ~ label {
	background-color: var(--color-blue-light);
}

/*--- CYAN ---*/
.formulate.switch.cyan input:checked ~ label,
.formulate.switch.cyan input:checked ~ label {
	background-color: var(--color-cyan);
}

.formulate.switch.cyan:hover input:checked ~ label,
.formulate.switch.cyan:focus input:checked ~ label {
	background-color: var(--color-cyan-light);
}

/*--- RED ---*/
.formulate.switch.red input:checked ~ label,
.formulate.switch.red input:checked ~ label {
	background-color: var(--color-red);
}

.formulate.switch.red:hover input:checked ~ label,
.formulate.switch.red:focus input:checked ~ label {
	background-color: var(--color-red-light);
}

/*--- YELLOW ---*/
.formulate.switch.yellow input:checked ~ label,
.formulate.switch.yellow input:checked ~ label {
	background-color: var(--color-yellow);
}

.formulate.switch.yellow:hover input:checked ~ label,
.formulate.switch.yellow:focus input:checked ~ label {
	background-color: var(--color-yellow-light);
}

/*--- GREEN ---*/
.formulate.switch.green input:checked ~ label,
.formulate.switch.green input:checked ~ label {
	background-color: var(--color-green);
}

.formulate.switch.green:hover input:checked ~ label,
.formulate.switch.green:focus input:checked ~ label {
	background-color: var(--color-green-light);
}

/*--- PURPLE ---*/
.formulate.switch.purple input:checked ~ label,
.formulate.switch.purple input:checked ~ label {
	background-color: var(--color-purple);
}

.formulate.switch.purple:hover input:checked ~ label,
.formulate.switch.purple:focus input:checked ~ label {
	background-color: var(--color-purple-light);
}