//
// Mode Switcher
//

#qazana-mode-switcher {
	position: absolute;
	@include start(100%);
	top: 50%;
	width: 15px;
	height: 50px;
	transform: translateY(-50%);
	background-color: $editor-background;
	font-size: 15px;
	@include direction-box-shadow(3px, 1px 5px rgba(0, 0, 0, 0.1));
	cursor: pointer;

	&:hover {
		background-color: $editor-accent;
		color: #FFFFFF;
	}
}

body.qazana-editor-preview {

	#qazana-mode-switcher {
		background-color: $editor-accent;
		color: #FFFFFF;
	}
}

#qazana-mode-switcher-inner, #qazana-mode-switcher-preview {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#qazana-mode-switcher-preview {
	cursor: pointer;

	.fa {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
	}
}

#qazana-mode-switcher-preview-input {
	display: none;
}