bgImage = '../img/grid-icons.png'

.input-position
	white-space nowrap
	&:focus
		outline 0 none
		border 0 none
	> div
		display inline-block
		vertical-align middle
		width 145px
		height 35px
		&:not(:first-child)
			margin-left 10px
		&.input-position-panel
			width 25px
			height 25px
			background url('../img/icon-reference.png') 4px 3px no-repeat
			position relative
			cursor pointer
			opacity .5
			width 35px
			height 35px
			box-sizing border-box
			border 1px solid mediumgray
			border-radius 2px
			margin-left 14px
			&:hover, &.active
				opacity 1
	.property-label
	.control.control-stepper
		vertical-align top
		display inline-block
		line-height 35px
	.property-label
		width 15px
		height 100%
		color darkpurple
	.control.control-stepper
		width 130px
.pixelPositionWrapper
	margin 0
	position relative
	width 330px
	border 1px solid #cbcbcb
	border-radius 3px
	box-shadow 0px 0px 0px 2px #f0f0f0
	overflow hidden
	font-size 14px
	background #fafafa
	z-index 9
	text-align center
	user-select none
	table
		border-collapse collapse
.currentPositionWrapper
	padding 0 15px
	background #fafafa
	height 52px
	line-height 52px
	position relative
	text-align left
	border-bottom 1px dashed #e6e6e6
	text-align center
	cursor pointer
	.reference-panel &
		border-bottom-color transparent
	&:hover
		background #f5f5f5
		border-bottom-color #e6e6e6
		.reference-input
			color darkpurple
		.reference-icon
		.reference-input_close-btn
			opacity 1
.currentPositioningType
.currentPosition
	display inline-block
	line-height 35px
	vertical-align middle
	height 35px
.currentPositioningType
	color darkpurple
.currentPosition
	width 170px

.positionPanel-center
	display block
	position absolute
	top 52px
	left 0
	width 100%
	height 186px
	text-align center

.positionPanelWrapper-visual
	display inline-block
	background darkpurple
	width 275px
	height 138px
	border 1px solid #cbcbcb
	vertical-align middle

.positionPanel-center, .positionPanelWrapper-visual
	&:before
		content ""
		width 0
		height 100%
		vertical-align middle
		display inline-block

.positionPanelWrapper
	overflow hidden
	background white
	display inline-block
	vertical-align middle
	box-sizing border-box
	position relative
	// padding 9px
.dragPanel
	width 100%
	height 100%
	position relative
	&:before
		content ""
		background white
		absolute top -10px left -10px
		width 100%
		height 100%
		display block
		padding 10px

.switch-positioning-type
	width 175px
	display inline-block
	vertical-align middle
	padding-left 25px
	position relative
	color darkgray

.positionFooter
	height 55px
	width 100%
	line-height 55px
	background #fafafa
	text-align center
	position absolute
	bottom 0
	border-top 1px dashed #e6e6e6
	cursor pointer
	&:hover
		background #f5f5f5
		.switch-positioning-type
			color darkpurple
		.switch-positioning-type:before
			opacity 1
.markDown
	position absolute
	z-index 1
	margin -9px
	.mark
		display block
		background url(bgImage) 0 -3px no-repeat
		width 18px
		height 18px
		border-radius 15px
	&:active
		cursor none
	&:before, &:after
		content ""
		display block
		position absolute
		border-top 2px dashed #e6e6e6
		border-left 2px dashed #e6e6e6
		z-index -1
	&:before
		width 0px
		height 400px
		left 8px
		top -200px
	&:after
		width 660px
		height 0px
		top 8px
		left -330px
	&[reference*=bottom]
		margin-top -18px
	&[reference*=right]
		margin-left -18px
	&[reference*=top]
		margin-top 0
	&[reference*=left]
		margin-left 0

.reference-panel
	absolute top left

.pixel-based
.grid-based
.reference-panel
	min-height 293px
	&.activateable
		display none
		&.active
			display block
	.switch-positioning-type:before
		content ""
		display block
		position absolute
		top 0
		left 0
		width 24px
		height 55px
		background-image url(bgImage)
		background-repeat no-repeat
		opacity .5
.pixel-based
	.switch-positioning-type:before
		background-position -24px 14px
.grid-based
	.markDown
		z-index 9
		&:before, &:after
			content none
	.switch-positioning-type:before
		background-position 5px 14px

.position-grid
	width 100%
	height 100%
	position absolute
	top 0
	table-layout fixed
	tr
		border-top 2px dashed #e6e6e6
		&:first-child
			border-top 0 none
	td
		border-left 2px dashed #e6e6e6
		cursor pointer
		&:first-child
			border-left 0 none
		&:hover
			background #f7f7f7
		&.active
			background #f0f0f0

.position-grid_modifiers
	absolute top 24px left 28px
	width 275px
	height 138px

.position-grid_modifier
	display inline-block
	width 12px
	height 12px
	border-radius 2px
	border 1px solid mediumgray
	background white
	line-height 10px
	text-align center
	cursor pointer
	position absolute
	&:before, &.add:after
		content ""
		width 8px
		height 2px
		display inline-block
		background darkgray
		vertical-align middle
	&:hover:before, &:hover:after
		background darkpurple
	&.add:after
		width 2px
		height 8px
		margin 0 4px 0 -5px
	&.colP
		top 50%
		margin-top -7px
		right -21px
	&.colM
		top 50%
		margin-top -7px
		left -21px
	&.rowP
		left 50%
		margin-left -7px
		bottom -20px
		&:after
			margin 0 2px 0 -5px
	&.rowM
		left 50%
		margin-left -7px
		top -20px

.reference-label
.reference-input
.reference-icon
.reference-input_close-btn
	display inline-block
	vertical-align top

.reference-input
	height 35px
	line-height 37px
	text-transform capitalize
	margin 0 0 0 15px
	color darkgray

.reference-icon
.reference-input_close-btn
	width 23px
	height 23px
	background url('../img/icon-reference.png') center center no-repeat
	cursor pointer
	opacity .5
	&:hover, &.active
		opacity 1
	.currentPositioningType &
		margin-top 7px

.reference-input_close-btn
	absolute top 8px right 18px
	background url('../img/close.png') center center no-repeat

.input-reference-panel.positions
	@extend .pixelPositionWrapper
	border 0 none
	box-shadow none
	height 240px
	padding 20px
	box-sizing border-box
	.centrate-all
		position relative
		height 198px
		> span
			display inline-block
			position absolute
			width 50px
			height 50px
			cursor pointer
			&.center
				top 50%
				left 50%
				margin -25px 0 0 -25px
			&.left
				left -13px
				margin-left 0
			&.top
				top -13px
				margin-top 0
			&.right
				right -13px
				left auto
			&.bottom
				bottom -13px
				top auto
			&:after
				content ""
				position absolute
				width 25px
				height 25px
				background #c8c8c8 center no-repeat
				border-radius 25px
				top 13px
				left 13px
				transition background .1s ease
				box-shadow 0 0 0 2px white
			&:hover:after
				background #534955 center no-repeat
			&.active:after
				background #534955 url('../img/white-rounded-check.png') center no-repeat
		> .background
			position absolute
			top 12px
			left 12px
			right 10px
			height auto
			display block
			z-index -1
			tr
				border-bottom 2px dashed #dcdcdc
				&:first-child
					border-top 2px dashed #dcdcdc
				td
					width 137px
					height 82px
					border-right 2px dashed #dcdcdc
					&:first-child
						border-left 2px dashed #dcdcdc
