@charset "UTF-8";

@import "color-palette";
@import "variables";
@import "breakpoint";

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&subset=latin,cyrillic-ext');

/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+apacheconf+c+bash+cpp+csharp+ruby+css-extras+git+java+json+markdown+nginx+php+php-extras+sass+scss+twig+yaml&plugins=line-numbers */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] { direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; tab-size: 4; hyphens: none; }

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #999;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: #a67f59;
	// background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: #07a;
}

.token.function {
	color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

pre.line-numbers { position: relative; padding-left: 64px; counter-reset: linenumber; }
pre.line-numbers > code { position: relative; }
.line-numbers .line-numbers-rows { position: absolute; pointer-events: none; top: 0; font-size: 100%; left: -64px; width: 52px; letter-spacing: -1px; border-right: 1px solid $color-divider; user-select: none; }
.line-numbers-rows > span { pointer-events: none; display: block; counter-increment: linenumber; }
.line-numbers-rows > span:before { content: counter(linenumber); color: $color-text-secondary; display: block; padding-right: 12px; text-align: right; }

.code-card { box-shadow: 0 2px 5px rgba(0,0,0,0.24); border-radius: 2px;
  .card &, .content-card .card-holder & { margin-left: -16px; margin-right: -16px; box-shadow: none; border-radius: 0; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; }
}

@include breakpoint($xs) {
  .card .code-card, .content-card .card-holder .code-card { margin-left: -24px; margin-right: -24px; }
}

/* theme dark */
.theme-dark {
	
	/* http://prismjs.com/download.html?themes=prism-twilight&languages=markup+css+clike+javascript+apacheconf+c+bash+cpp+csharp+ruby+css-extras+git+java+json+markdown+nginx+php+php-extras+sass+scss+twig+yaml&plugins=line-numbers */
	/**
	 * prism.js Twilight theme
	 * Based (more or less) on the Twilight theme originally of Textmate fame.
	 * @author Remy Bach
	 */
	
	.token.comment,
	.token.prolog,
	.token.doctype,
	.token.cdata {
		color: hsl(0, 0%, 47%); /* #777777 */
	}

	.token.punctuation {
		opacity: .7;
	}

	.namespace {
		opacity: .7;
	}

	.token.tag,
	.token.boolean,
	.token.number,
	.token.deleted {
		color: hsl(14, 58%, 55%); /* #CF6A4C */
	}

	.token.keyword,
	.token.property,
	.token.selector,
	.token.constant,
	.token.symbol,
	.token.builtin {
		color: hsl(53, 89%, 79%); /* #F9EE98 */
	}

	.token.attr-name,
	.token.attr-value,
	.token.string,
	.token.char,
	.token.operator,
	.token.entity,
	.token.url,
	.language-css .token.string,
	.style .token.string,
	.token.variable,
	.token.inserted {
		color: hsl(76, 21%, 52%); /* #8F9D6A */
	}

	.token.atrule {
		color: hsl(218, 22%, 55%); /* #7587A6 */
	}

	.token.regex,
	.token.important {
		color: hsl(42, 75%, 65%); /* #E9C062 */
	}

	.token.important,
	.token.bold {
		font-weight: bold;
	}
	.token.italic {
		font-style: italic;
	}

	.token.entity {
		cursor: help;
	}

	pre[data-line] {
		padding: 1em 0 1em 3em;
		position: relative;
	}

	/* Markup */
	.language-markup .token.tag,
	.language-markup .token.attr-name,
	.language-markup .token.punctuation {
		color: hsl(33, 33%, 52%); /* #AC885B */
	}

	.line-numbers .line-numbers-rows { border-right: 1px solid $color-light-divider; }
	.line-numbers-rows > span:before { color: $color-text-light-secondary; }

	.card .code-card, &.content-card .card-holder .code-card { border-color: #585858; }

}
