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


// element-invisible as defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
@mixin element-invisible {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
  }
  clip: rect(1px, 1px, 1px, 1px);
}

// Turns off the element-invisible effect.
@mixin element-invisible-off {
  position: static !important;
  clip: auto;
  height: auto;
  width: auto;
  overflow: auto;
}

@mixin element-focusable {
  @include element-invisible;

  &:active,
  &:focus {
    @include element-invisible-off;
  }
}

// The word "Unpublished" displayed underneath unpublished nodes and comments.
@mixin unpublished-div {
  height: 0;
  overflow: visible;
  color: #d8d8d8;
  font-size: 75px;
  line-height: 1;
  font-family: Impact, "Arial Narrow", Helvetica, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  word-wrap: break-word; // A very nice CSS3 property

  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    .lt-ie8 &>* {
      position: relative; // Otherwise these elements will appear below the "Unpublished" text.
    }
  }
}

// Breakpoints
$media-queries: true !default;
$media-query-free-breakpoint: 900px;
@mixin respond-to($min-width, $max-width: false) {
  @if $media-queries {
    @media screen and (min-width: $min-width) {
       @if $max-width {
         @media (max-width: $max-width) {
            @content
          }
       } @else {
         @content;
       }
     }
  }
  @else if $min-width <= $media-query-free-breakpoint and (not $max-width or $max-width and $max-width >= $media-query-free-breakpoint) {
    @content;
  }
}


@mixin breakpoint($breakpoint-size) {
  @media all and (min-width: $breakpoint-size) {
    @content;
  }
}

$breakpoint-mobile: 20em;
$breakpoint-tablet: 37.5em;
$breakpoint-narrow: 48.25em;
$breakpoint-desktop: 60em;


// Breakpoint Grid Breakdown
// Displays a grid of items with a dynamic column count across breakpoints.
// For use with Zen Grids and a breakpoint-oriented mixin.
// @author Gus Childs http://drupal.org/user/1468898
//
// @param list $column-counts
//   A list of how many columns should exist on the respective breakpoints.
// @param list $breakpoints
//   A list of breakpoints to be used in the 'breakpoint' mixin. Corresponds
//   directly with the $column-counts list. Defaults to those commonly used.
// @param string $selector
//   The selector of each individual grid item. Defaults to 'views-row'.
@mixin breakpoint-grid-breakdown($column-counts, $breakpoints: $breakpoint-mobile $breakpoint-tablet $breakpoint-narrow $breakpoint-desktop, $selector: '.views-row', $gutter: $zen-gutter-width) {

  
  // The selector, such as '.views-row'.
  #{$selector} {
    @media screen and (min-width: 48.25em) {
      margin-bottom: 1.5em;
    }
    // Loop through the breakpoints specified.
    @each $breakpoint in $breakpoints {
      // Which breakpoint are we currently on?
      $key: index($breakpoints, $breakpoint);
      // How many columns should exist in that breakpoint?
      $column-count: nth($column-counts, $key);

      // Uses our breakpoint mixin to specify what should happen on the current
      // breakpoint in the loop.
      // Important: Adjust this if using a different mixin or strategy.
      @include breakpoint($breakpoint) {
        // Loop through the number of columns on this breakpoint.
        @for $i from 1 through $column-count {
          // Creates :nth-child selectors for each column. For example, in four
          // columns we would have the following selectors here:
          // &:nth-child(4n+1), &:nth-child(4n+2),
          // &:nth-child(4n+3), and &:nth-child(4n+0).
          $remainder: $i % $column-count;
          &:nth-child(#{$column-count}n+#{$remainder}) {
            // Important: this relies on the use of $zen-column-count, which is
            // specific to Zen Grids. $zen-column-count should be replaced with
            // a variable that represents how many columns you're using
            // within the current breakpoint (or globally).

            // How many columns of the general grid on my page should one
            // column of this specific grid take up? For example, if the whole
            // page uses 12 columns, and we have a 3 column grid going for
            // these elements, $page-grid-column-span would be 4.
            $page-grid-column-span: $zen-column-count / $column-count;
            // Which column should this specific column start on?
            $page-grid-column-position: 1 + (($i - 1) * $page-grid-column-span);

            // Important: adapt this if you aren't using Zen Grids!
            // If you are: this is where all the magic happens.
            // http://zengrids.com/help/#zen-grid-item
            @include zen-grid-item($page-grid-column-span, $page-grid-column-position, $gutter-width: $gutter);

            // Clear the first item in every row so they don't stack on top
            // of each other.
            @if $remainder == 1 or $column-count == 1 {
              clear: both;
            } @else {
              clear: none;
            }
          }
        }
      }
    }
  }

  // A clearfix so elements following this grid will be placed correctly.
  & > div:after {
    content: "";
    display: table;
    clear: both;
  }
}



@mixin letterpress($opacity){
    text-shadow:white($opacity) 0 1px 0;
}


//Turn off the bullet for an element of a list
@mixin no-bullet {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0; }


//turns off the bullets for an entire list
@mixin no-bullets {
  list-style: none;
  li {
    @include no-bullet; } }


//a link that only has an underline when you hover over it
@mixin hover-link {
  text-decoration: none;
  &:hover {
    text-decoration: underline; } }


//Set all the colors for a link with one mixin call. Order of arguments is:
//
//normal
//hover
//active
//visited
//focus
@mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false) {
  color: $normal;
  @if $visited {
    &:visited {
      color: $visited; } }
  @if $focus {
    &:focus {
      color: $focus; } }
  @if $hover {
    &:hover {
      color: $hover; } }
  @if $active {
    &:active {
      color: $active; } } }


//Buttons
