/*
==================
    Switches
==================
*/
/* The switch - the box around the slider */
/* Hide default HTML checkbox */
/* The slider */
/* Rounded Slider Switches */
.switch {
	position: relative;
	display: inline-block;
	width: 35px;
	height: 18px;
	input {
		display: none;
		&:checked {
			&+.slider {
				&:before {
					-webkit-transform: translateX(17px);
					-ms-transform: translateX(17px);
					transform: translateX(17px);
				}
			}
		}
	}
	.slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: $light-gray;
		-webkit-transition: .4s;
		transition: .4s;
		&:before {
			position: absolute;
			content: "";
			background-color: $white;
			-webkit-transition: .4s;
			-ms-transition: .4s;
			transition: .4s;
			height: 14px;
			width: 14px;
			left: 2px;
			bottom: 2px;
			box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34);
		}
	}
	.slider.round {
		border-radius: 34px;
		&:before {
			border-radius: 50%;
		}
	}
}


/* Solid Switches*/

.switch.s-default {
	input {
		&:checked {
			&+.slider {
				background-color: $color_38;
			}
		}
		&:focus {
			&+.slider {
				box-shadow: 0 0 1px $light-gray;
			}
		}
	}
}
.switch.s-primary {
	input {
		&:checked {
			&+.slider {
				background-color: $primary;
			}
		}
		&:focus {
			&+.slider {
				box-shadow: 0 0 1px $primary;
			}
		}
	}
}
.switch.s-success {
	input {
		&:checked {
			&+.slider {
				background-color: $success;
			}
		}
		&:focus {
			&+.slider {
				box-shadow: 0 0 1px $success;
			}
		}
	}
}
.switch.s-warning {
	input {
		&:checked {
			&+.slider {
				background-color: $warning;
			}
		}
		&:focus {
			&+.slider {
				box-shadow: 0 0 1px $warning;
			}
		}
	}
}
.switch.s-danger {
	input {
		&:checked {
			&+.slider {
				background-color: $danger;
			}
		}
		&:focus {
			&+.slider {
				box-shadow: 0 0 1px $danger;
			}
		}
	}
}
.switch.s-secondary {
	input {
		&:checked {
			&+.slider {
				background-color: $secondary;
			}
		}
		&:focus {
			&+.slider {
				box-shadow: 0 0 1px $secondary;
			}
		}
	}
}
.switch.s-info {
	input {
		&:checked {
			&+.slider {
				background-color: $info;
			}
		}
		&:focus {
			&+.slider {
				box-shadow: 0 0 1px $info;
			}
		}
	}
}
.switch.s-dark {
	input {
		&:checked {
			&+.slider {
				background-color: $dark;
			}
		}
		&:focus {
			&+.slider {
				box-shadow: 0 0 1px $dark;
			}
		}
	}
}

/* Outline Switches */

.switch.s-outline {
	.slider {
		border: 2px solid $color_41;
		background-color: $color_none;
		width: 36px;
		height: 19px;
		&:before {
			height: 13px;
			width: 13px;
		}
	}
}
.switch.s-outline[class*="s-outline-"] {
	.slider {
		&:before {
			bottom: 1px;
			left: 1px;
			border: 2px solid $color_39;
			background-color: $color_39;
			color: $color_40;
			box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.25);
		}
	}
}
.switch.s-icons.s-outline-default {
	color: $color_38;
}
.switch.s-icons.s-outline-primary {
	color: $primary;
}
.switch.s-icons.s-outline-success {
	color: $success;
}
.switch.s-icons.s-outline-warning {
	color: $warning;
}
.switch.s-icons.s-outline-danger {
	color: $danger;
}
.switch.s-icons.s-outline-secondary {
	color: $secondary;
}
.switch.s-icons.s-outline-info {
	color: $info;
}
.switch.s-icons.s-outline-dark {
	color: $dark;
}
.switch.s-outline-default {
	input {
		&:checked {
			&+.slider {
				border: 2px solid $color_41;
				&:before {
					border: 2px solid $color_38;
					background-color: $color_38;
					box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.25);
				}
			}
		}
		&:focus {
			&+.slider {
				box-shadow: 0 0 1px $light-gray;
			}
		}
	}
}
.switch.s-outline-primary {
	input {
		&:checked {
			&+.slider {
				border: 2px solid $primary;
				&:before {
					border: 2px solid $primary;
					background-color: $primary;
					box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34);
				}
			}
		}
		&:focus {
			&+.slider {
				box-shadow: 0 0 1px $primary;
			}
		}
	}
}
.switch.s-outline-success {
	input {
		&:checked {
			&+.slider {
				border: 2px solid $success;
				&:before {
					border: 2px solid $success;
					background-color: $success;
					box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34);
				}
			}
		}
		&:focus {
			&+.slider {
				box-shadow: 0 0 1px $success;
			}
		}
	}
}
.switch.s-outline-warning {
	input {
		&:checked {
			&+.slider {
				border: 2px solid $warning;
				&:before {
					border: 2px solid $warning;
					background-color: $warning;
					box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34);
				}
			}
		}
		&:focus {
			&+.slider {
				box-shadow: 0 0 1px $warning;
			}
		}
	}
}
.switch.s-outline-danger {
	input {
		&:checked {
			&+.slider {
				border: 2px solid $danger;
				&:before {
					border: 2px solid $danger;
					background-color: $danger;
					box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34);
				}
			}
		}
		&:focus {
			&+.slider {
				box-shadow: 0 0 1px $danger;
			}
		}
	}
}
.switch.s-outline-secondary {
	input {
		&:checked {
			&+.slider {
				border: 2px solid $secondary;
				&:before {
					border: 2px solid $secondary;
					background-color: $secondary;
					box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34);
				}
			}
		}
		&:focus {
			&+.slider {
				box-shadow: 0 0 1px $secondary;
			}
		}
	}
}
.switch.s-outline-info {
	input {
		&:checked {
			&+.slider {
				border: 2px solid $info;
				&:before {
					border: 2px solid $info;
					background-color: $info;
					box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34);
				}
			}
		}
		&:focus {
			&+.slider {
				box-shadow: 0 0 1px $info;
			}
		}
	}
}
.switch.s-outline-dark {
	input {
		&:checked {
			&+.slider {
				border: 2px solid $dark;
				&:before {
					border: 2px solid $dark;
					background-color: $dark;
					box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34);
				}
			}
		}
		&:focus {
			&+.slider {
				box-shadow: 0 0 1px $dark;
			}
		}
	}
}


/*  Icons Switches */
.switch.s-icons {
	width: 57px;
	height: 30px;
	.slider {
		width: 48px;
		height: 25px;
		&:before {
			font-family: $font_family_1 !important;
			content: "\e942";
			vertical-align: sub;
			color: $additional-color-11;
			height: 19px;
			width: 19px;
			font-size: 11px;
			line-height: 1.3;
		}
	}
	input {
		&:checked {
			&+.slider {
				&:before {
					font-family: $font_family_1 !important;
					content: "\f2e2";
					vertical-align: sub;
					color: $white;
					font-size: 11px;
					line-height: 1.4;
					-webkit-transform: translateX(23px);
					-ms-transform: translateX(23px);
					transform: translateX(23px);
				}
			}
		}
	}
}


/*      Material Switches   */
.custom-control.material-switch {
	color: $success;
	padding-left: 0;
	.material-switch-control-input {
		display: none;
		&:checked {
			&~.material-switch-control-indicator {
				&::after {
					left: 20px;
				}
			}
		}
	}
	.material-switch-control-indicator {
		display: inline-block;
		position: relative;
		margin: 0 10px;
		top: 4px;
		width: 34px;
		height: 16px;
		background: $color_41;
		transition: .3s;
		cursor: pointer;
		&::after {
			content: '';
			display: block;
			position: absolute;
			width: 18px;
			height: 18px;
			transition: .3s;
			top: -1px;
			left: -1px;
			background: $color_42;
			box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.25);
		}
	}
}
.custom-control.material-switch.material-default {
	.material-switch-control-input {
		&:checked {
			&~.material-switch-control-indicator {
				&::after {
					background-color: $default;
				}
			}
		}
	}
}
.custom-control.material-switch.material-primary {
	.material-switch-control-input {
		&:checked {
			&~.material-switch-control-indicator {
				&::after {
					background-color: $primary;
				}
			}
		}
	}
}
.custom-control.material-switch.material-success {
	.material-switch-control-input {
		&:checked {
			&~.material-switch-control-indicator {
				&::after {
					background-color: $success;
				}
			}
		}
	}
}
.custom-control.material-switch.material-warning {
	.material-switch-control-input {
		&:checked {
			&~.material-switch-control-indicator {
				&::after {
					background-color: $warning;
				}
			}
		}
	}
}
.custom-control.material-switch.material-danger {
	.material-switch-control-input {
		&:checked {
			&~.material-switch-control-indicator {
				&::after {
					background-color: $danger;
				}
			}
		}
	}
}
.custom-control.material-switch.material-secondary {
	.material-switch-control-input {
		&:checked {
			&~.material-switch-control-indicator {
				&::after {
					background-color: $secondary;
				}
			}
		}
	}
}
.custom-control.material-switch.material-info {
	.material-switch-control-input {
		&:checked {
			&~.material-switch-control-indicator {
				&::after {
					background-color: $info;
				}
			}
		}
	}
}
.custom-control.material-switch.material-dark {
	.material-switch-control-input {
		&:checked {
			&~.material-switch-control-indicator {
				&::after {
					background-color: $dark;
				}
			}
		}
	}
}
.custom-control.material-switch.material-s-rounded {
	.material-switch-control-indicator {
		border-radius: 16px;
		&::after {
			border-radius: 50%;
		}
	}
}