// ------------------------------------------------------------
// Mixins
// ------------------------------------------------------------


// -------------------------------------------------------
// List styles
// -------------------------------------------------------

// Mixins for list style types
@mixin unordered {
	 list-style-position: outside; 
	 list-style-type: disc;
}

@mixin unordered-inside {
	 list-style-position: inside; 
	 list-style-type: disc;
}

@mixin ordered {
	list-style-position: outside; 
	list-style-type: decimal;
}

@mixin ordered-inside {
	list-style-position: inside; 
	list-style-type: decimal;
}

@mixin nobullet {
	list-style-type: none;
}

// -------------------------------------------------------
// Transitions
// -------------------------------------------------------

@mixin _transition($prop:all, $duration:0.2s, $timing:ease-in-out, $delay:0s) {
	@include transition($prop $duration $timing $delay);
}



// -------------------------------------------------------
// Link hover styles
// -------------------------------------------------------

@mixin link-active-styles {
	&:hover, &:focus, &:active {
		@content; 
	}
}
	
	
// -------------------------------------------------------
// Align things vertically (http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/)
// -------------------------------------------------------

@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


// -------------------------------------------------------
// Media queries
// -------------------------------------------------------


// Reference widths from settings file
@mixin respond-to($media-min, $IE9: true) {
    @if $IE9 == true {
        .lt-ie9 & {
            @content;
        }
        @media screen and (min-width: $media-min)  {
            @content;
        }
    }
    @else {
        @media screen and (min-width: $media-min) {
            @content;
        }
    }
}

@mixin respond-to-max($media-max, $IE9: true) {
    @if $IE9 == true {
        .lt-ie9 & {
            @content;
        }
        @media screen and (max-width: $media-max - 1px)  {
            @content;
        }
    }
    @else {
        @media screen and (max-width: $media-max - 1px) {
            @content;
        }
    }
}


@mixin respond-to-min-max($media-min, $media-max, $IE9: true) {
    @if $IE9 == true {
        .lt-ie9 & {
            @content;
        }
        @media screen and (min-width: $media-min) and (max-width: $media-max)  {
            @content;
        }
    }
    @else {
         @media screen and (min-width: $media-min) and (max-width: $media-max) {
            @content;
        }
    }
}


// -------------------------------------------------------
// Retina images
// -------------------------------------------------------

// Usage: Send path, image name, and width and height. 
// Name retina images [name]2x.

@mixin image-2x($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) {
    /* on retina, use image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
  }
}

// -------------------------------------------------------
// HEX to RGB
// -------------------------------------------------------

// http://codepen.io/sturobson/pen/hdKyv
@mixin rgba($color, $value) {
	background-color: $color;
	background-color: rgba($color, $value);
}


// -------------------------------------------------------
// Grid
// -------------------------------------------------------

// Generate columns names span-#
// Called by: @include grid_columns(#) where # is the amount of columns needed
// Perfect for use in breakpoints to use different columns

@mixin grid_columns($columns){
	@for $i from 1 through $columns{
		.colspan#{$columns}-#{$i}{
			width: ((100% / $columns)*$i);		
		}
	}
	@for $i from 1 through $columns{
		.push#{$columns}-#{$i}{
			margin-left: ((100% / $columns)*$i);		
		}
	}
	@for $i from 1 through $columns{
		.pull#{$columns}-#{$i}{
			margin-right: ((100% / $columns)*$i);		
		}
	}
	.push-disable#{$columns}{
		margin-left: 0;		
	}
	.pull-disable#{$columns}{
		margin-right: 0;		
	}
	.hide-at#{$columns} {
		display: none;
	}
	.block-show-at#{$columns} {
		display: block;
	}
	.inline-show-at#{$columns} {
		display: inline;
		display: inline-block;
	}
	
}

@mixin grid {	
	// Widths
	*[class*="colspan"] {
		width: 100%; 
		display: block;
	}
	// Floats
	*[class*="as-grid"] {
		float: left;
		display: inline;
		display: inline-block;
	}
	// Gutters
	*[class*="with-gutter"] {
		@include respond-to($start-columns) {
			padding-left: $internal-spacing-percent; 
		}
	}
}