// ==========================================================================
// #Mixins
// ==========================================================================
//
//  Table of content
//
//  Media Query
//  General
//  Images
//  Aligning
//  Position
//  Transition/Transform
//  Button



// #Mixins: Media Query
// ==========================================================================

    //Mixin: Media Query
    @mixin media-query($name) {

    @if not map-has-key($breakpoints, $name) {
        @warn "Warning: `#{$name}` is not a valid breakpoint name.";
    } @else {
        @media (min-width: map-get($breakpoints, $name)) {
            @content;
            }
        }

  }



// #Mixins: General
// ==========================================================================

// clearfix
@mixin clearfix {
  &::after {
    clear: both;
    content: ' ';
    display: table;
  }
}

// #Mixins: Containers
// ==========================================================================
@mixin container {
    @extend %container;
    @extend %container-default;
}




// Span Mixin
// ----------
@mixin span(
  $span,
  $config: $susy
) {
  width: span($span, $config);

  @if index($span, 'last') {
    float: right;
    // margin-right: 0; if you want an explicit reset
  } @else {
    float: left;
    margin-right: gutter();
  }
}
@mixin button-bg($bg) {
  background: $bg;
  &:hover {
    background:darken($bg,8%);
    transition: $btn-transition;
  }
  &:active {
    background:darken($bg,25%);
  }
}

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

//Box Sizing Prefixes
@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
     -moz-box-sizing: $boxmodel;
          box-sizing: $boxmodel;
}

// Box
@mixin box($width, $height: $width) {
  width: $width;
  height: $height;
}

@mixin prefix($property, $value, $vendors: webkit moz ms o, $default: true) {
  @if $vendors {
    @each $vendor in $vendors {
      #{"-" + $vendor + "-" + $property}: #{$value};
    }
  }
  @if $default {
    #{$property}: #{$value};
  }
}

//Box-shadow
@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow:inset $top $left $blur $color;
    -moz-box-shadow:inset $top $left $blur $color;
    box-shadow:inset $top $left $blur $color;
  } @else {
    -webkit-box-shadow: $top $left $blur $color;
    -moz-box-shadow: $top $left $blur $color;
    box-shadow: $top $left $blur $color;
  }
}

//Border Radius
@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}



// #Mixins: Images
// ==========================================================================

//Retina Mixin
@mixin retina($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
  (-o-min-device-pixel-ratio: 2.6/2),
  (-webkit-min-device-pixel-ratio: 1.3),
  (min-device-pixel-ratio: 1.3),
  (min-resolution: 1.3dppx) {
    /* Serving 2x image on Retina display */
    background-image: url($image);
    background-size: $width $height;
  }
}



// #Mixins: Aligning
// ==========================================================================

//Center Block
@mixin center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

//Vertical Center
@mixin center-vertically {
  position: absolute;
  top: 50%;
  left: 50%;
  @include prefix(transform, translate(-50%, -50%), 'webkit' 'ms');
}



// #Mixins: Position
// ==========================================================================

@mixin position($position, $args: ()) {
  $offsets: top right bottom left;
  position: $position;

  @each $offset in $offsets {

  $index: index($args, $offset);

  @if $index {

    @if $index == length($args) {
      #{$offset}: 0;
    }

    @else {
      $next: nth($args, $index + 1);

      @if is-valid-length($next) {
        #{$offset}: $next;
      }

      @else if index($offsets, $next) {
        #{$offset}: 0;
      }

      @else {
        @warn "Invalid value `#{$next}` for offset `#{$offset}`.";
      }
    }
  }
  }
}

@mixin absolute($args: ()) {
  @include position(absolute, $args);
}

@mixin fixed($args: ()) {
  @include position(fixed, $args);
}

@mixin relative($args: ()) {
  @include position(relative, $args);
}



// #Mixins: Transition/Transform
// ==========================================================================

//Transitions
@mixin transition($tra) {
  -webkit-transition: $tra;
     -moz-transition: $tra;
      -ms-transition: $tra;
       -o-transition: $tra;
          transition: $tra;
}



// Transform
@mixin transform($tsf) {
     -moz-transform: $tsf;
       -o-transform: $tsf;
      -ms-transform: $tsf;
  -webkit-transform: $tsf;
          transform: $tsf;
}



// #Mixins: Button
// ==========================================================================

// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $line-height) {
  padding: $padding-y $padding-x;
  font-size: $font-size;
  line-height: $line-height;
}

//Button colors
@mixin button-colors($btn-color, $btn-bg) {
  color: $btn-color;
  background-color: $btn-bg;
}
@function color($col, $op: false) {
    @if ($op == false) {
        @return rgba($col, 1);
    } @else {
        @return rgba($col, $op);
    }
}


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

@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
    @each $property in $properties {
        #{$property}: $min-value;
    }

    @media (min-width: $min-vw) {
        @each $property in $properties {
            #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
        }
    }

    @media (min-width: $max-vw) {
        @each $property in $properties {
            #{$property}: $max-value;
        }
    }
}

@function strip-unit($number) {
    @if type-of($number) == "number" and not unitless($number) {
        @return $number / ($number * 0 + 1);
    }

    @return $number;
}


@mixin responsive-ratio($x,$y, $pseudo: false) {
    $padding: unquote( ( $y / $x ) * 100 + '%' );
    @if $pseudo {
        &:before {
            @include pseudo($pos: relative);
            width: 100%;
            padding-top: $padding;
        }
    } @else {
        padding-top: $padding;
    }
}



%flexCenterCenter { align-items: center; justify-content: center; }
%flexCenterStart { align-items: center; justify-content: flex-start; }
%flexCenterEnd { align-items: center; justify-content: flex-end; }
%flexCenterBetween { align-items: center; justify-content: space-between; }
%flexCenterAround { align-items: center; justify-content: space-around; }

%flexStartStart { align-items: flex-start; justify-content: flex-start; }
%flexStartCenter { align-items: flex-start; justify-content: center; }
%flexStartEnd { align-items: flex-start; justify-content: flex-end; }
%flexStartBetween { align-items: flex-start; justify-content: space-between; }
%flexStartAround { align-items: flex-start; justify-content: space-around; }

%flexEndStart { align-items: flex-end; justify-content: flex-start; }
%flexEndCenter { align-items: flex-end; justify-content: center; }
%flexEndEnd { align-items: flex-end; justify-content: flex-end; }

%flexCenterStart { align-items: center; justify-content: flex-start; }
%flexCenterEnd { align-items: center; justify-content: flex-end; }
%flexCenterAround { align-items: center; justify-content: space-around; }
%flexCenterBetween { align-items: center; justify-content: space-between; }

%flexStartAround { align-items: start; justify-content: space-around; }
%flexEndAround { align-items: end; justify-content: space-around; }


@mixin size($width, $height: auto) { width: $width; height: $height; }

%arrowClose {
    &:before,
    &:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
    }
    &:before { transform: translate(-50%, -50%) rotate(-45deg); }
    &:after { transform: translate(-50%, -50%) rotate(45deg); }
}