/*********************
  Mixins
**********************/

@mixin hover {
    @if $enable-hover-media-query {
        // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
        // Currently shimmed by https://github.com/twbs/mq4-hover-shim
        @media (hover: hover) {
            &:hover {
                @content
            }
        }
    }
    @else {
        &:hover {
            @content
        }
    }
}

@mixin hover-focus {
    @if $enable-hover-media-query {
        &:focus {
            @content
        }
        @include hover {
            @content
        }
    }
    @else {
        &:focus,
        &:hover {
            @content
        }
    }
}

@mixin plain-hover-focus {
    @if $enable-hover-media-query {
        &,
        &:focus {
            @content
        }
        @include hover {
            @content
        }
    }
    @else {
        &,
        &:focus,
        &:hover {
            @content
        }
    }
}

@mixin hover-focus-active {
    @if $enable-hover-media-query {
        &:focus,
        &:active {
            @content
        }
        @include hover {
            @content
        }
    }
    @else {
        &:focus,
        &:active,
        &:hover {
            @content
        }
    }
}

@mixin border-radius($args) {
    -webkit-border-radius: $args;
    -moz-border-radius: $args;
    -ms-border-radius: $args;
    -o-border-radius: $args;
    border-radius: $args;
}

@mixin placeholder {
    &::-webkit-input-placeholder {
        @content
    }
    &:-moz-placeholder {
        @content
    }
    &::-moz-placeholder {
        @content
    }
    &::-ms-placeholder {
        @content
    }
    &::placeholder {
        @content
    }
}

// New mixins
@mixin make-button($name, $color) {
    .btn-#{$name} {
        background-color: $color;
        &:hover,
        &:focus,
        &:active,
        &.active {
            background-color: lighten($color, 5%) !important;
        }
        &.dropdown-toggle {
            background-color: $color!important;
            &:hover,
            &:focus {
                background-color: lighten($color, 5%) !important;
            }
        }
    }
}

@mixin make-outline-button($name, $color) {
    .btn-outline-#{$name} {
        border: 2px solid $color;
        color: $color !important;
        background-color: transparent;
        &:hover,
        &:focus,
        &:active,
        &:active:focus,
        &.active {
            background-color: transparent;
            color: $color;
            border-color: $color;
        }
    }
}

@mixin make-gradient-button($name, $value) {
    .btn.#{$name}-gradient {
        background: linear-gradient(40deg, map-get($value, start), map-get($value, end));
        transition:.5s ease;
        &:hover,
        &:focus,
        &:active,
        &:active:focus
        &.active {
            background: linear-gradient(40deg, lighten(map-get($value, start), 5%), lighten(map-get($value, end), 5%));
        }
    }
}

// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
    padding: $padding-y $padding-x;
    font-size: $font-size;
    line-height: $line-height;
    @include border-radius($border-radius);
}


@mixin transition($transition...) {
    @if $enable-transitions {
        @if length($transition) == 0 {
            transition: $transition-base;
        } @else {
            transition: $transition;
        }
    }
}

@mixin transform($args) {
    -webkit-transform: $args;
    -moz-transform: $args;
    -ms-transform: $args;
    -o-transform: $args;
    transform: $args;
}

@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
    $min: map-get($breakpoints, $name);
    @return if($min != 0, $min, null);
}

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
    $min: breakpoint-min($name, $breakpoints);
    @if $min {
        @media (min-width: $min) {
            @content;
        }
    } @else {
        @content;
    }
}

// Flexbox
@mixin flexbox() {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
    @mixin flex($values) {
      -webkit-box-flex: $values;
      -moz-box-flex:  $values;
      -webkit-flex:  $values;
      -ms-flex:  $values;
      flex:  $values;
    }
    @mixin order($val) {
      -webkit-box-ordinal-group: $val;
      -moz-box-ordinal-group: $val;
      -ms-flex-order: $val;
      -webkit-order: $val;
      order: $val;
    }
    @mixin align($align) {
      -webkit-flex-align: $align;
      -ms-flex-align: $align;
      -webkit-align-items: $align;
      align-items: $align;
    }
    @mixin justify-content($val) {
      -webkit-justify-content: $val;
      justify-content: $val;
    }