%user-select-none
	-webkit-touch-callout: none
	-webkit-user-select: none
	-khtml-user-select: none
	-moz-user-select: none
	-ms-user-select: none
	user-select: none

@mixin transition($text...)
	-webkit-transition: $text
	-moz-transition: $text
	-o-transition: $text
	-ms-transition: $text
	transition: $text

@mixin thumb()
	@content
	appearance: none
	width: 4px !important
	height: 4px !important
	min-width: 4px
	min-height: 4px
	max-width: 4px
	max-height: 4px
	border-radius: 50%
	background: #555
	box-sizing: border-box
	margin-top: -1px

.spainterContainer
	display: flex
	outline: none
	width: 100%
	height: 100%
	flex-direction: column
	position: relative
	input[type=range]
		width: 40px
		margin: 0
		padding: 0
		display: block
		cursor: pointer
		border-top: 1px solid grey
		accent-color: #555
		&::-webkit-slider-runnable-track
			height: 2px
		&::-webkit-slider-thumb
			@include thumb
		&::-moz-range-track
			height: 2px
		&::-moz-range-thumb
			@include thumb

	.active-icon
		color: red
	.disabled
		color: grey

	.spainterHidden
		display: none !important

	.paint-crp-rect
		position: absolute
		min-width: 20px
		min-height: 20px
		@extend %user-select-none
		border: 1px dashed #cacaca
		$square-size: -4px

		.paintPastedImg
			width: 100%
			height: 100%
			cursor: move
			@extend %user-select-none
			margin-bottom: $square-size

		%painterCrop
			position: absolute
			background-color: #e2e2e2
			border: 1px solid #cacaca
			width: 6px
			height: 6px
			z-index: 2

		[pos=tl]
			@extend %painterCrop
			top: 0
			left: 0
			margin: $square-size 0 0 $square-size
			cursor: se-resize

		[pos=bl]
			@extend %painterCrop
			left: 0
			bottom: 0
			margin: 0 0 $square-size $square-size
			cursor: ne-resize

		[pos=br]
			@extend %painterCrop
			right: 0
			bottom: 0
			margin: 0 $square-size $square-size 0
			cursor: se-resize

		[pos=tr]
			@extend %painterCrop
			right: 0
			top: 0
			margin: $square-size $square-size 0 0
			cursor: ne-resize

		[pos=l]
			@extend %painterCrop
			top: 50%
			left: 0
			margin: $square-size 0 0 $square-size
			cursor: e-resize

		[pos=t]
			@extend %painterCrop
			top: 0
			left: 50%
			margin: $square-size 0 0 $square-size
			cursor: s-resize

		[pos=r]
			@extend %painterCrop
			top: 50%
			right: 0
			margin: $square-size $square-size 0 0
			cursor: e-resize

		[pos=b]
			@extend %painterCrop
			left: 50%
			bottom: 0
			margin: 0 0 $square-size $square-size
			cursor: s-resize

	.canvasResize
		cursor: se-resize
		position: absolute
		background-color: rgba(128, 128, 128, 0.5)
		bottom: 0px
		right: 0px
		width: 10px
		height: 10px

	.paintResizeTools
		display: inline-block
		padding-right: 10px
		> input
			width: 50px

	.toolsAndCanvas
		display: flex
		flex-direction: row
		width: 100%
		flex: 1
		min-height: 0
		$two-columns-painter: 600px
		.painterTools
			padding-left: 10px
			display: flex
			flex-direction: column
			margin-left: -5px
			height: fit-content
			*
				cursor: pointer
				display: block
				padding: 5px 5px 5px 0
			@media screen and (max-height: $two-columns-painter)
				width: 60px
				min-width: 60px
				flex-direction: row
				flex-wrap: wrap
		.canvasWrapper
			width: 100%
			//flex: 1
			//min-height: 0
			// height: 100% DO not set it to 100%, since parent has flex grow it will automatically collaps to 100%
			// if height is set, safari won't make it work right, it would no have scroll at all
			position: relative
			overflow: auto
			// select none prevent paste event  https://stackoverflow.com/questions/31207253/onpaste-paste-event-not-firing-for-table-on-first-few-attempts
			//@extend %user-select-none
			//max-height: calc(100vh - 95px)
			//max-width: calc(100vw - 60px)
			//@media screen and (max-height: $two-columns-painter)
			//	max-width: calc(100vw - 90px)
			border: 1px dashed rgba(128, 128, 128, 0.5)
			.painter
				touch-action: none
			canvas
				$c1: #cacacc
				$c2: transparent
				//background-image: -moz-linear-gradient(45deg, $c1 25%, $c2 25%), -moz-linear-gradient(-45deg, $c1 25%, $c2 25%), -moz-linear-gradient(45deg, $c2 75%, $c1 75%), -moz-linear-gradient(-45deg, $c2 75%, $c1 75%)
				//background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, $c1), color-stop(.25, $c2)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, $c1), color-stop(.25, $c2)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, $c2), color-stop(.75, $c1)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, $c2), color-stop(.75, $c1))
				$width: 50px
				$h_width: calc($width / 2)
				-moz-background-size: $width $width
				//background-size: $width $width
				-webkit-background-size: $width $width /* override value for shitty webkit */

				//background-position: 0 0, $h_width 0, $h_width -#{$h_width}, 0px $h_width

				background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc)
				background-size: 50px 50px
				background-position: 0 0, 25px 25px
			.text
				position: absolute
				border: 1px dashed
				width: auto
				min-width: 5px
				word-wrap: normal
				padding: 0 1px

	.bottomTools
		padding-top: 5px
		margin-left: 24px
		flex-grow: 0
		display: flex
		overflow-y: hidden
		align-items: flex-end
		max-width: 100%
		overflow-x: auto

		%hideEl
			display: inline-flex
			flex-direction: column
			vertical-align: top
			> span
				font-size: 10px
				opacity: 0.6
				margin-bottom: 1px
				display: block
				white-space: nowrap
			input[type=text]
				width: 30px
				padding: 2px 4px
				vertical-align: top
			> input
				margin-right: 0
			div
				display: flex
				align-items: center
				gap: 4px
			@media (pointer:none), (pointer:coarse)
				input[type=text]
					display: none
				input[type=range]
					width: 50px

		.paintSend
			cursor: pointer
			vertical-align: top
		.paintXY
			min-width: 100px
		.paintXYdimens
			font-size: 12px
			display: flex
			flex-direction: row
			position: relative
			margin-left: auto
			order: 2
			> *
				display: inline-block

		.paintFont
			@extend %hideEl
			padding: 0 6px
			select
				text-overflow: ellipsis
				overflow: hidden
				white-space: nowrap
				width: 120px
				font-size: 14px
				height: 25px
				border: 1px solid grey

		.paintOpacity, .paintFillOpacity
			@extend %hideEl

		.paintRadius
			@extend %hideEl
			padding: 0 6px
			input[type=range]
				width: 70px
			.width-preset-buttons
				display: flex
				gap: 2px
				margin-bottom: 4px
				input[type=text]
					width: 10px
					font-size: 8px
				input[type=button]
					width: 14px
					height: 16px
					font-size: 8px
					padding: 0
					border: 1px solid #ccc
					background: #f5f5f5
					cursor: pointer
					border-radius: 2px
					&:hover
						background: #e0e0e0
					&:active
						background: #d0d0d0

		.paintApplyText
			display: inline-block
			input[type=button][disabled]
				display: none

		.paintColor, .paintColorFill
			@extend %hideEl
			padding: 0 6px
			border: none
			> span
				font-size: 10px
			input[type=color]
				-webkit-appearance: none
				padding: 0
				border: 1px solid grey
				border-radius: 1px
				height: 18px
				width: 40px
				display: block
				cursor: pointer
				&::-webkit-color-swatch-wrapper
					padding: 0
				&::-webkit-color-swatch
					border: none