//*******************************************
//
//	CODEMIRROR CONTROLS
//
//	Description
//	- Buttons and icons used in the codemirror code editor.
//
//	Contents
//	1) BUTTON CONTAINER
//	2) BUTTON SYTLES
//
//*******************************************



//*******************************************
//
//	BUTTON CONTAINER
//
//*******************************************
.codemirror_controls {
	@include bp($bp_width-480, min-, $bp_width-700) {
		text-align: center;
		background: $color_gray-darker;
	}
	@include bp($bp_width-700, min-) {
		position: absolute;
		right: 0;
		z-index: $z-max;
	}
}



//*******************************************
//
//	BUTTON STYLES
//
//*******************************************
.codemirror_reset,
.codemirror_run,
.codemirror_download {
	//	EXTEND
	//	VARS (locally scoped)
	//	LAYOUT
		// Display, Positioning
		// Box Model
		margin: 0 0 0 -4px;
		padding: 0.6rem $gridUnit-default $gridUnit-smallest $gridUnit-default;
		// Type
		vertical-align: top;
	//	DISPLAY
		// Visual Enhancement
		border: 0;
		outline: 0;
		background-color: $color_gray-darker;
		// Type
	//	PSUEDO Elements & Classes
		// Elements :: before, after, first-line, first-letter, selection
		// Classes : http://css-tricks.com/almanac/
	//	CHILDREN (Sass 3.3 Syntax Only, otherwise scope child outside this selector)
	img {
		float: left;
		margin: 5px $gridUnit-smallest 0 0;
		transition: transform $transition-default-default 0s;
		transform-origin: center bottom;
		transform: translateZ(0) scaleY(1);
	}
	p {
		//	EXTEND
		//	VARS (locally scoped)
		//	LAYOUT
			// Display, Positioning
			display: inline-block;
			// Box Model
			padding: 0;
			margin:0;
			// Type
			font-size: $fontSize-small;
			line-height: $gridUnit-small;
		//	DISPLAY
			// Visual Enhancement
			color: $color_gray-lightest;
			// Type
			font-family: $fontFamily-default;
			font-weight: 700;
			font-variant:small-caps;
			text-transform:lowercase;
		//	PSUEDO Elements & Classes
			// Elements :: before, after, first-line, first-letter, selection
			// Classes : http://css-tricks.com/almanac/
		//	CHILDREN (Sass 3.3 Syntax Only, otherwise scope child outside this selector)
		//	MODIFIERS
			// Static
			transform: translateZ(0) scaleY(1);
			transform-origin: center bottom;
			// Dynamic
			transition: transform $transition-default-default 0s;
		//	BREAKPOINTS
	}
	//	MODIFIERS
		// Static
		transform: translateZ(0) scaleY(1);
		transform-origin: center top;
		// Dynamic
		transition: 
			background-color $transition-default-out 50ms,
			transform $transition-default-default 0s;
		&:hover {
			background-color: $color_gray-darkest;
			transform: scaleY(1.1);
			p,
			img {
				transform: scaleY(0.90909);
			}
		}
	//	BREAKPOINTS
	@include bp($bp_width-700, max-) {
		display: inline-block;
	}
}