/* file structure

base
  _base.scss
  _index.scss
  _reset.scss
layout
  _extends.scss
  _grid-columns.scss
  _grid-container.scss
  _index.scss
  _panel.scss
modules
  _buttons.scss
  _extends.scss
  _forms.scss
  _icons.scss
  _img.scss
  _index.scss
  _nav.scss
  _navbar.scss
states
  _index.scss
utilities
  _config.scss (ie variables)
  _functions.scss
  _helpers.scss
  _index.scss
  _mixins.scss
application (final import file)

*/

/* naming conventions

BEM - block, element, modifier

.block {
  &__element {
    border:2px solid red;   
      &--modifier {
         border: none;     
      }
  }
}

*/




// ==========================================================================
// Folder - Utilities
// ==========================================================================


// ==========================================================================
// Global Config
// ==========================================================================

// Font Stacks

$font-url--google        : 'https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900';
$font-family--primary    : 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$font-family--secondary  : 'Helvetica Neue', Helvetica, Arial, sans-serif;

// Font Weights

$font-weight--thin       : 100;
$font-weight--light      : 300;
$font-weight--medium     : 400;
$font-weight--bold       : 700;
$font-weight--ultra-bold : 900;

// Descriptive Base Colors

$white    : #fff;
$black    : #0b0b0b;
$grey     : #797e83;

$fountain-blue  : #52bab3;
$emerald        : #5ece7f;
$sunglo         : #e67478;
$coral          : #ff784f;
$purple-majesty : #9279c3;
$scooter        : #39add1;

// Color Usage

$color-primary   : $fountain-blue;
$color-secondary : $scooter;
$color-accent    : $emerald;
$color-shadow    : rgba($black, .2);

// Color Palette Modifiers

$color-palettes: (
	grey: (
		xx-light : lighten($grey, 43%),
		x-light  : lighten($grey, 35%),
	  light    : lighten($grey, 12%),
	  base     : $grey,
	 	dark     : darken($grey, 8%),
	 	x-dark   : darken($grey, 16%)
	),
	black: (
		light    : lighten($black, 10%),
		base     : $black,
		dark     : darken($black, 10%)
	)
);

// UI Colors

$ui-colors: (
	default : $fountain-blue,
	success : $emerald,
	error   : $sunglo,
	warning : $coral,
	info    : $purple-majesty
);

// Text
$basefont: 16;
$base__font-size : 16px;
$base__line      : 24px;
$letter-space    : 1px;

// Border radius

$br--default    : .4em;
$br--round      : 50%;

// Transitions

$trns-duration  : .3s;

// Path to Assets

$path--rel      : "../img";

// Grid

$g-col-width    : 65px;
$g-gutter-width : 20px;
$g-col-count    : 12;
$g-cont-max-w   : 1050px;

//breakpoints - variables file

$break-xs: 360px; //em(360); 
$break-sm: 480px; //em(480); 
$break-md: 767px; //em(767);
$break-lg: 992px; //em(992);
$break-xlg: 1200px; //em(1200);

// ==========================================================================
// Functions
// ==========================================================================




//PX to EM function - function file

@function em($pixels, $context: $basefont) {
  @return #{$pixels/$context}em
}

// Import if Google Fonts URL is defined

@if variable-exists(font-url--google) {
  @import url($font-url--google);
}

// Calculate em values

@function em($target, $context: $base__font-size) {
	@return ($target / $context) * 1em;
}

// Call the color palette modifiers in color values

@function palette($palette, $shade: 'base') {
	@return map-get(map-get($color-palettes, $palette), $shade);
}
    
// Set the "context" width for the grid
    
@function g-context($g-col-width, $g-col-count ,$g-gutter-width) {
  $g-context: ($g-col-width * $g-col-count) + ($g-gutter-width * ($g-col-count - 1));
  @return $g-context;
}

// ==========================================================================
// Helpers
// ==========================================================================

// Clearfix

%clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

// Screen reader text

.srt {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

// Center alignment

%center-align {
	text-align: center;
}

// For pseudo-elements

%pseudos {
  display: block;
  content: ''; 
  position: absolute;
}

// Center elements

.centered {
	float: none;
	margin-left: auto;
	margin-right: auto;
}

// ==========================================================================
// Mixins
// ==========================================================================


// breakpoint mixin - mixins file
@mixin breakpoint($media) {
  @if $media == mobile-portrait {
    @media only screen and (max-width:$break-xs) { @content; }
  } 
  @if $media == mobile-landscape {
    @media only screen and (min-width:$break-xs + 1) and (max-width: $break-sm) { @content; }
  } 
  @if $media == tablet-portrait { 
    @media only screen and (min-width:$break-sm + 1) and (max-width: $break-md) { @content; }
  }
  @if $media == tablet-landscape { 
    @media only screen and (min-width:$break-md + 1) and (max-width: $break-lg) { @content; }
  }
  @if $media == desktop { 
    @media only screen and (min-width:$break-lg + 1) and (max-width: $break-xlg) { @content; }
  }
  @if $media == desktop-large {
    @media only screen and (min-width:$break-xlg) { @content; }
  } 
}

// BEM selectors

@mixin e($element) {
	&__#{$element} {
    @content;
  }
}
@mixin m($modifier) {
  &--#{$modifier} {
    @content;
  }
}

// Generate modifier color classes

@mixin bg-colors($map) {
	@each $theme, $color in $map {
		&--#{$theme} {
			background-color: $color;    
		}
	}
}

// Generating :before or :after pseudo-element shapes

@mixin p-el(
	$el,
	$el-w: null,
	$el-h: null) {
	@if $el == "before" or $el == "after" { 
	  &:#{$el} {
		  @extend %pseudos;
		  width: $el-w;
	  	height: $el-h;
	    @content;
	  }
	} 
	@else {
    @error "`#{$el}` is not a valid pseudo-element.";
	}
}

// Image replacement

@mixin img-replace($img, $w, $h, $disp: block) {
	background-image: url('#{$path--rel}/#{$img}');
	background-repeat: no-repeat;
	width: $w;
	height: $h;
	display: $disp;
}
      
// Adjacent sibling margins

@mixin doubly($margin: 1em) {
	& + & {
	  margin-left: $margin;
    @content;
	}
}

// semantic grid


@mixin semantic-grid() {
  @extend .grid;
  @content;
}

@mixin semantic-grid-column($i) {
  @extend .grid__col--#{$i};
  @extend [class^="grid__col--"];
  @content;
}



// ==========================================================================
// Folder - Layout
// ==========================================================================

// ==========================================================================
// Placeholders
// ==========================================================================

// Panel

%panel-default {
  padding-top: em(30px);
  padding-bottom: em(20px); 
}

%panel-padding {
  padding-top: em(80px);
  padding-bottom: em(34px);
}


// ==========================================================================
// Grid Container
// ==========================================================================



.grid {
  @extend %clearfix;
  @extend .centered;
  width: 100%;
  background:blue;
  margin-top:20px;
  color:white;
  
  // make nested grid 100%
  [class*="grid__col--"] > & {
    width:100%;
    //width:90%;

  }
  
  // set a max width grid container
  
  @media (min-width: 1100px) {
    max-width:1600px;
  }

}



// ==========================================================================
// Grid Columns
// ==========================================================================


// Calculate grid columns

@media (min-width: 769px) {
  @for $i from 1 through $g-col-count {
    $context: g-context($g-col-width, $g-col-count ,$g-gutter-width) !global;  
    $target: ($g-col-width * $i) + ($g-gutter-width * ($i - 1));
    
    // Generate column modifier classes
    .grid__col--#{$i} {
      width: percentage($target / $context);
      background:red;
    }
  }
}

// Column styles

[class^="grid__col--"] {
  @media (min-width: 1px) and (max-width: 768px) {
    margin-top: em(12px);
    margin-bottom: em(12px);
  }
  @media (min-width: 769px) {
    @include doubly(percentage($g-gutter-width / $context));    
    float: left;
    min-height: 1px;
    //padding-left: 10px;
    //padding-right: 10px;
    &:last-of-type {
      float: right;
    }
  }
}



// ==========================================================================
// Panels
// ==========================================================================

.panel {
  @extend %panel-default;
  @include m(centered) {
    @extend %panel-default;
    @extend %center-align;    
  }
  @include m(padded) {
    @extend %panel-padding;
    @include m(centered) {
      @extend %center-align;
	    @extend %panel-padding;
    }
  }
}


// ==========================================================================
// Semantic Grid @extend examples
// ==========================================================================

.home {
  @include semantic-grid();
}

.home__left {
  @include semantic-grid-column(8);
}

.home__center {
  @include semantic-grid-column(2);
}

.home__right {
  @include semantic-grid-column(2);
}

// ==========================================================================
// Semantic Grid Media Querie examples
// ==========================================================================

body {
  // em function
  font-size: em(16px);
  // declaring breakpoint mixins
  @include breakpoint(mobile-portrait) {
    background:red; 
  }
  @include breakpoint(mobile-landscape) {
    background:blue;
  }
  @include breakpoint(tablet-portrait) {
    background:green;
  }
  @include breakpoint(tablet-landscape) {
    background:orange;
  }
  @include breakpoint(desktop) {
    background:purple;
  }
  @include breakpoint(desktop-large) {
    background:violet;
  }
}