//@import "../../../abstracts/abstracts";

.dbq-switch {
	border-radius: 10px;
	background: #ffffff;
	border: 2px solid #ced4da;
	&:hover {
		.dbq-switch-handle {
			background: grey;
			border: 2px solid grey;
		}
	}
}
.dbq-switch-theme {
	width: 200px;
	float: left;
	height: 20px;
	padding: 13px 0;
	position: relative;
	margin: 7px 15px;
	.dbq-switch-handle {
		width: 100px;
		font-size: 12px;
		line-height: 12px;
		font-weight: 500;
		text-align: center;
		padding: 4px 0;
		position: absolute;
		top: 1px;
		left: 1px;
		height: 24px;
	}
	.dbq-switch-input {
		&:checked {
			~ {
				.dbq-switch-handle {
					left: 95px;
				}
			}
		}
	}
}
.dbq-switch-input {
	opacity: 0;
	top: 0;
	left: 0;
	box-sizing: content-box;
	position: absolute;
	width: 100%;
	z-index: 999;
	cursor: pointer;
	height: 26px;
	&:checked {
		~ {
			.dbq-switch-text {
				background: #ffffff;
				&:after {
					opacity: 1;
				}
			}
			.dbq-switch-handle {
				color: #ffffff;
				background: #000000;
				border: 2px solid #000000;
				border-radius: 7px;
			}
		}
		&:hover {
			~ {
				.dbq-switch-handle {
					background: grey;
					border: 2px solid grey;
				}
			}
		}
	}
}
.dbq-switch-text {
	background: 0;
	border-radius: inherit;
	&:before {
		content: attr(data-off);
		color: #000000;
		right: 0;
		width: calc(50% - 2px);
		text-align: center;
		position: absolute;
		top: 50%;
		margin-top: -6px;
		font-size: 12px;
		line-height: 12px;
		font-weight: 600;
		box-sizing: content-box;
	}
	&:after {
		content: attr(data-on);
		color: #000000;
		left: 0;
		width: calc(50% - 2px);
		text-align: center;
		position: absolute;
		top: 50%;
		margin-top: -6px;
		font-size: 12px;
		line-height: 12px;
		font-weight: 600;
		box-sizing: content-box;
	}
}
.dbq-switch-handle {
	border-radius: 7px;
	background: #000000;
	border: 2px solid #000000;
	color: #ffffff;
	&:before {
		background: linear-gradient(to bottom, #eeeeee, #ccc);
		background-image: -webkit-linear-gradient(top, #eeeeee, #ccc);
		border-radius: 7px;
	}
}

.dbq-switch {
	background: transparent;
	border: 2px solid $navbar-dropdown-border-color;

	.dbq-switch-text {
		&::before,
		&::after {
			color: $navbar-dropdown-menu-text-color;
		}
	}

	.dbq-switch-handle {
		@include border-radius(8px);
		background: $switch-handle;
		border-color: $switch-handle;
		left: 0px;
		top: 0px;
		height: 26px;
		padding: 5px 0px;
	}

	.dbq-switch-input:checked ~ .dbq-switch-handle {
		left: 96px;
	}
}