// This module MUST be imported first before any other EDGE module
@charset "UTF-8";
@import "compass";

// -------------------------------------------------------
// OUTPUT CONFIG
// FULL:
//   Set to true to keep full styling
//   Set to false to use barebone style
// DEBUG:
//   Set to true for various useful functionality during
//   development
// EXTERNAL CALL:
//   Add extra feature if calling Component's mixin exter-
//   -nally
// INCLUDE:
//   Set to false if you want to import the mixins only
// -------------------------------------------------------
$full  : true !default;
$debug : false !default;

$external-call : false !default; // user shouldn't modify this

$include-main       : true !default;
$include-grid       : true !default;
$include-block-grid : true !default;
$include-visibility : true !default;

$include-button     : true !default;
$include-form       : true !default;
$include-typography : true !default;

$include-normalize  : true !default;
$include-print      : true !default;

// ----------
// COLOR
// ----------
// Two main colors of your site
$main-color    : #0173BC !default;
$sub-color     : #E9E9E9 !default;

// These 5 colors below should NEVER be used directly
// Put it to other variable like $header-color: $blue-color;
$passive-color : #E9E9E9 !default;
$blue-color    : #0173BC !default;
$yellow-color  : #DBA924 !default;
$red-color     : #DA2E18 !default;
$green-color   : #2CAE34 !default;

// ---------------
// BODY
// ---------------
$body-bg          : #fff !default;
$body-font-color  : #222 !default;
$body-font-weight : normal !default;
$body-font-style  : normal !default;

$header-font-family : "Helvetica Neue", "Helvetica", Helvetica, Arial, "sans-serif" !default;
$body-font-family   : "Helvetica", Helvetica, Arial, "sans-serif" !default;
$code-font-family   : "Consolas", Courier, "monospace" !default;

// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with brower-based text zoom or user-set defaults.
$base-font-size   : 100% !default;
// Maximum width of the grid
$content-width    : 1140px !default;

// ---------------
// GLOBAL VALUE
// ---------------
$g-radius : 5px !default;
$g-round  : 1000px !default;
$g-transition : all 0.2s ease-out !default;

%transition { @include transition($g-transition); }

// ------------------------
// PIXEL --> EM CONVERTER
// ------------------------
$em-base  : 16px !default;

// It strips the unit of measure and returns it
@function stripUnit($num) {
	@return $num / ($num * 0 + 1);
}

// Convert the number to EM
@function convertToEm($value, $context: $em-base) {
	// If not number, return it as is
	@if type-of($value) != number { @return $value; }
	
	$value: stripUnit($value) / stripUnit($context) * 1em;
	// Turn 0em into 0
	@if ($value == 0em) {
		$value: 0;
	}
	@return $value;
}

// Based on: mrdanadams.com/2012/pixel-ems-css-conversion-sass-mixin/
// EXAMPLE
//   width   : em(500px);
//   padding : em(20px 30px 15px 10px);
//   @include box-shadow(em(inset 2px 0 5px rgba(black, 0.3) ) );
@function em($values, $context: $em-base) {
	// If debug mode, return it plainly
	@if $debug {
		@return $values;
	}
	// Only convert to EM on non-debug mode
	@else {
		// If the value only contain single number, return it quickly without the overhead further below
		@if type-of($values) == number {
			@return convertToEm($values, $context);
		}

		$emValues   : (); // This will eventually store the converted $values in a list
		@each $val in $values {
			$emValues: append($emValues, convertToEm($val, $context) );
		}
		@return join((), $emValues, space );
	}
}

// -------------------
// MEDIA QUERIES
// -------------------
$phone-screen  : 480px !default;
$small-screen  : 767px !default;
$medium-screen : 1140px !default;
$large-screen  : 1440px !default;
$retina-screen : 192dpi !default;

// Custom size and down
@mixin custom($size) {
	@media only screen and (max-width: $size) { @content; }
}
// 480px and down
@mixin phone() {
	@media only screen and (max-width: $phone-screen) { @content; }
}
// 767px and down
@mixin small() {
	@media only screen and (max-width: $small-screen) { @content; }
}
// 768px and up. If you're planning to support IE8, NEVER use medium-up
@mixin medium-up() {
	@media only screen and (min-width: $small-screen) { @content; }
}
// 1140px and down
@mixin medium() {
	@media only screen and (max-width: $medium-screen) { @content; }
}
// large() is not needed, just put it outside media query

// 2x pixel ratio
@mixin retina() {
	@media only screen and (-webkit-min-device-pixel-ratio: 2),
	(min-resolution: $retina-screen) {
		@content;
	}
}
// Landscape orientation __
@mixin landscape {
	@media only screen and (orientation: landscape) { @content; }
}
// Portrait orientation |
@mixin portrait {
	@media only screen and (orientation: portrait) { @content; }
}

// ---------------------------------------------------
// SHINY EFFECT
// Give emboss feel to an element
//
// Use this in conjunction with Compass' box-shadow()
//     @include box-shadow(shiny(right), ...)
// ---------------------------------------------------
@function shiny($applyTo: top, $activeState: false) {
	$size  : 0 1px; // top
	$shiny : inset $size 0 rgba(white, 0.5); // normal state

	@if $applyTo == right {
		$size : 1px 0; }
	@else if $applyTo == left {
		$size : -1px 0; }
	@else if $applyTo == bottom {
		$size : 0 -1px; }
	
	// Change the shiny shadow if active-state
	@if $activeState {
		$shiny : inset $size 0 rgba(black, 0.2);
	}
	@return $shiny;
}

// ----------------------------------------------
// CLEARING FLOAT
// Make a container wraps floated element
//
// If you prefer readable output, use the mixin
// If you prefer smaller output, use placeholder
// ----------------------------------------------
%clearfix {
	zoom: 1;
	&:before, &:after {
		content : " ";
		display : table;
	}
	&:after {
		clear   : both;
	}
}
@mixin clearfix {
	zoom: 1;
	&:before, &:after {
		content : " ";
		display : table;
	}
	&:after {
		clear   : both;
	}
}


// --------------------------------
// SELECTION
// Change the text highlight color
// --------------------------------
@mixin selection($color: lighten($main-color, 35%) ) {
	::-moz-selection {
		background  : $color;
		text-shadow : none;
	}
	::selection {
		background  : $color;
		text-shadow : none;
	}
}

// ------------------------------------------------------
// DISABLE SELECTION
// Prevents user to select/highlight the element's text
// ------------------------------------------------------
%disable-user-select {
	-webkit-touch-callout : none;
	-webkit-user-select   : none;
	-khtml-user-select    : none;
	-moz-user-select      : none;
	-ms-user-select       : none;
	user-select           : none;
}

// ---------------------
// TEXT DIRECTION
// ---------------------
$text-direction   : ltr !default; // Controls default global text direction, 'rtl' or 'ltr'
$default-float    : left !default;
$default-opposite : right !default;
// No need to change this conditional statement, $text-direction variable controls it all.
@if $text-direction == ltr {
	$default-float    : left;
	$default-opposite : right;
} @else {
	$default-float    : right;
	$default-opposite : left;
}

// ----------------------------------------------------------
// TRIANGLE
// Create a triangle
//
// Don't specify the `height` to create equalateral triangle
// ----------------------------------------------------------
@mixin triangle($direction, $color, $width, $height: false) {
	// If height is not specified, make the triangle equalateral
	@if not $height {
		// If normal triangle, `height` is set to half `width`
		@if $direction == top or
			$direction == right or
			$direction == left or
			$direction == bottom {
			$height : $width/2;
		}
		// Else if cornered triangle, `heigth` is the same as `width`
		@else if $direction == top-right or
				 $direction == top-left or
				 $direction == bottom-right or
				 $direction == bottom-left {
			$height : $width;
		}
	}
	width        : 0;
	height       : 0;
	font-size    : 0;
	line-height  : 0%;
	border-style : solid;
	border-color : transparent;
	// Top /\
	@if $direction == top {
		border-width        : 0 $width/2 $height $width/2;
		border-bottom-color : $color;
	}
	// Right |>
	@else if $direction == right {
		border-width      : $width/2 0 $width/2 $height;
		border-left-color : $color;
	}
	// Bottom \/
	@else if $direction == bottom {
		border-width     : $height $width/2 0 $width/2;
		border-top-color : $color;
	}
	// Left <|
	@else if $direction == left {
		border-width       : $width/2 $height $width/2 0;
		border-right-color : $color;
	}

	//            __
	// Top-right  \ | 
	//             \|
	@else if $direction == top-right {
		border-width       : 0 $width $height 0;
		border-right-color : $color;
	}
	
	// Bottom-right /|
	//             /_|
	@else if $direction == bottom-right {
		border-width        : 0 0 $height $width;
		border-bottom-color : $color;
	}
	// Bottom-left |\
	//             |_\
	@else if $direction == bottom-left {
		border-width      : $height 0 0 $width;
		border-left-color : $color;
	}
	//           __
	// Top-left | /
	//          |/
	@else if $direction == top-left {
		border-width     : $height $width 0 0;
		border-top-color : $color;
	}
}