/*------------------------------------*\
    $PATTERN LAB-SPECIFIC STYLES
\*------------------------------------*/
/**
 * This stylesheet is for styles you want to include only when the interface is being viewed within Pattern Lab.
 * This is helpful for displaying demo styles for grids, animations, color swatches, etc
 * It's also helpful for overriding context-specific styles like fixed or absolutely positioned elements
 * These styles will not be your production CSS.
 */


/* 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 : 80%;
$sg-font-size-large : 120%;

/* Defaults */
$sg-space : 1em;
$sg-doublespace : $sg-space*2;
$sg-pad : 1em;
$sg-pad-half : $sg-pad/2;
$sg-border-rad: 4px;

/* 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;


// Demo to show grid system - in this stylesheet because it shouldn't be included in the production styles
.demo {
	overflow: hidden;
	margin-bottom: 1rem;
}

.demo .gi, .demo .demo-block {
	background: $sg-tertiary;
	color: $sg-secondary;
	text-align: center;
	margin-bottom: $sg-pad-half;
	padding: 1em !important;

	&:nth-of-type(2n) {
		color: $sg-tertiary;
		background: $sg-secondary;
	}

	.gi {
		background: $sg-tone;
		color: $sg-tertiary;

		&:nth-of-type(2n) {
			background: $sg-tone-2;
		}
	}
}

//Demo box for animation
.demo-animate {
	background: #ddd;
	padding: $sg-pad;
	margin-bottom: $sg-space;
	text-align: center;
}

//Animate Demo to show
.animate-move {
	position: relative;

	.demo-shape {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 20px;
		background: $sg-secondary;
	}

	&:hover {
		> .demo-shape {
			left: 100%;
			margin-left: -20px;
		}
	}
}

// Style Guide color swatches
.sg-colors {
	overflow: hidden;
	display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: center;
  align-items: flex-start;

	li {
		box-sizing: border-box;
		overflow: hidden;
		margin: 0 0 1em 0;
		flex-grow: 0;
	 	flex-shrink: 1;
		width: 100%;

		@media all and (min-width: $sg-bp-small) {
			width: calc(50% - 1em);
			margin-right: 1em;
		}

		@media all and (min-width: $sg-bp-med) {
			width: calc(25% - 1em);
			margin-right: 1em;
		}

		@media all and (min-width: $sg-bp-large) {
			width: calc(15% - 1em);
			margin-right: 1em;
		}
	}
}

.sg-swatch {
	display: block;
	height: 120px;
	border-radius: $sg-border-rad - 2;
	margin-bottom: 10px;
	margin-right: 0.3em;
	box-shadow: inset 0 0 1px rgba(#000, .2);
}

.sg-label {
	display: block;
	line-height: 1;
	font-family: monospace;
	font-size: $sg-font-size-sm;
}

.sg-grid-example .col {
  height: 150px;
  border: 1px solid #eee;
  margin-bottom: 20px;
  text-align: center;
  padding: 20px;
  font-size: .75em;
}

.sg-icons {
  list-style-type: none;
  padding-left: 0;

	li {
		text-align: center;

		.icon {
			display: inline-block;
      margin: 0 auto;

      &:before {
        position: relative;
        top: -10px;
        left: 3px;
      }
		}

		.codes {
      position: relative;
	    font-family: monospace;
	    border-radius: 2px;
	    height: 30px;
	    line-height: 30px;
      color: $sg-tone-2;
			font-size: $sg-font-size-sm;

      &:nth-child(odd) {
        margin-top: -15px;
      }
		}
  }

  .bit-4 {
    width: 17%;
    float: left;
    margin: 0 1.5%;
    margin-bottom: 40px;
  }
}