// This module must be imported first before other EDGE module

@import "compass";

// ----------
// COLOR
// ----------
$main-color    : #0099CC !default;
$sub-color     : #AAA !default;
$alert-color   : #CC0000 !default;
$success-color : #3D9900 !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;

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

// ---------------
// GLOBAL VALUE
// ---------------
$g-radius : 5px !default;
$g-round  : 1000px !default;

$content-width : 1140px !default; // For grid

// ------------------------
// 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($em-base) * 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 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  : em(480px) !default;
$small-screen  : em(767px) !default;
$medium-screen : em(1140px) !default;
$large-screen  : em(1440px) !default;
$retina-screen : 192dpi !default;
// 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) {
	@if $applyTo == top {
		$size : 0 1px; }
	@else if $applyTo == right {
		$size : 1px 0; }
	@else if $applyTo == left {
		$size : -1px 0; }
	@else if $applyTo == bottom {
		$size : 0 -1px; }
	
	// Initialize the shiny shadow
	@if $activeState {
		$shiny : inset $size 0 rgba(black, 0.2);
	} @else {
		$shiny : inset $size 0 rgba(white, 0.5);
	}
	@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  : $scolor;
		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 corner 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;
	}
}