/*------------------------------------*\
    $PATTERN LAB STYLES
\*------------------------------------*/
/**
 * NOTE: These styles are specific to Pattern Lab and should not be modified. 
 * Edit all project styles in /source/css/
 * 
 * Second note: Any important declarations are to prevent brand styles from overriding style guide 
 */
 
 
/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * STYLE GUIDE VARIABLES------------------Declarations of Sass variables 
 * -----Font
 * -----Colors
 * -----Typography
 * -----Defaults
 * -----Breakpoints
 * MIXINS---------------------------------Sass mixins 
 * GLOBAL ELEMENTS------------------------Establish global styles
 * -----Main
 * -----Headings
 * -----Text-related elements (p, blockquote, lists)
 * -----Defaults
 * -----Breakpoints
 * STYLE GUIDE INTERFACE------------------CSS for the Pattern Lab Container.
 * -----Header
 * -----Navigation
 * -----Controls
 * -----Main Container
 * -----Viewport
 * -----Section Headers
 * -----Code View
 * -----Icon Fonts
 */





/*------------------------------------*\
    $PATTERN LAB VARIABLES 
\*------------------------------------*/
/*Fonts*/
$sg-font : "HelveticaNeue", "Helvetica", "Arial", sans-serif;

/* Style Guide Interface Colors */ 
$sg-primary : #222;
$sg-secondary : #808080;
$sg-tertiary : #ddd;
$sg-quaternary : #fff;
$sg-quinary : #999;
$sg-tint : rgba(255,255,255,0.05);
$sg-tint-2 : rgba(255,255,255,0.25);
$sg-tone : rgba(0,0,0,0.1);
$sg-tone-2 : rgba(0,0,0,0.3);

/* Typography */
$sg-font-size-norm : 100%;
$sg-font-size-sm : 70%;
$sg-font-size-large : 120%;

/* Defaults */
$sg-space : 1em;
$sg-doublespace : $sg-space*2;
$sg-pad : 1em;
$sg-pad-half : $sg-pad/2;

/* Dimensions */
$offset-top: 2em;

/* Breakpoints */
$sg-bp-small : 24em;
$sg-bp-small-2 : 30em;
$sg-bp-med : 48em;
$sg-bp-large : 72em;
$sg-bp-xl : 80em;

$animate-quick: 0.2s;





/*------------------------------------*\
    $PATTERN LAB MIXINS 
\*------------------------------------*/
@mixin sg-transition($transition-property, $transition-time, $method) {
	-webkit-transition: $transition-property $transition-time $method;
	-moz-transition: $transition-property $transition-time $method;
	-ms-transition: $transition-property $transition-time $method;
	-o-transition: $transition-property $transition-time $method;
	transition: $transition-property $transition-time $method;
}






/*------------------------------------*\
    $PATTERN LAB INTERFACE 
\*------------------------------------*/

#patternlab-html, #patternlab-body {
	margin: 0;
	padding: 0;
	background: $sg-tertiary;
	-webkit-text-size-adjust: 100%;
}

.sg-nav-wrapper {
	overflow: hidden;
	background: $sg-tertiary;
}

.is-vishidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px); 
}


//Clearfix
.sg-cf {
    /**zoom: 1;*/

    &:before, &:after {
    	content: " ";
    	display: table;
    }

    &:after {
	    clear: both;
	}
}



/*------------------------------------*\
    $PATTERN LAB HEADER 
\*------------------------------------*/
/* Header */
.sg-header {
	background: $sg-primary;
	color: $sg-quaternary;
	font-family: $sg-font;
	text-transform: uppercase;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;

	* {
	  -moz-box-sizing: border-box;
	  -webkit-box-sizing: border-box;
	  box-sizing: border-box;
	}
	
	ul, ol {
		padding: 0;
		margin: 0;
	}

	li {
		list-style: none;
		border-bottom: 1px solid $sg-tint;
	}

	a {
		font-size: $sg-font-size-sm;
		color: $sg-secondary;
		text-decoration: none;
		display: block;
		line-height: 1;
		padding: $sg-pad;
		@include sg-transition(background,0.15s,ease-out);
		@include sg-transition(color,0.15s,ease-out);
		
		&:hover, &:focus, &.active {
			color: $sg-quaternary;
			background: $sg-tint;
		}
	}

	ol ol ol a { //3rd level nav item
		padding-left: 2em;
		text-transform: none;
    }
}



/* Navigation */
.sg-header .sg-nav-toggle {
	display: inline-block;
	padding: 0.9em $sg-pad;
	border-bottom: 1px solid rgba(0,0,0,0);
	position: relative;
	text-transform: uppercase;
	z-index: 2;
	
	span {
		display: inline-block;
		padding-right: 0.2em;
	}

	@media all and (min-width: $sg-bp-med) {
		display: none;
	}
}

.sg-nav-container {
	@media all and (max-width: $sg-bp-med) {
		overflow: hidden;
		max-height: 0;
		@include sg-transition(max-height,0.1s,ease-out);
		
		&.active {
			max-height: 50em;
		}
	}
}

.sg-nav {
	z-index: 1;
	margin: 0;
	padding: 0;
	list-style: none;
	
	> li {
		cursor: pointer;

		@media all and (min-width: $sg-bp-med) {
			border-bottom: 0;
			border-right: 1px solid $sg-tint;
			float: left;
			position: relative;
			
			> ol {
				position: absolute;
				top: $offset-top;
				left: 0;
			}
			
		}
	}
}

/* Accordion */
.sg-acc-handle {
	&:after {
		content: ' +';
		float: right;
		font-size: $sg-font-size-sm;
		
		@media all and (min-width: $sg-bp-med) {
			float: none;
		}
	}
	
	&.active {
		color: $sg-quaternary;
		background: $sg-tint;
		&:after {
			content: ' -';
		}
	}

	&.sg-icon:after {
		content: "";
	}
}

.sg-header .sg-icon {
	width: auto;
	font-size: 1rem;
	padding: 0.5rem 1rem;
}

.sg-acc-panel {
	overflow: hidden;
	max-height: 0;
	min-width: 10em;
	@include sg-transition(max-height,0.1s,ease-out);

	li {
		background: $sg-primary;
	}

	&.active {
		max-height: 120em;
		overflow: auto;
	}

	&.sg-right {
		position: absolute;
		left: auto;
		right: 0;
	}
	
	&.sg-left {
		position: absolute;
		left: auto;
	}

	[class^="sg-icon-"] {
		&:before {
			display: inline-block;
			margin-right: 0.4em;
		}
	}
}

/* Controls (sizing, view mode) */
.sg-controls {
	border: 0;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
}

.sg-control-trigger {
	border-bottom: 1px solid $sg-tint;
	
	@media all and (min-width: $sg-bp-med) {
		border: 0;
	}
	
	@media all and (min-width: $sg-bp-large) {
		float: left;
		width: 6em;
	}
}

.sg-control {
	> li {
		float: left;

		@media all and (min-width: $sg-bp-med) {
			border-bottom: 0;
			border-left: 1px solid $sg-tint;
		}
	}
	
	.sg-input {
		padding: 0.1em;
		-webkit-transition: all $animate-quick ease-out;
	    -moz-transition: all $animate-quick ease-out;
	    -ms-transition: all $animate-quick ease-out;
	    -o-transition: all $animate-quick ease-out;
	    transition: all $animate-quick ease-out;

		&:active, &:focus {
			outline: 0;
			background: $sg-quinary;
			color: #000;
		}
	}
}

.sg-current-size {
	font-size: 70%;
	color: $sg-secondary;
	padding: 0.85em 0.7em;

	&:hover {
		.sg-input {
			background: $sg-quinary;
			color: #000;
		}
	}

	@media all and (min-width: $sg-bp-large) {
		float: left;
	}
}

.sg-size {
	width: 135px;

	@media all and (min-width: $sg-bp-med) {
		width: auto;
	}
}

.sg-size-options {

	@media all and (min-width: $sg-bp-large) {
		float: left;
		position: static;
		max-height: none;
		max-width: none;

		> li {
			float: left;
			border: 0;
			border-left: 1px solid $sg-tint;
		}
	}
}

//Media Queries Dropdown
#sg-size-mq {
	display: none;

	@media all and (min-width: $sg-bp-large) {
		display: block;
	}
}

#sg-form {
	margin: 0;
	border: 0;
	padding: 0;
}

.sg-input {
	margin: -2px 0 0 0;
	padding: 0;
	border: 0;
	background-color: #222;
	color: gray;
	width: 25px;
	text-align: right;

	@media all and (min-width: $sg-bp-med) {
		width: 35px;
	}
}

.sg-input-active {
	background-color: #fff;
	color: #000;
}

.sg-view {
	position: relative;

	> ul {
		position: absolute;
		top: $offset-top;
		left: 0;
	}
}

//Checklist dropdown lists
.sg-checkbox {
	@extend .sg-icon-radio-unchecked;

	&:before {
		display: inline-block;
		margin-right: 0.4em;
	}

	&.active {
		@extend .sg-icon-radio-checked;
	}
}

//Pattern States (active, inprogress, complete, etc)

/* basic styling */
.sg-pattern-state:before {
	margin-right: 4px;
	content: "\2022";
	display: inline-block;
	margin-bottom: -4px;
	font-size: 18px;
	vertical-align: bottom;
}

/* nav styling */
.sg-nav .sg-pattern-state:before {
	margin-top: -4px;
	margin-bottom: 0;
	margin-left: -4px;
	height: 20px;
	display: block;
	float: left;
}

.sg-sub-nav .sg-pattern-state:before {
	margin-left: -11px;
	margin-right: 4px;
}

/* call out for pattern's pattern state */
span.sg-pattern-state {
	color: #999;
}

span.sg-pattern-state:before {
	margin-bottom: -3px;
	margin-left: 4px;
}

/* pattern states */
.inprogress:before {
	color: #FF4136 !important;
}

.inreview:before {
	color: #FFCC00 !important;
}

.complete:before {
	color: #2ECC40 !important;
}



/*------------------------------------*\
    $PATTERN LAB VIEWPORT
\*------------------------------------*/

/* Viewport */
#sg-vp-wrap {
	text-align: center;
	width: 100%;
	position: fixed;
	top: $offset-top;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 0;

	&.wrap-animate {
		-webkit-transition: left 0.3s ease-out;
	    -moz-transition: left 0.3s ease-out;
	    -ms-transition: left 0.3s ease-out;
	    -o-transition: left 0.3s ease-out;
	    transition: left 0.3s ease-out;
	}

}

#sg-viewport {
	position: absolute;
	height: 100%;
	width: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: white;

  &.hay-mode {
		-webkit-transition: all 40s linear;
	    -moz-transition: all 40s linear;
	    -ms-transition: all 40s linear;
	    -o-transition: all 40s linear;
	    transition: all 40s linear;
	}
}

.no-resize {
	#sg-cover, #sg-rightpull-container {
		display: none;
	}

	#sg-viewport {
		overflow: hidden !important;
	}
	
}

#sg-cover {
	width: 100%; 
	height: 100%; 
	display: none; 
	position: absolute; 
	z-index: 20; 
	cursor: col-resize;
}

#sg-gen-container {
	height: 100%;
	position: relative;
	text-align: center; 
	margin: 0 auto;
	-webkit-overflow-scrolling: touch;
	overflow-y: auto;
	overflow-x: hidden;

	&.hay-mode {
		-webkit-transition: all 40s linear;
	    -moz-transition: all 40s linear;
	    -ms-transition: all 40s linear;
	    -o-transition: all 40s linear;
	    transition: all 40s linear;
	}
}

#sg-rightpull-container {
	width: 14px; 
	float: right; 
	margin: 0; 
	height: 100%; 
	cursor: col-resize;
}

#sg-rightpull {
	margin: 0; 
	width: 100%; 
	height: 100%; 
	background: #999;
	-webkit-transition: background $animate-quick ease-out;
    -moz-transition: background $animate-quick ease-out;
    -ms-transition: background $animate-quick ease-out;
    -o-transition: background $animate-quick ease-out;
    transition: background $animate-quick ease-out;

	&:hover {
		background: #666;
	}

	&:active {
		cursor: col-resize;
		background: #444;
	}
}

.vp-animate {
  -webkit-transition: width 0.8s ease-out;
  -moz-transition: width 0.8s ease-out;
  -ms-transition: width 0.8s ease-out;
  -o-transition: width 0.8s ease-out;
  transition: width 0.8s ease-out;
}





/*------------------------------------*\
    $PATTERN LAB CONTENT 
\*------------------------------------*/

/* Section Pattern */
.sg-pattern {
	margin-bottom: $sg-doublespace;
	position: relative; //Prevents absolutely-positioned elements from floating to the top
	@extend .sg-cf;
}

/* Section Head */
.sg-pattern-head {
	margin: $sg-doublespace 0;
	font-family: $sg-font;
	font-size: $sg-font-size-sm;
	font-weight: normal;
	padding: $sg-pad 0;
	border-bottom: 1px solid $sg-secondary;

	a {
		display: block;
		color: $sg-secondary;
		text-decoration: none;
		cursor: pointer;
		
		&:hover {
			color: $sg-primary;
		}
	}
}

//Annotations and code view container
.sg-view-container {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-family: $sg-font;
	line-height: 1.4;
	font-size: 90%;
	background: $sg-primary;
	color: $sg-secondary;
	position: fixed;
	top: auto;
	padding: $sg-pad;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 50%;
	overflow-y: auto;
	overflow-x: hidden;

  	a {
    	color: $sg-quinary;
    }

     pre {
		padding: 0 1em;
	}

	&.anim-ready {
		-webkit-transition: bottom 0.3s ease-out;
		-moz-transition: bottom 0.3s ease-out;
	  	-webkit-transition: bottom 0.3s ease-out;
	  	-ms-transition: bottom 0.3s ease-out; 
	  	-o-transition: bottom 0.3s ease-out;
	  	transition:  bottom 0.3s ease-out;
	}
}

//Annotation and code view close button
.sg-view-close {
	width: 100%;
	margin-bottom: -10px;
}

.sg-view-close-btn {
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
	text-align: right;
	display: block;
}

//Annotated elements Styles
.has-annotation {
	cursor: help !important;
	box-shadow: 0 0 10px $sg-secondary;

	a, input {
		cursor: help !important;
	}

	&:hover {
		box-shadow: 0 0 10px $sg-primary;
	}

	&.active {
		box-shadow: inset 0 0 20px $sg-secondary;
	}
	
}

.annotation-tip {
	display: block;
	position: absolute;
	margin-top: -10px !important;
	margin-left: -10px !important;
	width: 25px !important;
	height: 25px !important;
	border-radius: 13px !important;
	text-align: center !important;
	background: #444 !important;
	color: #fff !important;
	font-weight: bold !important;
	font-size: 16px !important;
	z-index: 100;
}

#sg-comments-container {
	max-width: 60em;
	margin: 0 auto;
}

.sg-comment-container {
	padding-bottom: 2em;
	margin-bottom: $sg-space;
	border-bottom: 1px solid $sg-tint-2;

	p:last-child {
		margin-bottom: 0;
	}

	h2 {
		margin-bottom: 0.25em;
	}
}

.sg-code, .sg-annotations {
	clear: both;
	background: $sg-tertiary;
	color: $sg-primary;
	padding: $sg-pad $sg-pad-half;
	margin: $sg-space 0;

	a {
		text-decoration: underline;
	}
}

.sg-code {
	pre {
		white-space: -moz-pre-line;
		white-space: -pre-line;
		white-space: -o-pre-line;
		word-wrap: break-word; 
		white-space: pre-line;
		border: 1px solid $sg-tone;
		padding: $sg-pad-half;
	}
}

.sg-code-contains {
	margin-bottom: 1rem;
	font-size: 85%;
	color: $sg-secondary;

	code {
		padding: 0.2em;
		background: $sg-tone-2;
		color: $sg-quinary;
		position: relative;
		top: -2px;
	}
}

.sg-code-head {
	color: $sg-secondary;
	font-size: 1em;
}

#sg-code-markup {
	padding-top: 10px;
}

#sg-code-tabs {
	list-style: none;
	margin: 0;
	padding: 0;
}

#sg-code-tabs li {
	float: left;
	background-color: #333;
	font-size: 1.3em;
	font-weight: bold;
	padding: 5px 15px;
	border-top: 2px solid #666;
	margin-right: 2px;
	cursor: pointer;
}

.sg-code-title-active {
	color: #bbb;
	background-color: #272822 !important;
}

div.clear {
	clear: both;
}

.sg-code-patternname {
	color: #aaa; 
}

#sg-code-loader {
	display: none;
	position: absolute;
	left: 45%;
	top: 20%;
	width: 150px;
	padding: 10px;
	text-align: center;
	border-radius: 10px;
	background-color: #000;
	z-index: 100; 
}

.spinner {
	height: 30px;
	width: 30px;
	margin-left: auto; margin-right: auto;
	background-position: center center;
	background-repeat: no-repeat;
	background: url('../images/spinner.gif');
	border-radius: 50%;
	opacity: .7;
}

/* Pattern Lab icon fonts */
@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot?srsv7g');
	src:url('../fonts/icomoon.eot?#iefixsrsv7g') format('embedded-opentype'),
		url('../fonts/icomoon.woff?srsv7g') format('woff'),
		url('../fonts/icomoon.ttf?srsv7g') format('truetype'),
		url('../fonts/icomoon.svg?srsv7g#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

.sg-icon-search, .sg-icon-cog, .sg-icon-minus, .sg-icon-plus, .sg-icon-menu, .sg-icon-radio-checked, .sg-icon-radio-unchecked, .sg-icon-file, .sg-icon-link, .sg-icon-keyboard, .sg-icon-qrcode, .sg-icon-eye, .sg-checkbox {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.sg-icon-search:before {
	content: "\e600";
	font-size: 85%;
}
.sg-icon-cog:before {
	content: "\e601";
}
.sg-icon-minus:before {
	content: "\e602";
}
.sg-icon-plus:before {
	content: "\e603";
}
.sg-icon-menu:before {
	content: "\e604";
}
.sg-icon-radio-checked:before, .sg-checkbox.active:before {
	content: "\e605";
}
.sg-icon-radio-unchecked:before, .sg-checkbox:before {
	content: "\e606";
}
.sg-icon-file:before {
	content: "\e607";
}
.sg-icon-link:before {
	content: "\e608";
}
.sg-icon-keyboard:before {
	content: "\e609";
}
.sg-icon-qrcode:before {
	content: "\e60a";
}
.sg-icon-eye:before {
	content: "\e60b";
}

/******************************************************************/
/* End Pattern Lab Interface code */