// SalesCrowd Variables
// SalesCrowd Swatches
//$salescrowd-orange:           #e48648;
$salescrowd-light-orange:     #e3a56b;
$salescrowd-red: #E36B6B;
$salescrowd-earth: #574C41;
$salescrowd-gold: #E3C77B;
$salescrowd-facebook: #5a85b1;
$salescrowd-linkedin: #2981AD;
$salescrowd-twitter: #82c1cc;
$salescrowd-tumblr: #576fb1;
$salescrowd-snapchat: #e8e77f;
$salescrowd-purple: #9772AA;
$salescrowd-pink: #C46AA4;
$salescrowd-green: #a6c771;
$salescrowd-warm-gray: #e3e0db;
$salescrowd-warm-light-gray: #f1f0ec;
$salescrowd-dark: #312b25;

// BusinessHub Swatches
//$business-hub-red: #ea5050;
//$business-hub-primary: #b8cd55;
//$business-hub-primary-dark: #a3bb33;
//$business-hub-secondary: #cfe85b;
//$business-hub-light: #dde7b7;
//$business-hub-dark: #4d5428;
//$business-hub-black: #27291e;
//$business-hub-pale: #f3f8d8;
//$business-hub-grey: #f7f8f7;

$salescrowd-orange: #3e7594;
$business-hub-red: #ec8542;
$business-hub-redred: #ec4b47;
$business-hub-primary: #3a708e;
$business-hub-primary-dark: #386987;
$business-hub-alt: #49c0a0;
$business-hub-secondary: #3e7594;
$business-hub-light: #b2dcf6;
$business-hub-dark: #1c3645;
$business-hub-black: #0e1a20;
$business-hub-pale: #dee4e8;
$business-hub-grey: #f2f5f6;
$business-hub-font: #1e292f;


// Scrims

$salescrowd-facebook-scrim: #36506a;
$salescrowd-red-scrim: #713435;

// Categories
$attract-attention: #2981AD;
$build-your-brand: #82c1cc;
$convert-the-sale: #e8e77f;
$deliver-extra-value: #9772AA;
$encourage-word-of-mouth: #E36B6B;

// Brand Colours
$brand: $business-hub-primary;
$brand-alt: $business-hub-secondary;

// Brand Colour Variants
$brand-light-50: lighten($brand, 50%);
$brand-dark-5: darken($brand, 5%);
$brand-dark-10: darken($brand, 10%);
$brand-dark-30: darken($brand, 30%);
$brand-dark-50: darken($brand, 50%);
$brand-dark-70: darken($brand, 70%);

// Base Colours
$white: #fff;
$black: #000;
$gray: #ccc;
$mid-gray: #ddd;
$dark-gray: #333;
$light-gray: #DDD;
$lightest-gray: #f7f7f7;

// Transparent Colours
$black-transparent-70: rgba(0,0,0,0.7);
$black-transparent-60: rgba(0,0,0,0.6);
$black-transparent-50: rgba(0,0,0,0.5);
$black-transparent-40: rgba(0,0,0,0.4);
$black-transparent-30: rgba(0,0,0,0.3);
$black-transparent-20: rgba(0,0,0,0.2);
$black-transparent-10: rgba(0,0,0,0.1);

// Base
$font-color: $business-hub-font;
$sans-serif: 'Lato', 'Arial', sans-serif;
$primary-font: 'Lato', 'Arial', sans-serif;
$monospace: 'Monaco', 'Consolas', 'Lucida Console', monospace;
$genius: 'Schoolbell', $sans-serif;
$base-border-radius: 3px !default;
$base-line-height: 1.5em !default;
$base-spacing: 1.5em !default;
$base-accent-color: $brand !default;
$base-link-color: $base-accent-color !default;
$medium-screen: em(640) !default;
$base-font-color: $dark-gray !default;
$icon-bullet-size: 3.5em;

// Header
$header-height-S: 50px;
$header-height-L: 80px;
$nav-width-S: 260px;
$search-height-S: 50px;
$header-height-M: 80px;
$search-height-L: 120px;

// Breadcrumb
$breadcrumb-height: 2em;

// Footer
$medium-screen: em(640) !default;
$large-screen: em(860) !default;
$footer-background: $business-hub-black;
$footer-color: white;
$footer-link-color: $business-hub-primary;
$footer-disclaimer-color: $light-gray;

// Switches
$switch-width: 60px;
$switch-padding: 2px;
$switch-height: 30px;
$switch-radius: 3px;
$knob-size: 25px;
$knob-radius: 3px;
$knob-width: $knob-size;

// Sign Up
$color-1: #f3cb6d; // yellow
$color-2: #444d65; // blue
$color-3: #fff; // body background color
$color-4: #e36767; // red
$color-5: #92c195; // green

// Breakpoints
$S:     480px;
$SM:    481px;
$MS:    720px; 
$M:     768px;     
$L:     1170px;
$maxL:    $L - 1px;     

// Media Queries
@mixin MQ($canvas) {
  @if $canvas == S {
   @media only screen and (min-width: $S) { @content; } 
  }
  @else if $canvas == MS {
   @media only screen and (min-width: $MS) { @content; } 
  }    
  @else if $canvas == M {
   @media only screen and (min-width: $M) { @content; } 
  }
  @else if $canvas == L {
   @media only screen and (min-width: $L) { @content; } 
  }
  @else if $canvas == maxL {
   @media only screen and (max-width: $maxL) { @content; } 
  }
}

// Light Grid
@mixin column($percentage, $float-direction:left) {
  width: 100% * $percentage;
  float: $float-direction;
}

// REM Fallback
@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

// Absolute Centering
@mixin center($xy:xy) {
  @if $xy == xy {
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    @include transform(translateX(-50%) translateY(-50%));
  }
  @else if $xy == x {
    left: 50%;
    right: auto;
    @include transform(translateX(-50%));
  }
  @else if $xy == y {
    top: 50%;
    bottom: auto;
    @include transform(translateY(-50%));
  }
}

// Border Radius
@mixin border-radius($radius:.25em) {
  border-radius: $radius;
}

// Font Rendering
@mixin font-smoothing {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// Grid system
// --------------------------------------------------

// Number of columns in the grid system
$grids-columns:              12;
  // Padding, to be divided by two and applied to the left and right of all columns
$gutter:                     golden-ratio(1em, 1);

$max-width:                  1200px;

  // Responsive Breakpoints
  // ------------------------------------------------------

$screen-xs:                  480px !default;
$screen-xs-min:              $screen-xs !default;
$screen-phone:               $screen-xs-min !default;

// Small screen / tablet
// Note: Deprecated $screen-sm and $screen-tablet as of v3.0.1
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
$screen-tablet:              $screen-sm-min !default;

// Medium screen / desktop
// Note: Deprecated $screen-md and $screen-desktop as of v3.0.1
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
$screen-desktop:             $screen-md-min !default;

// Large screen / wide desktop
// Note: Deprecated $screen-lg and $screen-lg-desktop as of v3.0.1
$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;
$screen-lg-desktop:          $screen-lg-min !default;
$max-width:                  $screen-lg;

  // So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;

// Grid Mixins

// Create the grid for a given size
// This will loop over the number of columns and create a css class
// for each. If it's the last gride size, then let's not add a float
@mixin grid-core($size) {
  @for $i from 1 through $grid-columns {
    .col-#{$size}-#{$i} {
      // Ignore float for the largest grid size
      @if $i < $grid-columns {
        float: left;
      }
      @include span-columns($i);
    }
    // If it's not the screen-xs, then let's add push and pull helper classes
    @if $size != "xs" {
      .col-#{$size}-push-#{$i} {
        left: flex-grid($i, $grid-columns) + flex-gutter($grid-columns);
      }
      .col-#{$size}-pull-#{$i} {
        right: flex-grid($i, $grid-columns) + flex-gutter($grid-columns);
      }
    }
  }
}