.editor-bar {
	transition: .4s;
	padding: .1em;
	background: dodgerblue;
	position: absolute;

	&.off {
		transform: scale(0, 1);
	}
}

.design-text {
	background: transparent !important;
	border: 0 !important;
	margin: 0;
	padding: 0;
	display: inline-block;
}

.dashboard-designer .designer-head.dark div.designer-logo {
	background: #31568e !important;
}

.dashboard-designer .designer-head.light div.designer-logo {
	background: #709de3 !important;
}

.dashboard-designer .designer-head div.designer-logo {
	width: 48px;
	height: 48px;
	margin: 0 !important;
	display: inline-block;
	transition: .3s ease;

	cursor: pointer;

	> .designer-logo-bar {
		position: relative;
		left: 48px;
		display: inline-block;
		width: 0;
		height: 48px;
		background: rgba(0, 0, 0, .2);
		transition: .3;
	}

	&:hover {
		width: 168px;

		> .designer-logo-bar {
			width: 120px;
		}
	}
}

.design-move {
	cursor: grabbing !important;
}

.designer-view {
	.pointer-tool {
		
	}

	&.pen-tool {
		cursor: pointer;
	}

	&.square-tool {
		cursor: crosshair;
	}

	&.circle-tool {
		cursor: crosshair;
	}

	&.text-tool {
		cursor: text;
	}
}

.designer-container {
	opacity: 0;
	transition: opacity .1s;
	position: absolute;
	border: .5px solid dodgerblue;
	pointer-events: none;
	
	&.open {
		opacity: 1;

		.designer-grab, .designer-rotate {
			pointer-events: all;
		}
	}

	&.design-view-mode {
		.designer-grab {
			opacity: 0;
			pointer-events: none;
		
			&[data-x="0"][data-y="1"] {
				opacity: 1;
				pointer-events: all;
			}
		}
	}

	--zoom-size: 1px;
}

.designer-rotate {
	pointer-events: none;
	background: transparent;
	border-radius: 1000px;
	width: 10px;
	height: 10px;
	margin: -5px;
	position: absolute;
	cursor: url("/resources/dashboard/rotate.png") 8 8, auto;
}

.designer-grab {
	pointer-events: none;
	background: white;
	border-radius: 1000px;
	width: 10px;
	height: 10px;
	margin: -5px;
	position: absolute;
	border: .5px solid dodgerblue;
	cursor: move;
	
	&:hover {
		background: dodgerblue;
	}

	&[data-x="1"][data-y="1"] {
		cursor: se-resize;
	}

	&[data-x="0"][data-y="1"] {
		cursor: s-resize;
	}

	&[data-x="-1"][data-y="1"] {
		cursor: sw-resize;
	}

	&[data-x="1"][data-y="-1"] {
		cursor: ne-resize;
	}

	&[data-x="0"][data-y="-1"] {
		cursor: n-resize;
	}

	&[data-x="-1"][data-y="0"] {
		cursor: w-resize;
	}

	&[data-x="1"][data-y="0"] {
		cursor: e-resize;
	}

	&[data-x="-1"][data-y="-1"] {
		cursor: nw-resize;
	}
}

.designer-page {
	transition: .3s;

	svg {
		z-index: 99999;
	}

	&.selected {
		> .designer-label {
			color: rgb(98, 177, 255) !important;
		}
	}

	.root-block {
		width: 100%;
		height: 100%;
	}
}

div.designer-bar {
	&.dark {
		color: white;
		background: #36373a !important;
	}

	&.light {
		background: #f7f7f7 !important;
		color: rgb(90, 90, 90);
	}

	width: 48px;
	line-height: 48px;
	text-align: center;

	.designer-tool {
		font-size: 20px;
		padding: 2px 0px;
		transition: .5s;

		&.selected {
			color: #508fcc;
		}
	}

	.designer-tab {
		font-size: 20px;
		padding: 14px 0px;
		transition: .5s;
		bottom: 0;
		position: absolute;
		width: 48px;

		&.selected {
			color: #508fcc;
		}
	}
}

div.designer-mode {
	background: transparent;

	&.dark {
		color: white;
	}

	&.light {
		color: rgb(90, 90, 90) !important;
	}

	& > span {
		padding: 8px;
		font-size: 16px;
		text-shadow: black 0px 0px 1px;

		&.selected {
			color: #508fcc;
		}
	}
}

.designer-point {
	opacity: 0;
	display: inline-block;
	position: absolute;
	margin: -4px;
	border-radius: 100%;
	color: red;
	font-size: 8px;
}

.designer-selected {
	//outline: .1px solid dodgerblue;
}

.designer-guide {
	display: inline-block;
	position: absolute;
	background: purple;
	height: 1px;
	z-index: 10000;
	width: 0px;
	pointer-events: none;
}

.designer-label {
	position: absolute;
	top: -24px;
}

.dashboard-designer-no-edit {
	box-shadow: inset #000000a8 0px 0px 0px 1000px;
	opacity: .2;
	pointer-events: none;
}

.dashboard-designer-can-edit {
	box-shadow: unset;
    opacity: unset;
    pointer-events: unset;
}

.dashboard-designer-main {
	& > h3 {
		color: rgba(255,255,255,.4);
		cursor: default;
	}

	.title {
		font-size: 1.1em;
	}

	.name {
		color: #0279b1;
	}
}

.dashboard-designer {
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;

	.designer-contain {
		z-index: 10000;
		background: rgba(158, 97, 187, 0.253) !important;
		display: block !important;
	}
	
	.design-contain {
		position: fixed;
		display: none;
		user-select: none;
		-moz-user-select: none;
		pointer-events: none;
	}

	label.header {
		margin: .4em;
	}

	&.dark {
		.block {
			background: #36373a !important;
			color: #d1d1d1;
			padding: .5em;
			text-transform: uppercase;

			&:hover {
				background: #3a3b3d;
			}
		}

		input {
			color: white;
		}

		label.header {
			font-size: .9em;
			color: #5d5d5d;
		}

		label {
			font-size: .8em;
			color: #5d5d5d;
		}
	}

	.dropdown {
		> li {
			//background: white;
		}
	}

	&.light {
		.block {
			background: #ebebeb !important;
			color: #2c2d2f;
			padding: .5em;
			text-transform: uppercase;

			&:hover {
				background: rgb(187, 188, 192) !important;
			}
		}

		input {
			color: black;
		}
		
		label.header {
			font-size: .9em;
			color: #9da0a2 !important;
		}

		label {
			font-size: .8em;
			color: #9da0a2 !important;
		}
	}

	.designer-head {
		max-height: 48px;
		flex: 1 auto;

		> * {
			margin: 6px !important;
		}

		&.light {
			border-bottom: 1px solid #d2d2d2;
			background: #f7f7f7 !important;

			.button, .dropdown {
				background: #d6d6d6 !important;
				color: black;
	
				&.dropdown {
					border: none;
				}
	
				&:hover {
					background: #cfcfcf !important;
				}
			}
		}

		&.dark {
			border-bottom: 1px solid #424040;
			background: #2c2d2f !important;

			.button, .dropdown {
				background: #37383a;
				&.dropdown {
					border: none;
				}
				color: white;
	
				&:hover {
					background: #2f3031;
				}
			}
		}
	}

	.text-editor {
		margin: 0px;
		width: 100%;
		background: transparent;
		border: none;
		padding: 0;
		cursor: text;
		overflow: visible;
		white-space: inherit;
		display: inline-block;
		resize: none;

		&:empty::after {
			padding: 1em;
			color: rgba(255, 255, 255, .5);
			content: "Text";
		}
	}

	.designer-body {
		display: flex;
		flex-direction: row;
		flex: 1;
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;

		.designer-clear {
			border: none;
			font-size: 16px;
			background: transparent;
			width: 70%;

			&:focus {
				outline: none;
				border-bottom: dodgerblue 1px solid;
				margin-bottom: -1px;
			}
		}

		.designer-toolbox {
			flex: 1 auto;
			max-width: 250px;
			width: 250px;
			overflow: auto;
			display: none;

			&.selected {
				display: inline-block;
			}

			&.object-list {
				.list-object {
					padding: 8px;
					padding-left: 1em;

					transition: .3s;
					background: rgba(0, 0, 0, 0);
					cursor: pointer;

					.list-object {
						margin-left: -.5em;
						

						
					}

					.icon {
						
					}

					&:hover {
						background: rgba(29, 152, 235, 0.226);
					}

					&.selected {
						border-left: dodgerblue 1px solid;
					}
				}
			}

			&.dragging {
				overflow: visible;
			}

			&::-webkit-scrollbar {
				width: 6px;
				height: 6px;
			}

			&::-webkit-scrollbar-track {
				background: none; 
			}

			&::-webkit-scrollbar-thumb {
				background: #888; 
			}

			&::-webkit-scrollbar-thumb:hover {
				background: #555; 
			}
			
			.block {
				transition: background .3s;
				cursor: pointer;
				padding: .5em;
				user-select: none;
				-moz-user-select: none;
				-webkit-user-select: none;
				text-transform: uppercase;
				font-weight: 700;
				margin: .2em .4em;

				img {
					width: 48px;
					max-height: 100%;
					vertical-align: middle;
				}

				label {
					cursor: pointer;
				}
			}

			&.light {
				background: #f7f7f7 !important;
				border-right: #e4e4e4 solid 1px;

				.block {
					background: #ebebeb;
					color: #2c2d2f;

					&:hover {
						background: rgb(187, 188, 192);
					}
				}

				&.object-list {
					.list-object {
						color: rgb(41, 41, 41);
					}
				}
			}

			&.dark {
				background: #2c2d2f !important;
				border-right: #1f1f1f solid 1px;

				.block {
					background: #36373a;
					color: #d1d1d1;;

					&:hover {
						background: #3a3b3d;
					}
				}

				&.object-list {
					.list-object {
						color: rgb(206, 206, 206);
					}
				}
			}
		}

		.designer-view {
			outline: none;

			div.editor-block.editor-can-drop {
				box-shadow: none !important;
				background: dodgerblue;
				opacity: .3;
			}
		
			.editor-ready {
				
			}

			.editor-view {
				opacity: .7;
			}
		
			.editor-waiting {
				transition: padding .4s;
				outline: rgb(138, 138, 138) 1px solid;
			}
		
			.editor-container {
				transition: box-shadow .6s, outline .3s, padding .3s;

				&.bar-top:not(.empty):not([inline]) {
					padding-top: 1em;
				}

				&.bar-bottom:not(.empty):not([inline]) {
					padding-bottom: 1em;
				}

				&[inline] .container-insert {
					margin: 0;
				}

				& .container-insert {
					mix-blend-mode: difference;
					color: #ffffff5e;
					margin: 1em;
					display: block;
					font-size: 1.2em;
				}
	
				&.empty {
					text-align: center;
				}
			}
		
			.editor-hover {
				outline: dodgerblue 1px solid;
				cursor: move;
			}
		
			.editor-active {
				outline: dodgerblue 1px solid;
			}
		
			.editor-prop div {
				flex-basis: 70%;
			}
		
			.editor-prop label:hover {
				background: #464646;
			}
		
			.editor-prop label {
				line-height: 22px;
				background: #757575;
				color: white;
				transition: .3s;
				padding-left: 0.4em;
				flex-basis: 30%;
				transition: .3s;
			}
		
			.editor-prop {
				display: flex;
			}
			
			.editor-input {
				width: 100%;
				background: #424242;
				color: white;
				border: 1px dodgerblue solid;
				padding: .2em .4em;
				max-width: 100%;
				min-width: 100%;

				&::selection {
					background: #0279b1;
				}
			}
		
			.editor-head {
				color: white;
				background: #424242;
			}
		
			.editor-group {
				padding-left: 1.25em;
			}

			flex: 3;

			display: flex;
			overflow: auto;

			&::-webkit-scrollbar {
				width: 6px;
				height: 6px;
			}

			&::-webkit-scrollbar-track {
				background: none; 
			}

			&::-webkit-scrollbar-thumb {
				background: #888; 
			}

			&::-webkit-scrollbar-thumb:hover {
				background: #555; 
			}

			&.dark > *.no-root {
				color: rgba(190, 190, 190, 0.2) !important;
			}

			& > * {
				flex: 1;
				//color: rgba(0, 0, 0, .2);

				&.no-root {
					display: flex;
					text-align: center;
					justify-content: center;
					align-items: center;

					.empty-block {
						flex: 1;
						display: flex;

						& > * {
							font-size: 4em;
							& > div {
								cursor: default;
								font-size: .9rem;
							}
							flex: 1;
						}
					}
				}
			}

		}

		.designer-design-panel {
			flex: 1 auto;
			max-width: 250px;
			transition: .3s;

			.editor-row {
				&.icon-list {
					display: flex;
				}

				padding: .2em .5em;
				&.icon-list > * {
					flex: 1;
					cursor: pointer;
					text-align: center;
					font-size: 1.4em;
					color: #c9c9c9;

					&:hover {
						color: dodgerblue;
					}
				}
			}

			.input-group {
				flex: 1;
				display: flex;
				padding: 0;

				.input-split {
					flex: 1;

					&:nth-child(2) {
						border-left: 1px solid gray;
						padding-left: 10px;
					}
				}
			}

			.editor-transform {

				.transform-row {
					display: flex;
					padding: 1em 0;

					.input-group {
						flex: 1;
						display: flex;
						padding: 0;

						.input-split {
							flex: 1;
						}
					}
				}
			}

			.input-group {
				padding: .5em 0;

				input[type="text"] {
					width: 45px;
					background: none;
					border: none;
					border-bottom: gray solid 1px;
					outline: none;
					margin-left: .3em;

					&::selection {
						background: #0279b1;
					}
				}

				input[type="color"] {
					width: 30px;
					background: none;
					border: none;
					background: none;
					outline: none;
				}

				input[type="checkbox"] {
					background: none;
					border: 2px gray solid;
					border-radius: 4px;
				}
			}

			&.closed {
				flex: 0 auto;
				width: 0px;
				overflow: hidden;
			}

			.color-popover {
				input[type="text"] {
					width: 80px !important;
				}
			}

			&.light {
				background: #f7f7f7 !important;
				border-left: #e4e4e4 solid 1px;

				.editor-row {
					border-top: 1px solid #ececec;
					border-bottom: 1px solid #ececec;
				}

				.color-popover {
					color: black;
				}
			}

			&.dark {
				background: #2c2d2f !important;
				border-left: #1f1f1f solid 1px;

				.color-popover {
					background: #2c2d2f;
				}

				.editor-row {
					border-top: 1px solid #39393a;
					border-bottom: 1px solid #39393a;
				}
			}
		}
	}
}