/*
 * Font Face
 */
@mixin font-face($family, $name, $weight: 300, $style: null){
    @font-face{
        font-family: $family;
        src:url('./fonts/#{$family}/#{$name}.eot');
        src:url('./fonts/#{$family}/#{$name}.eot?#iefix') format('embedded-opentype'),
        url('./fonts/#{$family}/#{$name}.woff') format('woff'),
        url('./fonts/#{$family}/#{$name}.ttf') format('truetype'),
        url('./fonts/#{$family}/#{$name}.svg#icon') format('svg');
        font-weight: $weight;
        font-style: $style;
    }
}

/*
 * Background Repeat + Position
 */

@mixin bg-option($repeat: no-repeat, $position: center) {
    background-repeat: $repeat;
    background-position: $position;
}

/*
 * CSS Animations based on animate.css
 */

@mixin animated($name, $duration) {
    -webkit-animation-name: $name;
    animation-name: $name;
    -webkit-animation-duration: $duration;
    animation-duration: $duration;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/*
 * CSS Transform - Scale and Rotate
 */
@mixin scale-rotate($scale, $rotate) {
    -webkit-transform: scale($scale) rotate($rotate);
    -ms-transform: scale($scale) rotate($rotate);
    -o-transform: scale($scale) rotate($rotate);
    transform: scale($scale) rotate($rotate);
}

/*
 * User Select
 */
@mixin user-select ($val) {
    -webkit-touch-callout:  $val;
    -webkit-user-select:    $val;
    -khtml-user-select:     $val;
    -moz-user-select:       $val;
    -ms-user-select:        $val;
    user-select:            $val;
}

/*
 * Background Image Cover
 */
@mixin bg-cover($image) {
    background-image: url($image);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
}

@mixin bg-cover-inline() {
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
}

/*
 * Tab Focus
 */
@mixin tab-focus() {
    outline: none !important;
}

/*
 * Pop-in Hover effects
 */
@mixin hover-pop($background: rgba(0,0,0,0.5), $radius: 0, $duration: 250ms, $zindex: 0) {
    @media (min-width: $screen-sm-min) {
        position: relative;

        &:before {
            left: 0;
            top: 0;
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            @include scale3d(0,0,0);
            @include transition(all);
            @include transition-duration($duration);
            @include backface-visibility(hidden);
            background-color: $background;
            z-index: $zindex;
            border-radius: $radius;
            @include opacity(0);
        }

        &:hover:before,
        &.open:before {
            @include scale3d(1,1,1);
            @include opacity(1);
        }
    }
}

/*
 *  Override Bootstrap Button Mixin
 */
@mixin button-variant($color, $background, $border) {
    color: $color;
    background-color: $background;
    border-color: $border;

    &:hover,
    &:focus,
    &.focus,
    &:active,
    .open > .dropdown-toggle & {
        color: $color;
        background-color: $background;
        border-color: transparent;

        &:hover,
        &:focus,
        &.focus {
            color: $color;
            background-color: $background;
            border-color: transparent
        }
    }
    &:active,
    &.active,
    .open > .dropdown-toggle & {
        background-image: none;
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &.focus,
        &:active {
            background-color: $background;
            border-color: $border;
        }
    }

    .badge {
        color: $background;
        background-color: $color;
    }
}

/*
 * Scale 3d
 */

 @mixin scale3d($x, $y, $z) {

//     @process: ~`(function(e){return e=e||"1, 1, 1"})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`;
    -webkit-transform: scale3d($x, $y, $z);
    -moz-transform: scale3d($x, $y, $z);
    -ms-transform: scale3d($x, $y, $z);
    -o-transform: scale3d($x, $y, $z);
    transform: scale3d($x, $y, $z);
}

// List options

// Unstyled keeps list items block level, just removes default browser padding and list-style
@mixin list-unstyled {
  padding-left: 0;
  list-style: none;
}

// Inline turns list items into inline-block
@mixin list-inline {
  @include list-unstyled();
  margin-left: -5px;

  > li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
  }
}

// box shadow

@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow:inset $top $left $blur $color;
    -moz-box-shadow:inset $top $left $blur $color;
    box-shadow:inset $top $left $blur $color;
  } @else {
    -webkit-box-shadow: $top $left $blur $color;
    -moz-box-shadow: $top $left $blur $color;
    box-shadow: $top $left $blur $color;
  }
}