/* stylelint-disable */
@import "node_modules/spectrum-colorpicker/spectrum";
@import "node_modules/font-awesome/scss/font-awesome";
@import "node_modules/codemirror/lib/codemirror";
@import "node_modules/codemirror/theme/hopscotch";


@import "gjs_variables.scss";


@font-face {
  font-family: 'font3336';
  src: url('#{$fontPath}/#{$fontName}.eot?v=#{$fontV}');
  src:
    url('#{$fontPath}/#{$fontName}.woff?v=#{$fontV}') format('woff'),
    //url('#{$fontPath}/#{$fontName}.woff2?v=#{$fontV}') format('woff2'),
    url('#{$fontPath}/#{$fontName}.ttf?v=#{$fontV}') format('truetype'),
    url('#{$fontPath}/#{$fontName}.svg?v=#{$fontV}') format('svg'),
    url('#{$fontPath}/#{$fontName}.eot?v=#{$fontV}') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@mixin user-select($v) {
  -moz-user-select: $v;
  -khtml-user-select: $v;
  -webkit-user-select: $v;
  -ms-user-select: $v;
  -o-user-select: $v;
  user-select: $v;
}

@mixin opacity($v) {
  opacity: $v;
  filter: alpha(opacity=$v * 100);
}

@mixin appearance($v) {
  -webkit-appearance: $v;
  -moz-appearance: $v;
  appearance: $v;
}

@mixin transform($v) {
  -ms-transform: $v;
  -webkit-transform: $v;
  -moz-transform: $v;
  transform: $v;
}

$prefix: $app-prefix;

.#{$prefix} {
  @each $cnum, $ccol in (one, $primaryColor), (two, $secondaryColor), (three, $tertiaryColor), (four, $quaternaryColor) {
    &#{$cnum} {
      &-bg {
        background-color: $ccol;
      }

      &-color {
        color: $ccol;

        &-h:hover {
          color: $ccol;
        }
      }
    }
  }
}


.#{$app-prefix}bg {
  &-main {
    background-color: $mainColor;
  }
}

.#{$app-prefix}color {
  &-main {
    color: $fontColor;
    fill: $fontColor;
  }

  &-active {
    color: $fontColorActive;
    fill: $fontColorActive;
  }

  &-warn {
    color: $colorWarn;
    fill: $colorWarn;
  }

  &-hl {
    color: $colorHighlight;
    fill: $colorHighlight;
  }
}

.#{$app-prefix}fonts::before {
  display: block;
  font: normal normal normal 14px font3336; // shortening font declaration
  text-rendering: auto; // optimizelegibility throws things off #1094
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 5em;
}
.#{$app-prefix}f-b1::before { content: 'Q'; }
.#{$app-prefix}f-b2::before { content: 'W'; }
.#{$app-prefix}f-b3::before { content: 'E'; }
.#{$app-prefix}f-b37::before { content: 'R'; }
.#{$app-prefix}f-hero::before { content: 'T'; }
.#{$app-prefix}f-h1p::before { content: 'y'; }
.#{$app-prefix}f-3ba::before { content: 'u'; }
.#{$app-prefix}f-image::before { content: 'I'; }
.#{$app-prefix}f-text::before { content: 'o'; }
.#{$app-prefix}f-quo::before { content: 'p'; }
.#{$app-prefix}f-button::before { content: 'B'; }
.#{$app-prefix}f-divider::before { content: 'D'; }


.#{$app-prefix}invis-invis,
.#{$app-prefix}no-app {
	background-color: transparent;
	border: none;
	color:inherit;
}
.#{$app-prefix}no-app{
	height: 10px;
}

.#{$app-prefix}test {

  &::btn { color: '#fff';}

  &input {}

  &header {}
}
.opac50{
	@include opacity(0.50);
}
.#{$app-prefix}checker-bg, .checker-bg{
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");
}

.#{$app-prefix}no-user-select{
	@include user-select(none);
}

.#{$app-prefix}no-pointer-events{
  pointer-events: none;
}

.#{$app-prefix}bdrag {
  pointer-events: none !important;
  position: absolute !important;
  z-index: 10 !important;
  width: auto;
}

.#{$app-prefix}drag-helper {
  background-color: $colorBlue !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: 10 !important;
  transform: scale(0.3) !important;
  transform-origin: top left !important;
  -webkit-transform-origin: top left !important;
  margin: 15px !important;
  transition: none !important;
  outline: none !important;
}

.#{$app-prefix}grabbing,
.#{$app-prefix}grabbing * {
  @extend .#{$app-prefix}no-user-select;

  cursor: grabbing !important;
  cursor: -webkit-grabbing !important;
}

.#{$app-prefix}grabbing {
  overflow: hidden;
}

.#{$app-prefix}off-prv{
  @extend .#{$app-prefix}color-main;
  @extend .#{$app-prefix}bg-main;
  position: relative;
  z-index: 10;
  padding: 5px;
  cursor: pointer;
}

// Custom scrollbars for Chrome
.#{$app-prefix}editor-cont ::-webkit-scrollbar-track {
  background: $mainDklColor;
}

.#{$app-prefix}editor-cont ::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
}

.#{$app-prefix}editor-cont ::-webkit-scrollbar {
  width: 8px;
}

/********************* MAIN ************************/
.clear{ clear:both }

.no-select{
 	@include user-select(none);
}

.#{$app-prefix}editor {
  font-family: $mainFont;
  font-size: $fontSize;
  position: relative;
  box-sizing: border-box;
  height: 100%;
}

.#{$app-prefix}freezed,
.#{$nv-prefix}freezed {
  @include opacity(0.50);
  pointer-events: none;
}

/*************  TRAITS  ****************/
.#{$app-prefix}traits-label {
  border-bottom: 1px solid $mainDkColor;
  font-size: 13px;
  font-weight: lighter;
  margin-bottom: 5px;
  padding: 10px;
  text-align: left;
}
.#{$trt-prefix}trait {
  display: flex;
  justify-content: start;
  padding: 5px 10px;
  font-weight: lighter;

  .#{$app-prefix}label {
    width: 30%;
    text-align: left;
  }

  .#{$app-prefix}field {
    width: 70%;
  }
}

/*************  CANVAS  ****************/

@import "gjs_canvas";

/********* COMMANDS **********/

.no-dots, .ui-resizable-handle{ border: none !important; margin:0 !important; outline: none !important; }

.#{$com-prefix}dashed *{
	outline: 1px dashed #888;
	outline-offset: -2px;
  	box-sizing: border-box;
}

.#{$com-prefix}no-select, .#{$com-prefix}no-select img{
 	@extend .no-select;
}

.#{$cv-prefix}canvas .#{$comp-prefix}selected{//TODO
	outline: 3px solid $colorBlue !important;
}

*.#{$com-prefix}hover, div.#{$com-prefix}hover { outline: 1px solid $colorBlue; }

*.#{$com-prefix}hover-delete, div.#{$com-prefix}hover-delete{
	outline: 2px solid $colorRed;
  	@include opacity(0.50);
}
*.#{$com-prefix}hover-move, div.#{$com-prefix}hover-move{
	outline: 3px solid $colorYell;
}
.#{$com-prefix}badge, .#{$app-prefix}badge{
	pointer-events: none;
	background-color: $colorBlue;
	color: #fff;
	padding: 2px 5px;
	position: absolute; z-index: 1;
	font-size: 12px;
  outline: none;
  display: none;
}
.#{$com-prefix}badge-red{
	@extend .#{$com-prefix}badge;
	background-color: $colorRed;
}
.#{$app-prefix}badge-warning{
	background-color: $colorYell;
}
.#{$app-prefix}placeholder,
.#{$com-prefix}placeholder,
.#{$nv-prefix}placeholder {
	position: absolute;
	z-index: 10;
  pointer-events: none;
  display: none;
}

.#{$app-prefix}placeholder,
.#{$nv-prefix}placeholder {
  border-style: solid !important;
  border-color: $colorGreen;
  outline: none;
  box-sizing: border-box;
  transition: top $animSpeed, left $animSpeed,
    width $animSpeed, height $animSpeed;
}

.#{$app-prefix}placeholder-int,
.#{$com-prefix}placeholder-int,
.#{$nv-prefix}placeholder-int {
	background-color: $colorGreen;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
	height: 100%; width: 100%;
	pointer-events: none;
	padding: 1.5px;
  outline: none;
}

/********* PANELS **********/

.#{$pn-prefix}panel {
  //@extend .#{$app-prefix}bg-main;
  //@extend .#{$app-prefix}color-main;
  display: inline-block;
  padding: 5px;
  position: absolute;
  box-sizing: border-box;
  text-align: center;
  z-index:3;

  &##{$pn-prefix}commands{
    width: (100% - $leftWidth);
    left:0; top: 0;
    box-shadow: 0 0 5px $mainDkColor;
  }

  &##{$pn-prefix}options{
  	right: $leftWidth;
    top: 0;
  }

  &##{$pn-prefix}options2{
  	@extend ##{$pn-prefix}commands;
  	bottom: 150px;
  	height: auto;
  }

  .icon-undo, .icon-redo{
  	font-size: 20px;
    height: 30px;
    width: 25px;
  }

  &##{$pn-prefix}views{
  	border-bottom: 2px solid $mainDkColor;
  	right: 0;
  	width: $leftWidth;
  	z-index: 4;
  }

  &##{$pn-prefix}views-container{
  	height: 100%;
    padding: 42px 0 0;
    right: 0;
    width: $leftWidth;
    overflow: auto;
    box-shadow: 0 0 5px $mainDkColor;
  }
}

.#{$pn-prefix}buttons {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.#{$pn-prefix}btn, .#{$app-prefix}btnt {
	box-sizing: border-box;
	height: 30px; width: 30px;
	line-height: 21px;
	background-color: transparent;
	border:none;
	font-size: 18px;
	margin-right: 5px;
	border-radius: 2px;
	cursor: pointer;
	padding: 5px;
	position: relative;

	&.#{$pn-prefix}active {
		background-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25) inset;
	}

	> .#{$pn-prefix}arrow-rd {
	  	border-bottom: 5px solid $mainLhlColor;
	  	border-left: 5px solid transparent;
	  	bottom: 2px; right: 2px;
	  	position: absolute;
	}

	> .#{$pn-prefix}buttons{
		background-color: $mainColor;
		border-radius: 2px;
		position: absolute;
		display: none;
		left: 50px;
		top: 0;
		padding: 5px;

		&.#{$pn-prefix}visible{ display: block; }

		> .#{$pn-prefix}arrow-l {
			border-bottom: 5px solid transparent;
		    border-right: 5px solid $mainColor;
		    border-top: 5px solid transparent;
		    left: -5px; top: 15px;
		    position: absolute;
		}
	}
}

/* pa-refresh pa-rocket pa-trash pa-columns pa-rotate-left/right */
.btn.expand{ background-image: none;}

/***********  Components *************/

.#{$comp-prefix}image-placeholder {
	display:	block;
	background-color: #f5f5f5;
	color: 	$fontColorDk;
  height: $imageCompDim;
  width: $imageCompDim;
	line-height: $imageCompDim;
	outline: 3px solid $colorYell;
	outline-offset: -3px;
	text-align: center;
	font-size: $imageCompDim/3;
	cursor: pointer;

  	&.fa-picture-o::after{
		content:  "\f03e";
	}
}


@import "gjs_inputs";

@import "gjs_devices";


/********* General **********/

.#{$app-prefix}category-open {
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.#{$app-prefix}category-title {
  @extend .no-select;

  font-weight: lighter;
  background-color: $mainDklColor;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 9px 10px 9px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  text-align: left;
  position: relative;
  cursor: pointer;
}

/********* Style Manager **********/

@import "gjs_style_manager";

/********* Blocks **********/

@import "gjs_blocks";

/************* Navigator *************/

@import "gjs_layers";

/********* Class manager **********/

.#{$clm-prefix}field{
		@extend .#{$sm-prefix}field
}
.#{$clm-prefix}select{
		@extend .#{$sm-prefix}field.#{$sm-prefix}select;
}

.#{$clm-prefix}tags{
	@extend .#{$sm-prefix}sector;
	font-size: 11px;
	padding: 10px 5px;

	##{$clm-prefix}label, ##{$clm-prefix}sel{
		padding: 7px 0;
		float:left;
	}
  ##{$clm-prefix}sel{
    font-style: italic;
    margin-left: 5px;
  }
	##{$clm-prefix}status-c{
		float:right;
	}

	##{$clm-prefix}tags-field{
		clear:both;
		padding: 5px;
		margin-bottom: 5px;
	}
	##{$clm-prefix}tags-c{
		display: inline-block;
		vertical-align: top;
	}

	##{$clm-prefix}add-tag{
		background-color: rgba(255, 255, 255, 0.15);
		border-radius: 2px;
    padding: $paddElClm;
    box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2) inset;
    border: 1px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
	}

	##{$clm-prefix}new {
		@extend  .#{$app-prefix}invis-invis;
		color: $fontColor;
		padding: $paddElClm;
		display:none;
	}

	.#{$clm-prefix}tag {
		display: inline-block;
		border-radius:3px;
		margin: 0 3px 3px 0;
    padding: 5px;
    cursor: default;
	}
	##{$clm-prefix}close {
		@extend  .opac50;
		font-size: 20px;
    line-height: 0;
    cursor:pointer;
    color: rgba(255, 255, 255, 0.9);
    @extend  .no-select;
    &:hover{
    	@include opacity(0.7);
    }
	}
	##{$clm-prefix}checkbox {
    color: rgba(255, 255, 255, 0.9);
		vertical-align: middle;
		cursor: pointer;
		font-size: 9px;
	}

	##{$clm-prefix}tag-label {
    padding: 0 3px;
    cursor: text;
	}
}
/********* END Class manager **********/

/********* Modal dialog **********/

@import "gjs_modal";

/********* Assets Manager **********/

@import "gjs_assets";

/********* File uploader **********/

.#{$am-prefix}file-uploader {
	width: 55%;
	float:left;

	> form {
	  background-color: $mainDklColor;
	  border: 2px dashed;
	  border-radius: 3px;
	  position: relative;
	  text-align: center;
	  margin-bottom: 15px;

	  	&.#{$am-prefix}hover {
			border: 2px solid $colorGreen;
			color: lighten($colorGreen, 5%); /*#7ee07e*/
		}

		&.#{$am-prefix}disabled{
			border-color: red;
		}

	  	##{$am-prefix}uploadFile{
	  		@include opacity(0);
	  		padding: $uploadPadding;
		  	width: 100%;
		  	box-sizing: border-box;
		}
	}

	##{$am-prefix}title {
		position: absolute;
		padding: $uploadPadding;
		width: 100%;
	}
}


/********* Code Manager **********/

.#{$cm-prefix}editor-c{
	float:left;
	box-sizing: border-box;
	width:50%;

	.CodeMirror{
		 height: 450px;
	}
}
.#{$cm-prefix}editor{
	font-size: 12px;

	&##{$cm-prefix}htmlmixed {
		padding-right: 10px;
		border-right: 1px solid $mainDkColor;
		##{$cm-prefix}title { color: #a97d44;}
	}
	&##{$cm-prefix}css {
		padding-left: 10px;
		##{$cm-prefix}title { color: #ddca7e;}
	}
	##{$cm-prefix}title {
	  background-color: $mainDkColor;
	  font-size: 12px;
	  padding: 5px 10px 3px;
	  text-align: right;
	}
}

/*************RTE****************/

@import 'gjs_rte';

/********* Spectrum **********/

.#{$app-prefix}editor-cont {
  .sp-hue, .sp-slider{ cursor: row-resize;}
  .sp-color, .sp-dragger{ cursor: crosshair;}
  .sp-alpha-inner, .sp-alpha-handle{cursor: col-resize;}
  .sp-hue{ left: 90%; }
  .sp-color{right: 15%;}
  .sp-container {
    border: 1px solid $mainDkColor;
    box-shadow: 0 0 7px $mainDkColor;
    border-radius: 3px;
  }
  .sp-picker-container{border:none;}
  .colpick_dark .colpick_color {  outline: 1px solid $mainDkColor;}
  .sp-cancel, .sp-cancel:hover {
    bottom: -8px;
    color: #777 !important;
    font-size: 25px;
    left: 0;
    position: absolute;
    text-decoration:none;
  }
  .sp-alpha-handle {
    background-color: #ccc;
    border: 1px solid #555;
    width: 4px;
  }
  .sp-color, .sp-hue { border: 1px solid #333333;}
  .sp-slider {
    background-color: #ccc;
    border: 1px solid #555;
    height: 3px;
    left: -4px;
    width: 22px;
  }
  .sp-dragger{background:transparent; box-shadow: 0 0 0 1px #111;}
  .sp-button-container{
  	float: none;
  	width: 100%;
  	position: relative;
  	text-align: right;
  }
  .sp-container button, .sp-container button:hover, .sp-container button:active{
  	background: $mainDkColor;
    border-color: $mainDkColor;
    color: $fontColor;
    text-shadow: none;
    box-shadow: none;
    padding: 3px 5px;
  }
  .sp-palette-container{
    border: none;
    float:none;
    margin:0;
    padding:5px 10px 0;
  }
  .sp-palette .sp-thumb-el, .sp-palette .sp-thumb-el:hover{
    border: 1px solid rgba(0, 0, 0, 0.9);
  }

  .sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
    border-color: rgba(0, 0, 0, 0.9);
  }
}

.#{$app-prefix}hidden {
  display: none;
}

@keyframes #{$app-prefix}slide-down {
  0% {
      transform: translate(0, -3rem);
      opacity: 0;
  }
  100% {
      transform: translate(0, 0);
      opacity: 1;
  }
}

@keyframes #{$app-prefix}slide-up {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0, -3rem);
    opacity: 0;
  }
}