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

// ------------------------------------
// Override default Compass' variables
// ------------------------------------
$contrasted-dark-default  : #222;
$contrasted-light-default : white;

// Remove useless vendor prefix
$support-for-original-webkit-gradients : false;
$experimental-support-for-microsoft    : false;
$experimental-support-for-opera : false;
$experimental-support-for-khtml : false;

// -------------------------------------------------------
// OUTPUT CONFIG
// Debug      : if true - add useful functionality for development
// Responsive : add responsiveness to the output
//
// External call   : Add extra feature if calling Component's mixin externally
// Include         : if false - no CSS output
// -------------------------------------------------------
$debug       : false !default;
$responsive  : true !default;

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

// Can't be overriden
$include-normalize  : true !default;
$include-typography : true !default;
$include-grid       : true !default;
$include-form       : true !default;

// Default true
$include-tile       : true !default;
$include-visibility : true !default;
$include-button     : true !default;

// Default false
$include-animate    : false !default;
$include-print      : false !default;
$include-code       : false !default;

// ----------
// COLOR
// ----------

// These 5 colors below should NEVER be used directly
// Put it to other variable like $header-color: $blue-color;
$passive-color : #d7d7d7 !default;
$blue-color    : #2a71e3 !default;
$yellow-color  : #fac741 !default;
$red-color     : #d35400 !default;
$green-color   : #229e61 !default;

// Two main colors of your site
$main-color    : $blue-color !default;
$sub-color     : $passive-color !default;

// ---------------
// GLOBAL VALUE
// ---------------
$g-radius : 3px !default;
$g-transition : all .2s ease-out !default;

// ----------------------------
// BASE FONT and LINE-HEIGHT
// ----------------------------
$body-font-size   : 16px !default;
$body-line-height : 1.5 !default;

// ------------------------
// PIXEL --> EM CONVERTER
// ------------------------
// 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: $body-font-size) {
  // 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;
}

// EXAMPLE USAGE
//   width   : em(500px);
//   padding : em(20px 30px 15px 10px);
//   border  : em(10px solid rgba(black, 0.3) );
@function em($values, $context: $body-font-size) {
  // 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
//   How to use:
//     @include below(small)
//     @include below(500px)
//     @include above(retina)
//     @include between(small, medium)

//     @media only screen and #{above(small)} and #{portrait}
// -------------------
$mini-screen  : 480px !default;
$small-screen : 767px !default;
$large-screen  : 1440px !default;
$retina-screen : 192dpi !default;

@function translateSize($size) {
  // If passed param is number, return it as it is
  @if type-of($size) == number {
    @return $size;
  }
  // Else, return the size as requested
  @else if $size == mini {
    @return $mini-screen;
  }
  @else if $size == small {
    @return $small-screen;
  }
  @else if $size == large {
    @return $large-screen;
  }
  @else if $size == retina {
    @return $retina-screen;
  }
}

// Function to be used in conjunction with @media
@function below($named-size) {
  $size: translateSize($named-size);
  @if $size == retina {
    @return "(-webkit-max-device-pixel-ratio: 2), (max-resolution: #{$size})";
  }
  @else {
    @return "(max-width: #{$size})";
  }
}

@function above($named-size) {
  $size: translateSize($named-size) + 1px;
  @if $named-size == retina {
    @return "(-webkit-min-device-pixel-ratio: 2), (min-resolution: #{$size})";
  }
  @else {
    @return "(min-width: #{$size})";
  }
}

@function between($smaller-size, $larger-size) {
  $smaller-size: translateSize($smaller-size);
  $larger-size: translateSize($larger-size);
  @return "(min-width: #{$smaller-size}) and (max-width: #{$larger-size})";
}

@function landscape() {
  @return "(orientation: landscape)";
}

@function portrait() {
  @return "(orientation: portrait)";
}

// Standalone mixin
@mixin below($named-size) {
  $size: translateSize($named-size);
  @if $named-size == retina {
    @media only screen and (-webkit-max-device-pixel-ratio: 2), (max-resolution: $size) {
      @content;
    }
  } 
  @else {
    @media only screen and (max-width: $size) { @content; }
  }
}

@mixin above($named-size) {
  $size: translateSize($named-size) + 1px;
  @if $named-size == retina {
    @media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: $size) {
      @content;
    }
  }
  @else {
    @media only screen and (min-width: $size) { @content; }
  }
}

@mixin between($smaller-size, $larger-size) {
  $smaller-size: translateSize($smaller-size);
  $larger-size: translateSize($larger-size);
  @media only screen and (min-width: $smaller-size) and (max-width: $larger-size) {
    @content;
  }
}

// ------------
// CONTRAST
// ------------

@function is_dark($color) {
  @return contrast-color($color, false, true, 70%);
}

@function is_light($color) {
  @return not is_dark($color);
}

// ----------------------------------------------
// CLEARING FLOAT
//   Make a container wraps floated element
// ----------------------------------------------
@mixin clearfix {
  zoom:  1;
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// --------------------------------
// SELECTION
//   Change the text highlight color
// --------------------------------

@mixin selection($background-color:lighten($main-color, 35%), $color:white) {
  ::-moz-selection {
    background: $background-color;
    text-shadow: none !important;
    color: $color !important;
  }

  ::selection {
    background: $background-color;
    text-shadow: none !important;
    color: $color !important;
  }
}

// ------------------------------------------------------
// DISABLE SELECTION
//   Prevents user to select/highlight the element's text
// ------------------------------------------------------
@mixin 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;
}

@mixin user-select($value) {
  -webkit-touch-callout: $value;
  -webkit-user-select: $value;
  -khtml-user-select: $value;
  -moz-user-select: $value;
  -ms-user-select: $value;
  user-select: $value;
}

// ---------------------
// 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(
  $width,
  $direction : top,
  $color     : $main-color,
  $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 == up or
      $direction == right or
      $direction == left or
      $direction == bottom or 
      $direction == down {
      $height : ($width / 2) * 1.732;
    }
    // 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 or $direction == up {
    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 or $direction == down {
    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;
  }
}

// ------------------------------------------------
// CSS3 - VENDOR PREFIX
// for property that is not supported by Compass
// ------------------------------------------------
@mixin css3($property, $value,
  $moz      : $experimental-support-for-mozilla,
  $webkit   : $experimental-support-for-webkit,
  $o        : $experimental-support-for-opera,
  $ms       : $experimental-support-for-microsoft,
  $khtml    : $experimental-support-for-khtml,
  $official : true) {

  @if $webkit { -webkit-#{$property}: $value; }
  @if $khtml { -khtml-#{$property}: $value; }
  @if $moz { -moz-#{$property}: $value; }
  @if $ms { -ms-#{$property}: $value; }
  @if $o { -o-#{$property}: $value; }
  @if $official { #{$property}: $value; }
}