//
// Custom sass mixins
//
// To use a mixin in this file, add this line to the top of your .scss file:
//   @import "layout";
// Then to use a mixin for a particular rule, add this inside the ruleset's
// curly brackets:
//   @include mix-in-name;


@mixin layout-container($width, $max_width: false) {
  .container {
    width : $width;
    @if $max_width {
      max-width: $max-width;
    }
  }
}

@mixin layout-three-col-grail($sidebar_first, $sidebar_second) {
  $push_right: $sidebar_second;
  $push_left:  $sidebar_first;
  $pull_right: $sidebar_second;

  #content-column,
  .content-column,
  div.sidebar {
    float:left;
    clear:none
  }
  .two-sidebars .content-inner {
    margin-left: $push_left;
    margin-right: $push_right;
  }
  .sidebar-first .content-inner {
    margin-left: $push_left;
    margin-right: 0;
  }
  .sidebar-second .content-inner {
    margin-left: 0;
    margin-right: $push_right;
  }
  .region-sidebar-first {
    width: $sidebar_first;
    margin-left: -100%;
  }
  .region-sidebar-second {
    width: $sidebar_second;
    margin-left: -$pull_right
  }
}

@mixin layout-three-col-right($sidebar_first, $sidebar_second) {
  $push_right:     $sidebar_second;
  $push_left:      $sidebar_first;
  $pull_right:     $sidebar_second;
  $content_margin: $sidebar_second + $sidebar_first;
  $left_margin:    $sidebar_second + $sidebar_first;
  $right_margin:   $sidebar_second;

  #content-column,
  .content-column,
  div.sidebar {
    float:left;
    clear:none
  }
  .two-sidebars .content-inner {
    margin-left: 0;
    margin-right: $content_margin;
  }
  .sidebar-first .content-inner {
    margin-left: 0;
    margin-right: $push_left;
  }
  .sidebar-second .content-inner {
    margin-left: 0;
    margin-right: $push_right;
  }
  .region-sidebar-first {
    width: $sidebar_first;
    margin-left: -$left_margin;
  }
  .region-sidebar-second {
    width: $sidebar_second;
    margin-left: -$right_margin;
  }
  .sidebar-first .region-sidebar-first {
    width: $sidebar_first;
    margin-left: -$sidebar_first;
  }
}

@mixin layout-three-col-left($sidebar_first, $sidebar_second) {
  $push_right:     $sidebar_second;
  $push_left:      $sidebar_first;
  $pull_right:     $sidebar_second;
  $content_margin: $sidebar_second + $sidebar_first;
  $left_margin:    $sidebar_second + $sidebar_first;
  $right_margin:   $sidebar_second;

  #content-column,
  .content-column,
  div.sidebar {
    float:left;
    clear:none
  }
  .two-sidebars .content-inner {
    margin-left: $content_margin;
    margin-right: 0;
  }
  .sidebar-first .content-inner {
    margin-left: $left_margin;
    margin-right: 0;
  }
  .sidebar-second .content-inner {
    margin-left: $right_margin;
    margin-right: 0;
  }
  .region-sidebar-first {
    width: $sidebar_first;
    margin-left: -100%;
  }
  .region-sidebar-second {
    width: $sidebar_second;
    margin-left: -100%;
  }
  .two-sidebars .region-sidebar-second {
    width: $sidebar_second;
    position: relative;
    left : $push_right;
  }
}

@mixin layout-two-col-stack($sidebar_first) {
  $push_right:     $sidebar_first;
  
  #content-column,
  .content-column,
  div.sidebar {
    float:left;
    clear:none
  }
  .two-sidebars .content-inner {
    margin-left: 0;
    margin-right: $push_right;
  }
  .sidebar-second .content-inner {
    margin-left: 0;
    margin-right: 0;
  }
  .region-sidebar-first {
    width: $sidebar_first;
    margin-left: -$push_right;
    float: left;
    clear: none;
  }
  .region-sidebar-second {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top : 20px;
    clear: both;
    overflow: hidden;
  }
  .region-sidebar-second .block {
    float: left;
    clear: none;
  };
}

@mixin layout-one-col-stack {

  .two-sidebars .content-inner,
  .one-sidebar .content-inner,
  .region-sidebar-first,
  .region-sidebar-second {
    margin-left: 0;
    margin-right: 0;
  }
  .region-sidebar-first,
  .region-sidebar-second,
  .region-sidebar-first .block,
  .region-sidebar-second .block {
    width: 100%;
  }
  .region-sidebar-second {
    width: 100%
  }
  .content-inner,
  .region-sidebar-first,
  .region-sidebar-second {
    float:none
  }
  .region-sidebar-first,
  .region-sidebar-second {
    clear:both;
   }
}

@mixin layout-one-col-vert($sidebar_first, $sidebar_second) {
  $one_sidebar: $sidebar_first + $sidebar_second;

  .two-sidebars .content-inner,
  .one-sidebar .content-inner,
  .region-sidebar-first,
  .region-sidebar-second {
    margin-left: 0;
    margin-right:0;
  }
  .region-sidebar-first {
    width: $sidebar_first;
  }
  .region-sidebar-second {
    width: $sidebar_second;
  }
  .one-sidebar .sidebar {
    width: $one_sidebar;
  }
  .region-sidebar-first,
  .region-sidebar-second {
    overflow: hidden;
    margin-top: 20px;
    float: left;
    clear: none;
  }
  .region-sidebar-first.block,
  .region-sidebar-second .block {
    width:100%
  };
}