//=====================================*/
// IMPORTS
//=====================================*/

//Remove when Codekit==================
$whitespace: 20px;
@import url(https://fonts.googleapis.com/css?family=Raleway:500,600,400);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300);
$font-family-headline : 'Raleway', sans-serif !default;
$font-family-text     : 'Roboto', sans-serif !default;
$font-family          : $font-family-text !default;
$font-size-xs  : 10px !default;
$font-size-s   : 12px !default;
$font-size-m   : 14px !default;
$font-size-l   : 16px !default;
$font-size-xl  : 20px !default;
$font-size-xxl : 28px !default;
$font-size     : $font-size-m !default;
$line-height   : 1.6 !default;
//Remove when Codekit==================

@import "../hfc-relay-ui-kit.scss";

//=====================================*/
// DEMO STYLES
//=====================================*/
body {
  font-family: 'OpenSansRegular', sans-serif;
  color: $color-text;
  p{color: #666; font-size: 14px;}
  strong {color: #333;}
  hr {border: none; border-bottom: $border; margin-top: $whitespace;}
  h1 {color: $color-headline;}
  h3 {color: $color-headline; border-top: $border; padding-top: $whitespace; margin-top: ($whitespace*4);}
}
div {
  padding: $whitespace;
  border: $border;
  background: $color-grey;
}

.arrow {
	@include arrow($direction: up, $align: left, $color: $color-brand, $size: 10px);
}

.button {
	@include button();
}

.icon {
	@include icon('fa-caret-right');
}

.position {
	@include position(relative, $top:-10px, $right:0, $bottom:0, $left:0);
}

.quantity {
	.box {
		@include quantity-above(2) {
			background: $color-brand;
		}
	}
}

.transition {
	@include transition();
	&:hover {
		background: $color-brand;
	}
}