// @file
// Custom sass mixins
//
// Define the custom mixins for your project here.
// http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#defining_a_mixin

// Makes an element visually hidden, but accessible.
// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
@mixin element-invisible {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  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;
}

// Makes an element visually hidden by default, but visible when focused.
@mixin element-focusable {
  @include element-invisible;

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


//Rem Fallback
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@mixin rem-fallback($property, $values...) {
  $max: length($values);
  $pxValues: '';
  $remValues: '';

  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $pxValues: #{$pxValues + $value*strip-unit($base-font-size)}px;

    @if $i < $max {
      $pxValues: #{$pxValues + " "};
    }
  }

  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $remValues: #{$remValues + $value}rem;

    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  }

  #{$property}: $pxValues;
  #{$property}: $remValues;
}

// Fonts in rems with px fallback

@mixin font-size($size, $is-important: false) {
  $size: if(unitless($size), $size, $size / 1px);

  @if $is-important {
    font-size: $size + px !important;
    font-size: ($size / strip-unit($base-font-size)) + rem !important;
  } @else {
    font-size: $size + px;
    font-size: ($size / strip-unit($base-font-size)) + rem;
  }
}

// define a global box-shadow style
@mixin boxshadow {
  -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
}

// A global setting that can be used for controlling container widths
%inner-wrapper {
  position: relative;
  @include clearfix;
  max-width: 700px;
  margin: 0 auto;
  @include breakpoint($lg-mobile) {
    margin-left: 20px;
    margin-right: 20px;
    max-width: none;
  }
  @include breakpoint($mobile) {
    margin-left: 20px;
    margin-right: 20px;
    max-width: none;
  }
  @include breakpoint($desktop){
    max-width: 960px;
  }
  @include breakpoint($lg-desktop) {
    max-width: 1180px;
  }
}


// Isolate a hover effect only for non-touch screens - requires Modernizr with touch detection
@mixin notouchhover {
  .no-touch & {
    &:hover,
    &:focus {
      @content;
    }
  }
}

// Fully prefixed placeholder styling
@mixin placeholder {
  &::-webkit-input-placeholder {
    @content;
  }
  &:-moz-placeholder {
    @content;
  }
  &::-moz-placeholder {
    @content;
  }
  &:-ms-input-placeholder {
    @content;
  }
}

// Prefixed border radius shortcut
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

// Flexible video container
%video {
  position: relative;
  padding-bottom: 56.25%;
  /* padding-top: 30px; */
  height: 0;
  overflow: hidden;
  iframe,
  object,
  embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
}

// Left floated inline menu with no margin, padding or border
@mixin list-reset {
  list-style: none;
  margin: 0;
  padding: 0;
  @include clearfix;
  li {
    list-style-type: none;
    list-style-image: none;
    float:left;
  }
}