/*------------------------------------*\
    $MIXINS
\*------------------------------------*/
/*
* Fácil de usar: las variables a usar están en settings.scss y son:
    'small'  : 48em,
    'medium' : 56.25em,
    'large'  : 68.75em,
* Y el uso va como sigue:
    .foo {
        color: red;
        @include respond-to('small') {
            color: blue;
        }
    }
*/
@mixin respond-to($breakpoint) {
    @if map-has-key($breakpoints, $breakpoint) {
        @media #{map-get($breakpoints, $breakpoint)} {
            @content;
        }
    } @else {
        @warn 'Unfortunately, no value could be retrieved from `#{$breakpoint}`. '
        + 'Please make sure it is defined in `$breakpoints` map.';
    }
}

/**
* Centrar y dar un ancho máximo igual a $pagemaxwidth.
*/
@mixin max-width($max-width: $pagemaxwidth)  {
    margin-left: auto;
    margin-right: auto;
    max-width: $max-width;
    width: 100%;
}

/**
* Asignar propiedades CSS FontAwesome para un elemento
*/
@mixin fa($font-size: 20)  {
    display: inline-block;
    font: normal normal normal $font-size + px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

// .border-radius(VALUE, VALUE, VALUE, VALUE);
@mixin border-radius($topleft: $border-radius, $topright: $border-radius, $bottomright: $border-radius, $bottomleft: $border-radius) {
    -webkit-border-top-right-radius: $topright;
    -webkit-border-bottom-right-radius: $bottomright;
    -webkit-border-bottom-left-radius: $bottomleft;
    -webkit-border-top-left-radius: $topleft;
    -moz-border-radius-topright: $topright;
    -moz-border-radius-bottomright: $bottomright;
    -moz-border-radius-bottomleft: $bottomleft;
    -moz-border-radius-topleft: $topleft;
    border-top-right-radius: $topright;
    border-bottom-right-radius: $bottomright;
    border-bottom-left-radius: $bottomleft;
    border-top-left-radius: $topleft;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

// .opacity(VALUE);
@mixin opacity($opacity: .5) {
    -webkit-opacity: $opacity;
    -moz-opacity: $opacity;
    opacity: $opacity;
}

// .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
@mixin transition($transition: all $transitiom-time $transition-timing) {
    -webkit-transition: $transition;
    -moz-transition: $transition;
    -ms-transition: $transition;
    -o-transition: $transition;
    transition: $transition;
}

// .background-alpha(VALUE, VALUE);
@mixin background-alpha($color: $color-white, $alpha: 1) {
    background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
}

// .background-size(VALUE VALUE);
@mixin background-size($size){
    -webkit-background-size: $size;
    -moz-background-size: $size;
    -o-background-size: $size;
    background-size: $size;
}

// .rotate(VALUE VALUE);
@mixin rotate($deg){
    -moz-transform: rotate($deg + deg);
    -webkit-transform: rotate($deg + deg);
    -o-transform: rotate($deg + deg);
    -ms-transform: rotate($deg + deg);
    transform: rotate($deg + deg);
}

/**
 * Creamos prefijos para todo dios 
 *     `@include vendor(border-radius, 4px);`
 */
@mixin vendor($property, $value...){
    -webkit-#{$property}:$value;
    -moz-#{$property}:$value;
    -ms-#{$property}:$value;
    -o-#{$property}:$value;
    #{$property}:$value;
}