// /*------------------------------------*\
//     #LINK COLORS
// \*------------------------------------*/

// Use: @include link-colors($normal, $hover, $active, $visited, $focus);
// Example: link-colors(#00c, #0cc, #c0c, #ccc, #cc0);

@mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false) {
    color: $normal;

    @if $visited {
        &:visited {
            color: $visited;
        }
    }

    @if $focus {
        &:focus {
            color: $focus;
        }
    }

    @if $hover {
        &:hover {
            color: $hover;
        }
    }

    @if $active {
        &:active {
            color: $active;
        }
    }

}





// /*------------------------------------*\
//     #HOVER LINK
// \*------------------------------------*/

// Use: @include hover-link;

@mixin hover-link {
    text-decoration: none;
    outline: none;

    &:hover, &:focus {
        text-decoration: underline;
    }

}





// /*------------------------------------*\
//     #SELECTION TEXT
// \*------------------------------------*/

// Use: @include selection-text($color, $background-color);
// Example: selection-text(#fff, #000);

@mixin selection-text($color, $background-color, $text-shadow: none) {

    ::selection {
        text-shadow: $text-shadow;
        color: $color;
        background: $background-color;
    }

    ::-moz-selection {
        text-shadow: $text-shadow;
        color: $color;
        background: $background-color;
    }

}





// /*------------------------------------*\
//     #RELATIVE MARGIN
// \*------------------------------------*/

// Use: @include margin-relative($line-height, $font-size);
// Example: @include margin-relative($line-height, $font-size);


@mixin margin($line-height, $font-size, $pos: "bottom") {
    margin-#{$pos}: $line-height / $font-size + em;
}





// /*------------------------------------*\
//     #LINE HEIGHT
// \*------------------------------------*/

// Use: @include font-size($font-px, $base-line-height);
// Example: @include font-size(16, $base-line-height);
//
// Note: Sets the line-height to a multiple of $base-line-height that's not smaller than $font-size

@mixin line-height($font-size, $base-line-height) {
    line-height: ceil($font-size / $base-line-height) * $base-line-height / $font-size;
}





// /*------------------------------------*\
//     #FONT SIZE
// \*------------------------------------*/

// Use: @include font-size($font-px);
// Example: @include font-size(16);

@mixin font-size($font-size, $base: $font-size-base) {
    font-size: $font-size / $base + em;
}





// /*------------------------------------*\
//     #FONT SIZE: PX TO EM
// \*------------------------------------*/

// Use: em($px);
// Example: font-size: em(16);

// STRIP UNIT
// It strips the unit of measure and returns it
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

// CONVERT TO REM
@function em($value, $base-value: $font-size-base)  {
  $value: strip-unit($value) / strip-unit($base-value) * 1em;
  @if ($value == 0em) { $value: 0; } // Turn 0rem into 0
  @return $value;
}
@function rem($value, $base-value: $font-size-base)  {
  $value: strip-unit($value) / strip-unit($base-value) * 1rem;
  @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
  @return $value;
}




// /*------------------------------------*\
//     #FLUIDIZE
// \*------------------------------------*/

// Use: fluidize($px-child, $px-parent);
//
// Example:
// .sidebar {
//    width: fluidize(350px, 1000px);
//    // return width 35%
// }

@function fluidize($px-child, $px-parent) {
    @return percentage($px-child / $px-parent);
}





// /*------------------------------------*\
//     #UTILITES
// \*------------------------------------*/

// Clearfix
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.

@mixin clearfix {
    &:before,
    &:after {
        content: " ";
        // 1
        display: table;
        // 2
    }

    &:after {
        clear: both;
    }

}


// WebKit-style focus
@mixin tab-focus {
    // Default
    outline: thin dotted #333;
    // WebKit
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}


// Center-align a block level element
@mixin center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


// Absolute Horizontal And Vertical aligment
//
// Use: @include absolute-align($aligment);
// Example: @include absolute-align(middle);
// Note: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

@mixin absolute-align($aligment) {
    position: absolute;

    // Requires a specific height
    @if $aligment == vertical {
        top: 0;
        bottom: 0;
        margin-top: auto;
        margin-bottom: auto;
    }

    // Requires a specific width
    @if $aligment == horizontal {
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }
    // Requires a specific width & height
    @if $aligment == middle {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
}


// Placeholder text

@mixin placeholder($color: $input-color-placeholder) {
    &:-moz-placeholder {
        color: $color;
    }
    // Firefox 4-18
    &::-moz-placeholder {
        color: $color;
    }
    // Firefox 19+
    &:-ms-input-placeholder {
        color: $color;
    }
    // Internet Explorer 10+
    &::-webkit-input-placeholder {
        color: $color;
    }
    // Safari and Chrome
}


// Text overflow
//
// Requires inline-block or block for proper styling

@mixin text-overflow($max-width) {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


// Place element
//
// Use: @include place;

@mixin place-center {
    position: absolute;
    @include translate(0, -50%);
    top: 50%;
}





// /*------------------------------------*\
//     #CSS3 PROPERTIES
// \*------------------------------------*/

// Single side border-radius
@mixin border-top-radius($radius) {
    border-top-right-radius: $radius;
    border-top-left-radius: $radius;
}

@mixin border-right-radius($radius) {
    border-bottom-right-radius: $radius;
    border-top-right-radius: $radius;
}

@mixin border-bottom-radius($radius) {
    border-bottom-right-radius: $radius;
    border-bottom-left-radius: $radius;
}

@mixin border-left-radius($radius) {
    border-bottom-left-radius: $radius;
    border-top-left-radius: $radius;
}


// Drop shadows
@mixin box-shadow($shadow...) {
    -webkit-box-shadow: $shadow;
    // iOS <4.3 & Android <4.1
    box-shadow: $shadow;
}


// Transitions
@mixin transition($transition...) {
    -webkit-transition: $transition;
    transition: $transition;
}

@mixin transition-property($transition-property) {
    -webkit-transition-property: $transition-property;
    transition-property: $transition-property;
}

@mixin transition-delay($transition-delay) {
    -webkit-transition-delay: $transition-delay;
    transition-delay: $transition-delay;
}

@mixin transition-duration($transition-duration) {
    -webkit-transition-duration: $transition-duration;
    transition-duration: $transition-duration;
}

@mixin transition-transform($transition...) {
    -webkit-transition: -webkit-transform $transition;
    -moz-transition: -moz-transform $transition;
    -o-transition: -o-transform $transition;
    transition: transform $transition;
}


// Transformations
@mixin rotate($degrees) {
    -webkit-transform: rotate($degrees);
    -ms-transform: rotate($degrees);
    // IE9+
    transform: rotate($degrees);
}

@mixin scale($ratio) {
    -webkit-transform: scale($ratio);
    -ms-transform: scale($ratio);
    // IE9+
    transform: scale($ratio);
}

@mixin translate($x, $y) {
    -webkit-transform: translate($x, $y);
    -ms-transform: translate($x, $y);
    // IE9+
    transform: translate($x, $y);
}

@mixin skew($x, $y) {
    -webkit-transform: skew($x, $y);
    -ms-transform: skewX($x) skewY($y);
    // See https://github.com/twbs/bootstrap/issues/4885; IE9+
    transform: skew($x, $y);
}

@mixin translate3d($x, $y, $z) {
    -webkit-transform: translate3d($x, $y, $z);
    transform: translate3d($x, $y, $z);
}

@mixin rotateX($degrees) {
    -webkit-transform: rotateX($degrees);
    -ms-transform: rotateX($degrees);
    // IE9+
    transform: rotateX($degrees);
}

@mixin rotateY($degrees) {
    -webkit-transform: rotateY($degrees);
    -ms-transform: rotateY($degrees);
    // IE9+
    transform: rotateY($degrees);
}

@mixin perspective($perspective) {
    -webkit-perspective: $perspective;
    -moz-perspective: $perspective;
    perspective: $perspective;
}

@mixin perspective-origin($perspective) {
    -webkit-perspective-origin: $perspective;
    -moz-perspective-origin: $perspective;
    perspective-origin: $perspective;
}

@mixin transform-origin($origin) {
    -webkit-transform-origin: $origin;
    -moz-transform-origin: $origin;
    transform-origin: $origin;
}


// Animations
@mixin animation($animation) {
    -webkit-animation: $animation;
    animation: $animation;
}


// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden`
@mixin backface-visibility($visibility) {
    -webkit-backface-visibility: $visibility;
    -moz-backface-visibility: $visibility;
    backface-visibility: $visibility;
}

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


// User select
// For selecting text on the page
@mixin user-select($select) {
    -webkit-user-select: $select;
    -moz-user-select: $select;
    -ms-user-select: $select;
    // IE10+
    -o-user-select: $select;
    user-select: $select;
}


// Resize anything
@mixin resizable($direction) {
    resize: $direction;
    // Options: horizontal, vertical, both
    overflow: auto;
    // Safari fix
}


// CSS3 Content Columns
@mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
    -webkit-column-count: $column-count;
    -moz-column-count: $column-count;
    column-count: $column-count;
    -webkit-column-gap: $column-gap;
    -moz-column-gap: $column-gap;
    column-gap: $column-gap;
}


// Optional hyphenation
@mixin hyphens($mode: auto) {
    word-wrap: break-word;
    -webkit-hyphens: $mode;
    -moz-hyphens: $mode;
    -ms-hyphens: $mode;
    // IE10+
    -o-hyphens: $mode;
    hyphens: $mode;
}


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


// Appearance
@mixin appearance($appearance) {
    -webkit-appearance: $appearance;
    -moz-appearance: $appearance;
    appearance: $appearance;
}





// /*------------------------------------*\
//     #GRADIENTS
// \*------------------------------------*/

// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.

@mixin gradient-horizontal($start-color: #555555, $end-color: #333333, $start-percent: 0%, $end-percent: 100%) {
    background-image: -webkit-gradient(linear, $start-percent top, $end-percent top, from($start-color), to($end-color));
    // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(left, color-stop($start-color $start-percent), color-stop($end-color $end-percent));
    // Safari 5.1+, Chrome 10+
    background-image: -moz-linear-gradient(left, $start-color $start-percent, $end-color $end-percent);
    // FF 3.6+
    background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
    // Standard, IE10
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1);
    // IE9 and down
}


// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.

@mixin gradient-vertical($start-color: #555555, $end-color: #333333, $start-percent: 0%, $end-percent: 100%) {
    background-image: -webkit-gradient(linear, left $start-percent, left $end-percent, from($start-color), to($end-color));
    // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);
    // Safari 5.1+, Chrome 10+
    background-image: -moz-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);
    // FF 3.6+
    background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
    // Standard, IE10
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0);
    // IE9 and down
}

@mixin gradient-directional($start-color: #555555, $end-color: #333333, $deg: 45deg) {
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient($deg, $start-color, $end-color);
    // Safari 5.1+, Chrome 10+
    background-image: -moz-linear-gradient($deg, $start-color, $end-color);
    // FF 3.6+
    background-image: linear-gradient($deg, $start-color, $end-color);
    // Standard, IE10
}

@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
    background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from($start-color), color-stop($color-stop, $mid-color), to($end-color));
    background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
    background-image: -moz-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
    background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
    background-repeat: no-repeat;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1);
    // IE9 and down, gets no color-stop at all for proper fallback
}

@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from($start-color), color-stop($color-stop, $mid-color), to($end-color));
    background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
    background-image: -moz-linear-gradient(top, $start-color, $mid-color $color-stop, $end-color);
    background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
    background-repeat: no-repeat;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0);
    // IE9 and down, gets no color-stop at all for proper fallback
}

@mixin gradient-radial($inner-color: #555555, $outer-color: #333333) {
    background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($inner-color), to($outer-color));
    background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
    background-image: -moz-radial-gradient(circle, $inner-color, $outer-color);
    background-image: radial-gradient(circle, $inner-color, $outer-color);
    background-repeat: no-repeat;
}

@mixin gradient-striped($color: rgba(255, 255, 255, 0.15), $angle: 45deg) {
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, $color), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, $color), color-stop(0.75, $color), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
    background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}


// Reset filters for IE
//
// When you need to remove a gradient background, do not forget to use this to reset
// the IE filter for IE9 and below.

@mixin reset-filter {
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}


// Retina images
//
// Short retina mixin for setting background-image and -size

@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
    background-image: image-url(#{$file-1x});
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
        background-image: image-url(#{$file-2x});
        background-size: $width-1x $height-1x;
    }
}


// Responsive image
//
// Keep images from scaling beyond the width of their parents.

@mixin img-responsive($display: inline-block) {
    display: $display;
    max-width: 100%;
    // Part 1: Set a maximum relative to the parent
    height: auto;
    // Part 2: Scale the height according to the width, otherwise you get stretching
}





// /*------------------------------------*\
//     #Z-INDEX
// \*------------------------------------*/

@function z-index($layer) {

    @if not map-has-key($z-layers, $layer) {
        @warn "No layer found for `#{$layer}` in $z-layers map. Property omitted.";
    }

    @return map-get($z-layers, $layer);

}





// /*------------------------------------*\
//     #FUNCTION PALETTE
// \*------------------------------------*/

@function palette($palette, $tone: 'base') {
    @return map-get(map-get($palettes, $palette), $tone);
}
