@import (reference) '../../styles';

@panel-width: 400px;

debug-panel {
  display: block;

  .tracepanel {
    top: 50%;
    left: 0;
    right: 0;
    padding: @grid-gutter-width/4;
    overflow-y: scroll;
    position: fixed;
    width: 400px;
    height: 44%;

    #tracer li {
			font-size: 8pt;
			padding:1px;
			margin-left: -2em;
			margin-bottom: 5px;
    }

	#clear-log-button {
		position:fixed;
		left: 280px;
	}
  }

  .immediate-panel {
    bottom: 40px;
    padding: @grid-gutter-width/4;
    width: @panel-width;
    position: fixed;

    #tracerimm {
      width: 70%;
    }
  }
}

span.code, span.var, span.varidx, span.val, span.page, span.valT,span.valF,span.info,
span.tag,span.field,span.field.required,span.learnmore,span.logic {
	padding: 2px;
	margin: 2px;
}
span.ui { /* color button pressed by client */
	border: thin solid #fea;
	background-color: #ccf;
}
span.info { /* color comment */
	border: thin solid #fea;
	background-color: #ddd;
}
span.tag { /* general tag */
	border: thin solid #fea;
	color: #000;
	background-color: #fff;
}
span.tag.field {
	background-color: #efe;
}
span.tag.field.required {
	border: solid #FFFF00;
	background-color: #ddd;
}
span.tag.logic {
	border: thin solid #fea;
	background-color: #CC9966;
}
span.tag.repeat {
	.icon-font;
	position: relative;
	border: none;

	&:before {
		content: '\e847';
		position: absolute;
		top: 0;
		left: 0;
  }
}
span.tag.learnmore {
	border: thin solid #fea;
	background-color: #FFCC66;
}
span.taglist { /* list of tags will be right side */
	float:right;
}
span.code {
	border: thin solid #CC9966;
	background-color: #ddd;
}
span.var {
	background-color: #F5DEB3;
}
span.varidx {
	background-color: #fcc
}
span.valT{ /* if value is True */
	border: thin solid #CC9966;
	background-color: #90EE90;
}
span.valF{ /* if value is False */
	border: thin solid #CC9966;
	background-color: #FFC0CB;
}
span.valBlank{/* if value is blank or null */
	border: thin solid #CC9966;
	background-color: #DCDCDC;
}
span.val{/* if value is anything else */
	border: thin solid #CC9966;
	background-color: #FFD700;
}
span.page {
	background-color: #ddf;
}
span.err {
	text-decoration: none;
	border-bottom: dashed  1px #f00;
	padding-bottom: 0px;
}