//Mixins
//-------------------------------

@mixin prefix($name, $argument...) {
  -webkit-#{$name}: #{$argument};
  -ms-#{$name}: #{$argument};
  -moz-#{$name}: #{$argument};
  -o-#{$name}: #{$argument};
  #{$name}: #{$argument};
}

@mixin flex-like-that($dir: row, $wrap: wrap) {
	display: -webkit-box; // iOS 6-, Safari 3.1-6
	display: -moz-box; // Firefox 19- (buggy but mostly works)
	display: -ms-flexbox; // IE 10
	display: -webkit-flex; // Chrome
	display: flex; // Opera 12.1, Firefox 20+
	-webkit-flex-flow: $dir $wrap;
	-moz-flex-flow: $dir $wrap;
	-ms-flex-flow: $dir $wrap;
	flex-flow: $dir $wrap;
}

@mixin flex-it-up($fg: 1, $fs: null, $fb: null) {
	-webkit-box-flex: $fg; // iOS 6-, Safari 3.1-6
	-moz-box-flex: $fg; // Firefox 19-
	-webkit-flex: $fg $fs $fb; // Chrome
	-ms-flex: $fg $fs $fb; // IE 10
	flex: $fg $fs $fb; // Opera 12.1, Firefox 20+
}

@mixin font-size($size){
  font-size: $size * 1px;
  font-size: $size * 0.1rem;
}

@mixin box-model($model: border-box) {
	-moz-box-sizing	  : $model;
	-webkit-box-sizing : $model;
	box-sizing				: $model;
}
@mixin antialiasing( $type:antialiased ) {
	-webkit-font-smoothing: $type;
	font-smoothing: $type;
	font-smooth: always;
}

//Variables
//-------------------------------

$font-stack: open-sans, Arial, sans-serif;
$base-font: 62.5%; //I like my rem's even (1rem = 10px)

$page-bg: #71D4B7;
$code-top: #E8ECEF;
$code-text: #BAC1C9;
$code-bg: #4e606c;
$code-nav: #384a56;
$code-nav-select: #233038;

$code-selector: #FC659A;
$code-property: #71D4B7;
$code-linenumbers: #879BA6;
$code-comment: lighten($code-bg,30%);
$code-variables: #EFB26E;
$code-function: #F5755A;

//Pen Info
//-------------------------------

*,
*:after,
*:before {
  @include box-model;
  @include antialiasing;
}

body {
  font-family: $font-stack;
  background-color: $page-bg;
  font-size: $base-font;
    label {
    background-color: rgba(255,255,255,1);
    color: #000;
    padding: 10px 15px;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 10px;
    box-shadow: 4px 3px 0px rgba(0,0,0,0.15);
    cursor: pointer;
    &:hover {
      background-color: rgba(255,255,255,0.75);
      ~h1{
        display: block;
      }
    }
  }
  input {
    display: none;
    &:checked {
      ~h1 {
        display: block;
      }
      ~label {
        background-color: rgba(255,255,255,0.75);
      }
    }
  }
  h1 {
    display: none;
    font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
    font-size: 18px;
    color: #000;
    background-color: #fff;
    padding: 10px;
    position: absolute;
    left: 55px;
    top: 10px;
    box-shadow: 4px 3px 0px rgba(0,0,0,0.15);
    z-index: 999;
    &:hover {
      display: block;
    }
    a, a:visited, a:hover {
      color: #000;
    }
  }
}

// Code Editor
//-------------------------------

.code-editor {
  width: 800px; //debug
  margin: 20px auto; //debug
  &.fullscreen {
    width: calc(100% - 40px);
    position: fixed;
    height: calc(100% - 120px);
    margin: 20px;
  }
  .controls {
    background-color: $code-top;
    @include font-size(10);
    display: block;
    padding: 15px;
    text-align: right;
    @include prefix(border-top-left-radius, 6px);
    @include prefix(border-top-right-radius, 6px);
    i {
      color: $code-text;
      cursor: pointer;
      margin-left: 15px;
      &:hover {
        color: darken($code-text,20%);
      }
    }
  }
  .embed-nav {
    background-color: $code-nav;
    padding: 15px;
    ul {
      @include flex-like-that;
      li {
          margin-right: 10px;
        a {
          @include font-size(8);
          color: $code-text;
          padding: 5px 10px;
          @include prefix(border-radius, 15px);
          text-decoration: none;
          &.active {
            background-color: $code-nav-select;
          }
        }
      }
    }
    .logo-wrap {
      display: none;
    }
  }
}

//Start Prism Code

code[class*="language-"],
pre[class*="language-"] {
	color: #f8f8f2;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	font-family: Consolas, Monaco, 'Andale Mono', monospace;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
	padding: 0 15px 15px 15px;
	overflow: auto;
  @include font-size(10);
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: $code-bg;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: $code-comment;
}

.token.punctuation {
	color: #f8f8f2;
}

.namespace {
	opacity: .7;
}

.token.function {
  color: $code-function;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol {
	color: $code-property;
}

.token.boolean,
.token.number {
	color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin {
	color: $code-selector;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
	color: $code-variables;
}

.token.atrule,
.token.attr-value {
	color: #e6db74;
}

.token.keyword {
	color: #66d9ef;
}

.token.regex,
.token.important {
	color: #fd971f;
}

.token.important {
	font-weight: bold;
}

.token.entity {
	cursor: help;
}

.token.deleted {
	color: red;
}
.token.inserted {
	color: green;
}

pre.line-numbers {
	position: relative;
	padding-left: 55px;
	counter-reset: linenumber;
}

pre.line-numbers > code {
	position: relative;
}

.line-numbers .line-numbers-rows {
	position: absolute;
	pointer-events: none;
	top: 22px;
	font-size: 100%;
	left: -100px;
	width: 40px; /* works for line-numbers below 1000 lines */
	letter-spacing: -1px;
  color: $code-linenumbers;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

	.line-numbers-rows > span {
		pointer-events: none;
		display: block;
		counter-increment: linenumber;
	}

		.line-numbers-rows > span:before {
			content: counter(linenumber);
			color: #999;
			display: block;
			padding-right: 0.8em;
			text-align: right;
		}