//
//   pineapple-sass v1.11.17
//   Copyright (c) 2015 Arun Michael Dsouza (amdsouza92@gmail.com)
//   Licence: MIT
//

// Transition mixin
// Add CSS transition to any element
@mixin transition($transition...) {
    -webkit-transition: $transition;
    -moz-transition: $transition;
    -o-transition: $transition;
    -ms-transition: $transition;
    transition: $transition;
}

// Animation mixin
// Animate an element
@mixin animation($animation...) {
	-webkit-animation: $animation;
	-moz-animation: $animation;
	-o-animation: $animation;
	animation: $animation;
}

// Box shadow mixin
// Add box shadow to any element
@mixin boxShadow($shadows...) {
    -webkit-box-shadow: $shadows;
    -moz-box-shadow: $shadows;
    box-shadow: $shadows;
}

// Inset box shadow mixin 
// Add inset box shadow to any element
@mixin insetBoxShadow($x, $y, $blur, $color) {
    -webkit-box-shadow: inset $x $y $blur $color;
    -moz-box-shadow: inset $x $y $blur $color;
    box-shadow: inset $x $y $blur $color;
}

// Border mixin
// Add a border to any element 
@mixin border($width, $style, $color) {
    border: $width $style $color;
}

// Border radius mixin
// Add border radius to an element
@mixin borderRadius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

// Edge border radius mixin 
// Add border radius to a specifix edge(left/right) of an element
@mixin borderRadiusEdge($edge, $radius) {
    @if $edge == 'right' {
        border-top-right-radius: $radius;
        border-bottom-right-radius: $radius;
    }
    @else if $edge == 'left' {
        border-top-left-radius: $radius;
        border-bottom-left-radius: $radius;
    }
}

// Border + Radius mixin
// Add border and a radius to any side(top/bottom/left/right) of an element
@mixin sideBorderAndRadius($side, $width, $type, $color, $radius: 0) {
    @if $side == 'top' {
        border-top: $width $type $color;
        border-bottom: none;
        border-left: none;
        border-right: none;
        @include borderRadius($radius);
    }
    @else if $side == 'right' {
        border-right: $width $type $color;
        border-bottom: none;
        border-left: none;
        border-top: none;
        @include borderRadius($radius);
    }
    @else if $side == 'bottom' {
        border-bottom: $width $type $color;
        border-left: none;
        border-top: none;
        border-right: none;
        @include borderRadius($radius);
    }
    @else if $side == 'left' {
        border-left: $width $type $color;
        border-top: none;
        border-right: none;
        border-bottom: none;
        @include borderRadius($radius);
    }
}

// Border image mixin
// Add a border image to any element
@mixin borderImage($borderWidth, $url, $mode, $sliceTop, $sliceRight: 0, $sliceBottom: 0, $sliceLeft: 0) {
    border-width: $borderWidth;
    @if $sliceRight != 0 and $sliceBottom != 0 and $sliceLeft != 0 {
        -webkit-border-image: url($url) $sliceTop $sliceRight $sliceBottom $sliceLeft $mode;
        -moz-border-image: url($url) $sliceTop $sliceRight $sliceBottom $sliceLeft $mode;
        -o-border-image: url($url) $sliceTop $sliceRight $sliceBottom $sliceLeft $mode;
        border-image: url($url) $sliceTop $sliceRight $sliceBottom $sliceLeft $mode;
    }
    @else if $sliceRight == 0 and $sliceBottom == 0 and $sliceLeft == 0 {
        -webkit-border-image: url($url) $sliceTop $mode;
        -moz-border-image: url($url) $sliceTop $mode;
        -o-border-image: url($url) $sliceTop $mode;
        border-image: url($url) $sliceTop $mode;
    }
    @else if $sliceRight != 0 and $sliceBottom != 0 and $sliceLeft == 0 {
        -webkit-border-image: url($url) $sliceTop $sliceRight $sliceBottom $mode;
        -moz-border-image: url($url) $sliceTop $sliceRight $sliceBottom $mode;
        -o-border-image: url($url) $sliceTop $sliceRight $sliceBottom $mode;
        border-image: url($url) $sliceTop $sliceRight $sliceBottom $mode;
    }
    @else if $sliceRight != 0 and $sliceBottom == 0 and $sliceLeft == 0 {
        -webkit-border-image: url($url) $sliceTop $sliceRight $mode;   
        -moz-border-image: url($url) $sliceTop $sliceRight $mode;   
        -o-border-image: url($url) $sliceTop $sliceRight $mode; 
        border-image: url($url) $sliceTop $sliceRight $mode;   
    }
}

// Clearfix hack mixin
// Add clearfix hack - to contain floats within containers
@mixin clearfix {
    &:before,
    &:after {
        content: "";
        clear: both;
        display: table;
    }
}

// Display flex mixin
// Add flex display property to any element
@mixin displayFlex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
} 

// Box sizing mixin
// Set box sizing for an element
@mixin boxSizing($sizing) {
	-webkit-box-sizing: $sizing;
	-moz-box-sizing: $sizing;
	box-sizing: $sizing;
}

// Truncate mixin
// Truncate single line text
@mixin truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

// Background Opacity mixin
// Add opacity to a background color
@mixin backgroundOpacity($color, $opacity) {
    background-color: rgba($color, $opacity);
}

// Background Size mixin
// Set background size for a background image
@mixin backgroundSize($width: auto, $height: auto) {
	@if $width == cover or $width == contain {
		-webkit-background-size: $width;
		-moz-background-size: $width;
		-o-background-size: $width;
		background-size: $width;
	}
	@else if ($width != cover and $height != cover) and ($width != contain and $height != contain) {
		-webkit-background-size: $width $height;
		-moz-background-size: $width $height;
		-o-background-size: $width $height;
		background-size: $width $height;
	}
}

// Background linear gradient mixin
// Add a linear gradient to any element's background
@mixin linearGradient($gradientValues...) {
	background: -webkit-linear-gradient($gradientValues);
	background: -moz-linear-gradient($gradientValues);
	background: -o-linear-gradient($gradientValues);
	background: linear-gradient($gradientValues);
}

// Background repeating linear gradient mixin
// Add a repeating linear gradient to any element's background
@mixin repeatingLinearGradient($gradientValues...) {
	background: -webkit-repeating-linear-gradient($gradientValues);
	background: -moz-repeating-linear-gradient($gradientValues);
	background: -o-repeating-linear-gradient($gradientValues);
	background: repeating-linear-gradient($gradientValues);
}

// Background radial gradient mixin
// Add a radial gradient to any element's background
@mixin radialGradient($gradientValues...) {
	background: -webkit-radial-gradient($gradientValues);
	background: -o-radial-gradient($gradientValues);
	background: -moz-radial-gradient($gradientValues);
	background: radial-gradient($gradientValues);
}

// Background repeating radial gradient mixin
// Add a repeating radial gradient to any element's background
@mixin repeatingRadialGradient($gradientValues...) {
	background: -webkit-repeating-radial-gradient($gradientValues);
	background: -o-repeating-radial-gradient($gradientValues);
	background: -moz-repeating-radial-gradient($gradientValues);
	background: repeating-radial-gradient($gradientValues);
}

// Scale transform mixin
// Scale an element
@mixin scale($x, $y: 0) {
	@if $y != 0 {
	 	-webkit-transform: scale($x, $y);
		-moz-transform: scale($x, $y);
		-o-transform: scale($x, $y);
		-ms-transform: scale($x, $y);
		transform: scale($x, $y);
	}
	@else {
		-webkit-transform: scale($x, $x);
		-moz-transform: scale($x, $x);
		-o-transform: scale($x, $x);
		-ms-transform: scale($x, $x);
		transform: scale($x, $x);
	}
}

// Translate transform mixin
// Translate an element
@mixin translate($x, $y: 0) {
	-webkit-transform: translate($x, $y);
	-moz-transform: translate($x, $y);
	-o-transform: translate($x, $y);
	-ms-transform: translate($x, $y);
	transform: translate($x, $y);
}

// Rotate transform mixin
// Rotate an element
@mixin rotate($deg) {
	-webkit-transform: rotate($deg+deg);
	-moz-transform: rotate($deg+deg);
	-o-transform: rotate($deg+deg);
	-ms-transform: rotate($deg+deg);
	transform: rotate($deg+deg);
	-webkit-backface-visibility: hidden;
}

// Skew transform mixin
// Skew an element
@mixin skew($x, $y: 0) {
	-webkit-transform: skew($x+deg, $y+deg);
	-moz-transform: skew($x+deg, $y+deg);
	-o-transform: skew($x+deg, $y+deg);
	-ms-transform: skew($x+deg, $y+deg);
	transform: skew($x+deg, $y+deg);
	-webkit-backface-visibility: hidden;
}

// Flip transform mixin 
// Flip / mirror an element
@mixin flip {
    -webkit-transform: scaleX(-1);
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
   -ms-filter: "FlipH";
}

// Load Font face mixin
// Load a web-safe font with fallbacks
@mixin fontFace($font) {
	$font: to-lower-case($font);
	// Web safe serif fonts
	@if $font == georgia or $font == palatino or $font == times New Roman or $font == times {
		font-family: $font, serif;
	}
	// Web safe sans-serif fonts
	@else if $font == arial or $font == helvetica or $font == gill sans or $font == impact or $font == lucida grande or $font == tahoma or $font == geneva or $font == verdana {
		font-family: $font, sans-serif;
	}
}

// Cursor pointer mixin
// Add a pointer cursor to the hover state of an element
@mixin cursorPointer {
	&:hover {
		cursor: pointer;
	}
}

// No focus mixin
// Remove focus from a button or input field while in focused state
@mixin noFocus {
	&:focus {
		outline: none;
		box-shadow: none;
	}
}

// User select mixin
// Set user select property for an element
@mixin userSelect($value) {
	-webkit-user-select: $value;
	-moz-user-select: $value;
	-ms-user-select: $value;
} 

// Text select mixin
// Modify css for text selection
@mixin textSelection {
	&::selection {
		@content;
	}
	&::-moz-selection {
		@content;
	}
}

// Placeholder mixin
// Style placeholders within input fields
@mixin placeholder {
	&::-webkit-input-placeholder {
		@content;
	}	
	&:-moz-placeholder {
		@content;
	}
	&::-moz-placeholder {
		@content;
	}
	&:-ms-input-placeholder {
		@content;
	}
} 

// Media query breakpoint values
$largeScreen: 1200px;
$mediumScreen: 992px;
$smallScreen: 768px;
$extraSmallScreen: 480px;
$smallMobile: 320px;

// Large screen media query mixin
// Detect large screens and apply css
@mixin media-l-screen {
	@media screen and (max-width: $largeScreen) {
		& {
			@content
		}
	}
}

// Medium screen media query mixin
// Detect medium screens and apply css
@mixin media-m-screen {
	@media screen and (max-width: $mediumScreen) {
		& {
			@content
		}
	}
}

// Small screen media query mixin
// Detect small screens and apply css
@mixin media-s-screen {
	@media screen and (max-width: $smallScreen) {
		& {
			@content
		}
	}
}

// X-small screen media query mixin
// Detect x-small screens and apply css
@mixin media-xs-screen {
	@media screen and (max-width: $extraSmallScreen) {
		& {
			@content
		}
	}
}

// Small mobile screen media query mixin
// Detect small mobile screens and apply css
@mixin media-s-mobile {
	@media screen and (max-width: $smallMobile) {
		& {
			@content
		}
	}
}

// Hi-res retina screen media query mixin
// Detect retina screen and apply css
@mixin media-retina {
	@media (-webkit-min-device-pixel-ratio: 1.5),
		(min--moz-device-pixel-ratio: 1.5),
		(-o-min-device-pixel-ratio: 3/2),
		(min-device-pixel-ratio: 1.5),
		(min-resolution: 1.5dppx) {
			@content;
	}
}

// Background Image retinize mixin
// Retinize a background image
@mixin retinizeBackground($file, $postfix, $type, $width, $height, $location:'') {
	background-image: url($location+$file+"."+$type);
	@include backgroundSize($width, $height);
	@include media-retina {
		background-image: url($location+$file+$postfix+"."+$type);
		@include backgroundSize($width, $height);
	}
}

// Blur filter mixin
// Blur an element
@mixin blur($value) { 
	-webkit-filter: blur($value); // Add value in px
	filter: blur($value);
}

// Grayscale filter mixin
// Add grayscale filter to an element
@mixin grayscale($value) {
	-webkit-filter: grayscale($value); // Add value in %
	filter: grayscale($value);
}

// Sepia filter mixin
// Add sepia filter to an element
@mixin sepia($value) {
	-webkit-filter: sepia($value); // Add value in %
	filter: sepia($value);
}

// Saturate filter mixin
// Add saturation filter to an element
@mixin saturate($value) { 
	-webkit-filter: saturate($value); //Add value in % or whole number
	filter: saturate($value);
}

// Hue rotate filter mixin
// Rotate hue of an element
@mixin hueRotate($value) { 
	-webkit-filter: hue-rotate($value); //Add value in deg
	filter: hue-rotate($value);
}

// Invert filter mixin
// Invert colors of an element
@mixin invert($value) { 
	-webkit-filter: invert($value); //Add value in %
	filter: invert($value);
}

// Opacity filter mixin
// Set opacity of an element
@mixin opacity($value) { 
	-webkit-filter: opacity($value); //Add value in %
	filter: opacity($value);
}

// Brightness filter mixin
// Set brightness of an element
@mixin brightness($value) { 
	-webkit-filter: brightness($value); //Add value in %
	filter: brightness($value);
}

// Contrast filter mixin
// Set contrast of an element
@mixin contrast($value) { 
	-webkit-filter: contrast($value); //Add value in %
	filter: contrast($value);
}

// Drop shadow filter mixin
// Add drop shadow filter to an element
@mixin dropShadow($value) { 
	-webkit-filter: drop-shadow($value); 
	filter: drop-shadow($value);
}

// URL filter mixin
// Add an SVG filter via URL
@mixin url($value) {
	-webkit-filter: url($value); 
	filter: url($value);
}
