/*
	_codeblock.less
	-------------
	define codeblock
*/

@syn-comment: @medium-gray;
@syn-bracket: @medium-gray;
@syn-element: #EB650C;
@syn-attr: @blue;
@syn-value: darken(@yellow,25%);
@syn-alias: #0CAFEB;
@syn-class: darken(@green,10%);
@syn-pseudo: @orange;
@syn-id: lighten(@red,35%);
@syn-var: #CE5F9D;
@syn-func: #4CB9BD;

.syn-comment{ color: @syn-comment; }
.syn-brackets{ color: @syn-bracket; }
.syn-element{ color: @syn-element; }
.syn-value{ color: @syn-value; }
.syn-attr{ color: @syn-attr; }
.syn-alias{ color: @syn-alias; }
.syn-class{ color: @syn-class; }
.syn-pseudo{ color: @syn-pseudo; }
.syn-id{ color: @syn-id; }
.syn-var{ color: @syn-var; }
.syn-func{ color: @syn-func; }

.code-block{
	background-color: @off-white;
	border: 1px solid darken(@light-gray,5%);
	color: darken(@gray,5%);
	margin: 20px 0;
	padding: 20px;
	position: relative;
		&:hover{ border-color: @medium-gray; }
		a{ border-bottom: 0; }
		pre{ tab-size: 4; white-space: pre-wrap; }
		.options{
			background-color: @light-gray;
			border-top: 1px solid darken(@light-gray,5%);
			margin: 20px -20px -20px;
			padding: 10px 10px 8px;
				.info{
					position: relative;
					top: 2px;
					.right;
				}
		}
		// dark version
		&.dark{
			background-color: lighten(@black,5%);
				&:hover{ border-color: @black; }
				code{ background-color: lighten(@black,5%); color: @white; }
				.syn-comment{ color: lighten(@black,25%); }
				.syn-attr{ color: lighten(@syn-attr,15%); }
				.options{
					background-color: lighten(@black,10%);
					border-top: 1px solid darken(@black,5%);
						a{ color: @white; &:hover{ color: darken(@yellow,25%); } }
				}
		}
		&:last-child{ margin-bottom: 0; }
}