@import '../../global-sass-files/variables';

// Switcher mode
.switcher {
	&-mode {
		.switch {
			position: relative;
			display: inline-block;
			width: 141px;
			height: 27px;
			overflow: hidden;
			input {
				display: none;
			}
			&-slider {
				width: 139px;
				height: 24px;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: #f4f4f4;
				border: 1px solid #dcdcdc;
				-webkit-transition: 0.4s;
				transition: 0.4s;
				cursor: pointer;
			}
			&-slider:before {
				content: '';
				position: absolute;
				height: 22px;
				width: 19px;
				text-align: center;
				color: #373737;
				font-size: 12px;
				line-height: 14px;
				font-family: $primary-font-regular;
				line-height: 19px;
				background-color: $white-color;
				border: 1px solid #dcdcdc;
				-webkit-transition: 0.4s;
				transition: 0.4s;
				left: 0;
			}
			&-status {
				font-family: $primary-font-regular;
				line-height: 19px;
				font-size: 10px;
				position: absolute;
				cursor: pointer;
				-webkit-transition: 0.4s;
				transition: 0.4s;
				&-show {
					color: $white-color;
					left: 9px;
					top: 2px;
				}
				&-hide {
					color: #373737;
					right: 14px;
					top: 2px;
				}
			}
		}
		.switch-mode-active {
			.switch-status-hide {
				color: $white-color;
			}
			.switch-status-show {
				color: #373737;
			}
		}
		.switch-mode-hide {
			.switch-slider.switch-round:before {
				width: 87px;
			}
		}
		input:checked + .switch-slider:before {
			-webkit-transform: translateX(87px);
			-ms-transform: translateX(87px);
			transform: translateX(87px);
		}

		/* Rounded sliders */
		.switch-slider.switch-round {
			border-radius: 17px;
		}
		.switch-slider.switch-round:before {
			width: 50px;
			border-radius: 19px;
			background-color: $blue-centreon-darken;
		}
		&-title,
		&-status {
			display: block;
			color: #4e4d4d;
			font-size: 12px;
			line-height: 14px;
			font-family: $primary-font-regular;
		}
		&-title {
			margin-bottom: 10px;
			min-height: 14px;
		}
		&-status {
			margin-bottom: 5px;
		}
	}
}