<commit_before>/*------------------------------------*\
    $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 : 81em;

$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;<commit_msg>Update primary color<commit_after>/*------------------------------------*\
    $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 : #000;
$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 : 81em;

$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 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;
{'fraction_non_alphanumeric': 0.22373566501164374, 'fraction_numerical': 0.02825255942703985, 'mean_word_length': 2.2776497695852536, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '521371', 'n_tokens_mistral': 9839, 'n_tokens_neox': 8670, 'n_words': 1972}