/* drag/drop styles */
/* styles can't be scoped because child component needs these styles */
/* css variables */
:root
	// https://www.quackit.com/css/css_color_codes.cfm
	--nc-hover-color: red
	--nc-hover-color-col: DarkSlateGrey
	// --nc-hover-color-row: gray; // outline is none
	--nc-hover-box-shadow: 0px 0px 2px 1px rgba(255, 0, 0, 0.5) // red
	--nc-hover-box-shadow-col: 0px 0px 2px 1px rgba(47, 79, 79, 0.5) // DarkSlateGrey
	// --nc-hover-box-shadow-row: 0px 0px 1px 1px rgba(128, 128, 0, 0.5); // olive
	--nc-hover-box-shadow-row: 0px 0px 1px 1px rgba(64, 64, 64, 0.5) // custom dark grey

/* general */
.nc-margin-right
	margin-right: 1em

.nc-padding-left
	padding-left: 1em

.nc-layout-html
	z-index: 1 // show page bottom html/pug and json on top of page itself

.nc-layout
	position: relative
	.nc-layout-header
		display: none
	overflow: visible !important // this is needed to show component name outside nc-label's and other overflow: hidden boxes

#nc-layout-area .nc-row:hover
	// outline: var(--nc-hover-color-row) !important;
	outline: none !important
	box-shadow: var(--nc-hover-box-shadow-row) !important

#nc-layout-area:not(.nc-preview) .nc-row:hover
	// this must be same as #nc-layout-area>.nc-col:hover > .nc-col in below rule
	padding: 0.45em // top, right, bottom, left
	margin: 1px 0 // bigger margin than 1px will cause flicker when mouse goes between rows, lef/right margin would make 2 x 1/2 not to fit on a box

#nc-layout-area .nc-col:hover
	min-height: 1em
	outline: 1px dashed var(--nc-hover-color-col) !important
	box-shadow: var(--nc-hover-box-shadow-col) !important
	&[style='width: auto;']
		outline: 1px dotted var(--nc-hover-color-col) !important

#nc-layout-area *:hover
	transition: all 0.4s ease
	min-height: 0.15em
	outline: 1px solid var(--nc-hover-color)
	box-shadow: var(--nc-hover-box-shadow)
	// align-items: stretch !important; // stretch content so columns are as high as highest column, but then content is not in center any more
	z-index: 3 // on hover put on top of right-side or bottom-side element
	// .nc-row:hover, .nc-col:hover {// this prevents header draw in erp-sync -page to all components inside tab, but then nc-row dows not have label
	.nc-layout-header
		z-index: 4
		position: absolute
		display: inline-flex
		left: calc(50% - 1.75rem) // set by eye, depends on component name length
		top: -0.6rem
		line-height: 1rem
		font-size: 0.9rem
		color: LightSteelBlue
		background-color: rgba(255, 255, 255, 0.8)
		white-space: nowrap
		&:hover
			outline: none

.nc-design,
#nc-layout-area:not(.nc-preview) > .nc-row:hover,
#nc-layout-area:not(.nc-preview) > .nc-col:hover
	.nc-row,
	.nc-col
		min-height: 2em
		align-items: center !important
		outline: 1px dashed silver // all non-auto nc-col
		// background-color: rgb(255, 255, 255, 0.8);
		padding: 0.45em // top, right, bottom, left
		margin: 1px 0 // margin lef/right would make 2 x 1/2 not to fit on a box
	.nc-col[style='width: auto;']
		outline: 1px dotted silver
	.nc-row
		outline: 1px solid silver

#nc-layout-area
	/* flex: 1 1 auto; */
	/* outline: 2px solid blue; */
	/* background-color: #f9f9ff; */
	/* overflow: hidden !important; */
	z-index: 1
	background-color: white
	padding-left: 0.2em
	padding-right: 0.2em

/* border: 2px #ccc dashed;
border-radius: 6px;
padding: 10px; */
/* .nc-layout-header {
	position: absolute;
	padding: 0px;
	top: -10px;
	left: 50%;
	display: inline-flex;
	font-size: 16px;
	transform: translate(-50%, 0);
	color: red;
	white-space: nowrap;
} */
.nc-element-component
	/* sortable new element */
	/* pointer-events: none; */
	border: 1px solid #aaaaaa
	padding: 4px
	border-radius: 4px
	margin-bottom: 0.5em

/* .nc-element-component:hover {
	border: 1px dashed darkgreen;
} */
.nc-element-icon
	margin-right: 0.6em

.nc-element-label
	/* z-index: 3; */
	color: #666666

	/* font-size: 0.85em; */
	/* background-color: rgba(255, 255, 255, 0.5); */

.nc-element-separator
	height: 0.3em
	border-bottom: 1px solid grey

/* set by nc-layout-methods-interact.js code */
.nc-drag-fallback
	/* sortable uses this */
	background: red

.nc-drag-chosen,
.nc-drag-active,
.nc-drag-placeholder
	z-index: 1
	/* must be in front of others to look good */
	box-shadow: 0px 0px 12px -4px rgba(0, 128, 0, 0.5), inset 0px 0px 12px -4px rgba(0, 128, 0, 0.5)
	outline: 1px solid grey

.nc-drop-active
	z-index: 1
	/* must be in front of others to look good */
	box-shadow: 0px 0px 12px -4px rgba(0, 128, 128, 0.5), inset 0px 0px 12px -4px rgba(0, 128, 128, 0.5)
	outline: 1px solid grey

.nc-drop-target
	/* background-color: #29e; */
	/* blue */
	border-color: grey
	border-style: solid
	border-width: 2px

	/* border-radius: 3px; */

.nc-can-drop
	color: grey
	background-color: #4e4

/* other */
.nc-draggable
	z-index: 2

.nc-drag-drop
	display: inline-block
	min-width: 40px
	padding: 2em 0.5em
	/* color: #fff; */
	/* background-color: #29e; */
	/* blue */
	border: solid 2px #fff
	transition: background-color 0.4s
	-webkit-transform: translate(0, 0)
	transform: translate(0, 0)

.nc-dropzone
	width: 80%
	padding: 10px
	margin: 10px auto 30px
	background-color: #ccc
	border: dashed 4px transparent
	border-radius: 4px
	transition: background-color 0.4s

.nc-layout-border
	// fix this, is not beautiful
	border: solid
	// border-radius: 4px;
	border-width: 1px
	border-color: #808080
	// background-color: #eaf3fc;

div.json span
	display: inline

.nc-header4
	font-weight: bold
	/* font-size: $default-font-size + 0; */
	margin-bottom: 0.5 em

.nc-last-added
	color: #a52a2a

.nc-tooltip-move
	position: absolute /* leave this and next 3 values alone */
	z-index: 1000
	/* background: #272727
	border: 10px solid black
	color: white
	padding: 3px
	width: 250px // width of tooltip
	*/
	background: rgba(255, 255, 255, 0.85)
	padding: 3px 7px
	border-radius: 3px
	margin-left: 7px
	margin-top: -3px
