//*********************
 //* FROM MIXINS
 //*********************/
// Centering.
// Define vertical, horizontal, or both position
@mixin center($position) {
    position: absolute; 
    
    @if $position == 'vertical' {
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    @else if $position == 'horizontal' {
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translate(-50%);
    }
    @else if $position == 'both' {
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}
// Using the mixin
// .foo {
//     @include center(both);
// }
// .foo-parent {
//     position: relative;
// }

// *********************
// TINTS/SHADES
// https://css-tricks.com/snippets/sass/tint-shade-functions/
// *********************/

/// Slightly lighten a color
// @access public
// @param {Color} $color - color to tint
// @param {Number} $percentage - percentage of `$color` in returned color
// @return {Color}
@function tint($color, $percentage) {
    @return mix(white, $color, $percentage);
}

// Slightly darken a color
// @access public
// @param {Color} $color - color to shade
// @param {Number} $percentage - percentage of `$color` in returned color
// @return {Color}
@function shade($color, $percentage) {
    @return mix(black, $color, $percentage);
}

@mixin black-and-white() {
	filter: grayscale(100%);
}

@mixin color() {
	filter: grayscale(0%);
}

// *********************
// QUICK MEDIA QUERIES
// *********************
    @mixin media-size($size) {
        @if $size == sm {
           @media (max-width: 375px) { @content; }
        } @else if $size == md {
           @media (max-width: 480px)   { @content; }
        } @else if $size == lg {
           @media (max-width: 1024px) { @content; }
        }
    }

// *--------------------------------------------------
// Flexbox columns 
// https://www.toptal.com/sass/css3-flexbox-sass-grid-tutorial
// https://codepen.io/trufa/pen/wdedwE/left
// *--------------------------------------------------

    $grid__bp-sm: 375;
    $grid__bp-md: 480;
    $grid__bp-lg: 1024;
    $grid__cols: 12;

    $map-grid-props: (
            '': 0,
            '-sm': $grid__bp-sm,
            '-md': $grid__bp-md,
            '-lg': $grid__bp-lg
    );

    @mixin create-mq($breakpoint) {
      @if($breakpoint == 0) {
        @content;
      } @else {
        @media screen and (max-width: $breakpoint *1px) {
          @content;
        }
      }
    }

    @mixin create-col-classes($modifier, $grid-cols, $breakpoint) {
      @include create-mq($breakpoint) {
        @for $i from 1 through $grid-cols {
          &__col#{$modifier}-#{$i} {
            padding: 0 15px;
            flex-basis: (100 / ($grid-cols / $i) ) * 1%;
          }
        }
      }
    }

    @mixin create-col-ordering($modifier, $grid-cols, $breakpoint) {
      @include create-mq($breakpoint) {
        @for $i from 1 through $grid-cols {
          &__order#{$modifier}-#{$i} {

            order: $i;
          }
        }
      }
    }

    .container {
      max-width: $grid__bp-lg * 1px;
      margin: 0 auto;
      &--fluid {
        margin: 0;
        max-width: 100%;
      }
      &__row {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
      }
      @each $modifier , $breakpoint in $map-grid-props {
        @include create-col-classes($modifier, $grid__cols, $breakpoint);
        @include create-col-ordering($modifier, $grid__cols, $breakpoint);
      }
    }


// *********************
// TRANSITION
// *********************/
    @mixin transition($transition...) {
        // defining prefixes so we can use them in mixins below
        $prefixes: "-webkit-", "";

        @each $prefix in $prefixes {
            #{$prefix}transition: $transition;
        }
    }

// *********************
// CSS3 GRADIENTS
// Be careful with these since they can
// really slow down your CSS. Don't overdo it.
// *********************/
    // @include css-gradient($color-stop-1, $color-stop-4, 130deg); */
    @mixin css-gradient($top-color, $bottom-color, $direction: 130deg) {
        background: $top-color;
        background: -webkit-linear-gradient($direction, $top-color 0, $bottom-color 100%);
           background: -moz-linear-gradient($direction, $top-color 0, $bottom-color 100%);
            background: -ms-linear-gradient($direction, $top-color 0, $bottom-color 100%);
             background: -o-linear-gradient($direction, $top-color 0, $bottom-color 100%);
                background: linear-gradient($direction, $top-color 0, $bottom-color 100%);
        // background: -webkit-gradient(left top, right bottom, color-stop(0, $top-color), color-stop(48.85%, $top-color), color-stop(51.94%, $bottom-color), color-stop(100%, #e6e6e6));
        
    }

    @mixin css-gradient-stops($top-color, $stop-1, $bottom-color, $stop-2, $direction: 130deg) {
        background: $top-color;
        background: -webkit-linear-gradient($direction, $top-color $stop-1, $bottom-color $stop-2);
           background: -moz-linear-gradient($direction, $top-color $stop-1, $bottom-color $stop-2);
            background: -ms-linear-gradient($direction, $top-color $stop-1, $bottom-color $stop-2);
             background: -o-linear-gradient($direction, $top-color $stop-1, $bottom-color $stop-2);
                background: linear-gradient($direction, $top-color $stop-1, $bottom-color $stop-2);
        // background: -webkit-gradient(left top, right bottom, color-stop(0, $top-color), color-stop(48.85%, $top-color), color-stop(51.94%, $bottom-color), color-stop(100%, #e6e6e6));
        
    }

    // @include gradient-one(#dfdfdf,#f8f8f8, 130deg); */
    @mixin gradient-one($top-color: $color-stop-1, $bottom-color: $color-stop-2, $direction: 130deg) {
        background: $top-color;
        background: -webkit-linear-gradient($direction, $top-color 0, $bottom-color 100%);
           background: -moz-linear-gradient($direction, $top-color 0, $bottom-color 100%);
            background: -ms-linear-gradient($direction, $top-color 0, $bottom-color 100%);
             background: -o-linear-gradient($direction, $top-color 0, $bottom-color 100%);
                background: linear-gradient($direction, $top-color 0, $bottom-color 100%);
        // background: -webkit-gradient(left top, right bottom, color-stop(0, $top-color), color-stop(48.85%, $top-color), color-stop(51.94%, $bottom-color), color-stop(100%, #e6e6e6));
        
    }

    // @include gradient-two(#dfdfdf,#f8f8f8, 130deg); */
    @mixin gradient-two($top-color: $color-stop-3, $bottom-color: $color-stop-4, $direction: 130deg) {
        background: $top-color;
        background: -webkit-linear-gradient($direction, $top-color 0, $bottom-color 100%);
           background: -moz-linear-gradient($direction, $top-color 0, $bottom-color 100%);
            background: -ms-linear-gradient($direction, $top-color 0, $bottom-color 100%);
             background: -o-linear-gradient($direction, $top-color 0, $bottom-color 100%);
                background: linear-gradient($direction, $top-color 0, $bottom-color 100%);
        // background: -webkit-gradient(left top, right bottom, color-stop(0, $top-color), color-stop(48.85%, $top-color), color-stop(51.94%, $bottom-color), color-stop(100%, #e6e6e6));
        
    }

    // @include gradient-two(#dfdfdf,#f8f8f8, 130deg); */
    @mixin gradient-split($top-color: $color-stop-3, $bottom-color: $color-stop-4, $direction: 90deg) {
        background: $top-color;
        background: -webkit-linear-gradient($direction, $top-color 0, $top-color 50%, $bottom-color 50%, $bottom-color 100%);
           background: -moz-linear-gradient($direction, $top-color 0, $top-color 50%, $bottom-color 50%, $bottom-color 100%);
            background: -ms-linear-gradient($direction, $top-color 0, $top-color 50%, $bottom-color 50%, $bottom-color 100%);
             background: -o-linear-gradient($direction, $top-color 0, $top-color 50%, $bottom-color 50%, $bottom-color 100%);
                background: linear-gradient($direction, $top-color 0, $top-color 50%, $bottom-color 50%, $bottom-color 100%);
        // background: -webkit-gradient(left top, right bottom, color-stop(0, $top-color), color-stop(48.85%, $top-color), color-stop(51.94%, $bottom-color), color-stop(100%, #e6e6e6));
        
    }

    // @include feature-gradient($color-stop-1, $color-stop-4, 144px, 100%, 130deg); */
    @mixin feature-gradient($top-color, $bottom-color, $top-stop: 144px,  $bottom-stop: 100%, $direction: 90deg) {
        background: $top-color;
        background: -webkit-linear-gradient($direction, $top-color $top-stop, $bottom-color $bottom-stop);
           background: -moz-linear-gradient($direction, $top-color $top-stop, $bottom-color $bottom-stop);
            background: -ms-linear-gradient($direction, $top-color $top-stop, $bottom-color $bottom-stop);
             background: -o-linear-gradient($direction, $top-color $top-stop, $bottom-color $bottom-stop);
                background: linear-gradient($direction, $top-color $top-stop, $bottom-color $bottom-stop);
        // background: -webkit-gradient(left top, right bottom, color-stop(0, $top-color), color-stop(48.85%, $top-color), color-stop(51.94%, $bottom-color), color-stop(100%, #e6e6e6));
        
    }

    // @include css-boxshadow(X-axis,Y-axis,Blur,Spread,Red,Green,Blue,Opacity); */
    @mixin css-boxshadow($x: 0px, $y: 3px, $blur: 3px, $s: 0px, $r: 0, $g: 0, $b: 0, $o: 0.5) {
        -webkit-box-shadow: $x $y $blur $s rgba($r,$g,$b,$o);
           -moz-box-shadow: $x $y $blur $s rgba($r,$g,$b,$o);
                box-shadow: $x $y $blur $s rgba($r,$g,$b,$o);
    }

    // @include css-inset-boxshadow(inset, X-axis,Y-axis,Blur,Spread,Red,Green,Blue,Opacity); */
    @mixin css-inset-boxshadow($i: inset, $x: 0px, $y: 3px, $blur: 3px, $s: 0px, $r: 0, $g: 0, $b: 0, $o: 0.5) {
        -webkit-box-shadow: $i $x $y $blur $s rgba($r,$g,$b,$o);
           -moz-box-shadow: $i $x $y $blur $s rgba($r,$g,$b,$o);
                box-shadow: $i $x $y $blur $s rgba($r,$g,$b,$o);
    }


// *********************
// Retina Images
// *********************/
// easy retina-ready images
// http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss
        @mixin image-2x($image, $width, $height) {
          @media (-webkit-min-device-pixel-ratio: 2),
                 (min--moz-device-pixel-ratio: 2),
                 (-o-min-device-pixel-ratio: 2/1),
                 (min-device-pixel-ratio: 2),
                 (min-resolution: 192dpi),
                 (min-resolution: 2dppx) {
            // on retina, use image that's scaled by 2 */
            background-image: url($image);
            background-size: $width $height;
          }
        }

        @mixin retina-fixes() {
            @media screen and (-webkit-min-device-pixel-ratio: 2),
                   (min--moz-device-pixel-ratio: 2),
                   (-o-min-device-pixel-ratio: 2/1),
                   (min-device-pixel-ratio: 2),
                   (min-resolution: 192dpi),
                   (min-resolution: 2dppx) {
                    @content;
                   }
        }

    // use full size of 1x image
    // @include image-2x("../img/NAME@2x.png", WIDTHpx, HEIGHTpx);

// *********************
// BOX SIZING
// *********************/

    // * @include box-sizing(border-box); */
    // * NOTE: value of "padding-box" is only supported in Gecko. So probably best not to use it. I mean, were you going to anyway? */
    @mixin box-sizing($type: border-box) {
        -webkit-box-sizing: $type;
        -moz-box-sizing: $type;
        -ms-box-sizing: $type;
        box-sizing: $type;
    }