/* @views /nc-layout/nc-layout-editor.scss
* in: nc-layout-content.vue
nc-container: nc-row, nc-col and nc-form
nc-element: all other components that starts with 'nc-'


* in nc-layout-editor.vue
nc-selected-element: on click

* drag & drop in nc-layout-drag-drop.js
.nc-dnd
allowFrom: .nc-container .nc-element
drag start: .nc-drag
drag move: adds nc-deny-drop or nc-allow-drop, hovered element: nc-drop
drag end: removes all drag classes
todo: on drag hover we need to give different classes on elements below hover (uppermost container get nc-allow-drop and non-container elements nc-deny-drop)

* ideas
do we need locked?

*/
:root {
	--min-col-height: 1em;
	--min-col-width: 4em;
	--outline-hover: 2px solid;
	--outline-not-allowed: 1px dashed;
	--outline-selected: 2px solid;
	--outline-selected-parent: 2px solid;
	--nc-row-outline-offset: 0px;
	--nc-row-hover-color: rgba(32, 32, 32, 0.15);
	--nc-row-selected-color: rgba(32, 32, 32, 0.5);
	--nc-col-outline-offset: 0px;
	--nc-col-outline-offset-parent: 3px;
	--nc-col-hover-color: rgba(0, 140, 200, 0.3);
	--nc-col-selected-color: rgba(0, 140, 200, 0.5);
	--nc-form-fields-selected-color: rgba(110, 150, 150, 0.5);
	--nc-element-outline-offset: 0px;
	--nc-element-hover-color: rgba(90, 180, 90, 0.5);
	--nc-element-selected-color: rgba(90, 180, 90, 1);
	--nc-element-user-select: none; /* can't select text on labels, it looks bad when dragging and it sets lots of labels background to selected color */
}

/* nc-layout-content transition-group */
.nc-draw-content-move {
	transition: transform 0.15s ease-in-out;
}
.nc-draw-content-enter-active,
.nc-draw-content-leave-active {
	transition: all 0.5s;
}
.nc-draw-content-enter-from,
.nc-draw-content-leave-to {
	opacity: 0;
	transform: translateY(3em);
}

/* nc-layout-editor */
.nc-selected-parent:not(.nc-drag).nc-row {
	outline: var(--outline-selected-parent) var(--nc-row-hover-color);
	outline-offset: var(--nc-row-outline-offset);
}
.nc-selected-parent:not(.nc-drag).nc-col {
	outline: var(--outline-selected-parent) var(--nc-col-hover-color);
	outline-offset: var(--nc-col-outline-offset-parent);
	z-index: 1;
}
.nc-selected-parent:not(.nc-drag).nc-element {
	outline: var(--outline-selected-parent) var(--nc-element-hover-color);
	outline-offset: var(--nc-element-outline-offset);
	user-select: var(--nc-element-user-select);
}

.nc-selected-element:not(.nc-drag).nc-form {
	outline: var(--outline-selected) var(--nc-row-selected-color);
	outline-offset: var(--nc-row-outline-offset);
}
.nc-selected-element:not(.nc-drag).nc-row {
	outline: var(--outline-selected) var(--nc-row-selected-color);
	outline-offset: var(--nc-row-outline-offset);
	z-index: 1;
}
.nc-selected-element:not(.nc-drag).nc-col {
	outline: var(--outline-selected) var(--nc-col-selected-color);
	outline-offset: var(--nc-col-outline-offset);
	z-index: 1;
}
.nc-selected-element:not(.nc-drag).nc-form-fields {
	outline: var(--outline-selected) var(--nc-form-fields-selected-color);
	outline-offset: var(--nc-col-outline-offset);
	z-index: 1;
}
.nc-selected-element:not(.nc-drag).nc-element {
	outline: var(--outline-selected) var(--nc-element-selected-color) !important;
	outline-offset: var(--nc-element-outline-offset) !important;
	user-select: var(--nc-element-user-select);
}

.nc-drop-activated {
	touch-action: none; /* for iOS drag & drop */
	outline: var(--outline-selected) var(--nc-row-selected-color);
	background-color: #ecf0c8;
}
.nc-drag {
	touch-action: none; /* for iOS drag & drop */
	border: dotted;
	border-width: 1.5px;
	border-color: blue;
	z-index: 1;
}
.nc-allow-drop {
	background-color: #c8f0c8 !important;
}

.nc-deny-drop {
	background-color: #f7b9b9 !important;
	outline: var(--outline-not-allowed) !important;
}

#nc-layout-element a.item {
	width: 80px;
}

/* nc-layout-content need inside style to work
	style='width:100%; min-height:35em;'
*/
#nc-layout-toolbar {
	padding-right: 0.6em;
	margin-right: -0.3em;
	transition: width 0.3s ease;
	overflow: hidden;
}
#nc-layout-toolbar .toolbar-segment {
	min-height: 36em;
	box-shadow: 1px 1px 5px 0px #8a8a8a;
	background-color: #f4f4f8;
	margin-top: 0.5em;
	margin-bottom: 5px;
	margin-left: 0.8em;
	padding-left: 0.5em;
}

#nc-layout-area {
	touch-action: none; /* for iOS drag & drop */
	margin-top: 0.5em;
	box-shadow: 1px 1px 5px 0px #8a8a8a;
	outline: none;
	background-color: white;
}
#nc-layout-area .nc-row {
	min-height: var(--min-col-height);
	min-width: var(--min-col-width);
}
#nc-layout-area .nc-col {
	min-height: var(--min-col-height);
	min-width: var(--min-col-width);
}

#nc-layout-area:not(.nc-hide-mouse-hover) .nc-row:hover:not(.nc-selected-element) {
	z-index: 2;
	outline: var(--outline-hover) var(--nc-row-hover-color);
	outline-offset: var(--nc-row-outline-offset);
}
#nc-layout-area:not(.nc-hide-mouse-hover) .nc-col:hover:not(.nc-selected-element) {
	z-index: 3;
	outline: var(--outline-hover) var(--nc-col-hover-color);
	outline-offset: var(--nc-col-outline-offset-parent);
}
#nc-layout-area:not(.nc-hide-mouse-hover) .nc-element:hover:not(.nc-selected-element) {
	z-index: 4;
	outline: var(--outline-hover) var(--nc-element-hover-color);
	outline-offset: var(--nc-element-outline-offset);
	user-select: var(--nc-element-user-select);
}
