// -----------------------------------------------------------------------------
// This file contains all application-wide Sass mixins.
// -----------------------------------------------------------------------------

/// Event wrapper
/// @author Harry Roberts
/// @param {Bool} $self [false] - Whether or not to include current selector
/// @link https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts
@mixin on-event($self: false) {
  @if $self {
    &,
    &:hover,
    &:active,
    &:focus {
      @content;
    }
  } @else {
    &:hover,
    &:active,
    &:focus {
      @content;
    }
  }
}

// On-event Usage

// .sample {
//   @include on-event($self:true or false) {
//      text-decoration: underline;
//   }
// }

/// Make a context based selector a little more friendly
/// @author Hugo Giraudel
/// @param {String} $context
@mixin when-inside($context) {
  #{$context} & {
    @content;
  }
}


// When Inside element Usage
// .sample {
//   opacity: 0;

//   @include when-inside('.no-opacity') {
//     visibility: hidden;
//   }
// }



/// Responsive manager
/// @param {String} $breakpoint - Breakpoint
/// @requires $breakpoints
/// @link http://sass-guidelin.es/#breakpoint-manager Sass Guidelines - Breakpoint Manager
@mixin breakpoint($breakpoint) {
  $query: map-get($breakpoints, $breakpoint);

  @if not $query {
    @error 'No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.';
  }

  @media #{if(type-of($query) == 'string', unquote($query), inspect($query))} {
    @content;
  }
}
// BreakPoint Usage

// .sample {
//   font-size: 30rem;

//   @include breakpoint(xs-down) {
//     font-size: 22rem;
//   }
// }

// VW Font Sizing with Pixel Fall Back
@function calculateVw($size) {
  $vwSize: (1000*.01) * 1px;
  @return ($size/$vwSize) * 1vw;
}

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



// REM Font Sizing with Pixel Fall Back

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

@mixin font-size-rem($size) {
  font-size: $size;
  font-size: calculateRem($size);
}
// USAGE, Example
// .sample {
//   @include font-size(14px)
// }


// Opacity Mixin

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}
// USAGE, Example
// .sample {
//   @include opacity(0.8)
// }

// Transition Mixin

@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}
// USAGE, Example
// .sample {
//   @include transition(all, 0.6s, ease-in-out);
// }


// Absolute Positioning Mixin
@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}
// USAGE, Example
// .sample {
//     @include abs-pos(10px, 10px, 5px, 15px);
//   }

@mixin bg-cover {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

// USAGE, Example
// .sample {
//     @include bg-cover;
//   }



@mixin linearGradient($top, $bottom){
    background: $top; /* Old browsers */
    background: -moz-linear-gradient(top,  $top 0%, $bottom 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  $top 0%,$bottom 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  $top 0%,$bottom 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  $top 0%,$bottom 100%); /* IE10+ */
    background: linear-gradient(to bottom,  $top 0%,$bottom 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

// .sample {
//     @include linearGradient(#cccccc, #666666);
// }


@mixin background-opacity($color, $opacity: 0.3) {
    background: $color;
    background: rgba($color, $opacity);
}

@mixin color-opacity($color, $opacity: 0.3) {
    color: $color;
    color: rgba($color, $opacity);
}


// .sample {
//      @include background-opacity(#333, 0.5);
// }