// Hidden
@mixin hidden($lower, $upper) {
    @include media-breakpoint-between($lower, $upper) {
        display: none;
    }
}

// Transition
@mixin transit($transit: all 0.5s) {
    @include transition($transit);
}

// Padding
@mixin padding-top($breakpoint, $number) {
    @include media-breakpoint-up($breakpoint) {
        padding-top: #{$number}px;
    }
}

@mixin padding-bottom($breakpoint, $number) {
    @include media-breakpoint-up($breakpoint) {
        padding-bottom: #{$number}px;
    }
}

// Boxed
@mixin boxed {
    @include make-container();
    @include make-container-max-widths();
}

// Column
@mixin col($breakpoint, $column) {
    @extend %grid-column;
    @include media-breakpoint-up($breakpoint) {
        @include make-col-span($column);
    }
}

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

// Clearfix
@mixin clearfix() {
    content: "";
    display: table;
    table-layout: fixed;
}

// Center
@mixin is-translated($width: 100%) {
    width: $width;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

// Absolute center
@mixin absolute-center() {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

// Border radius
@mixin border-radius($radius: 2px) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

// Rotate
@mixin rotate($deg: 90deg) {
    -ms-transform: rotate($deg);
    -webkit-transform: rotate($deg);
    -o-transform: rotate($deg);
    -moz-transform: rotate($deg);
    transform: rotate($deg);
}

// Scale
@mixin scale($scale: 1.1) {
    -ms-transform: scale($scale); /* IE 9 */
    -webkit-transform: scale($scale); /* Safari */
    transform: scale($scale);
}

// Grayscale
@mixin grayscale($val: 100%) {
    -webkit-filter: grayscale($val); /* Safari 6.0 - 9.0 */
    filter: grayscale($val);
}

// Clear after (not all clearfix need this also)
@mixin clearfix-after() {
    clear: both;
}

/////////////////////////////////////////////////
// Responsive font size
/////////////////////////////////////////////////

// These values are the minimum and maximum viewport sizes to apply the font scaling
$min_width: 554;
$max_width: 1200;

@mixin res-font-size($fontsizemin,$fontsizemax) {
    font-size: #{$fontsizemin}px;
    @include media-breakpoint-between(sm, lg) {
        font-size: calc(#{$fontsizemin}px + (#{$fontsizemax} - #{$fontsizemin}) * ((100vw - #{$min_width}px) / (#{$max_width} - #{$min_width})));
    }
    @include media-breakpoint-up(xl) {
        font-size: #{$fontsizemax}px;
    }
}

/////////////////////////////////////////////////
// Responsive margin and padding
/////////////////////////////////////////////////

@mixin res-padding-top($paddingmin,$paddingmax) {
    padding-top: #{$paddingmin}px;
    @include media-breakpoint-between(sm, lg) {
        padding-top: calc(#{$paddingmin}px + (#{$paddingmax} - #{$paddingmin}) * ((100vw - #{$min_width}px) / (#{$max_width} - #{$min_width})));
    }
    @include media-breakpoint-up(xl) {
        padding-top: #{$paddingmax}px;
    }
}

@mixin res-padding-right($paddingmin,$paddingmax) {
    padding-right: #{$paddingmin}px;
    @include media-breakpoint-between(sm, lg) {
        padding-right: calc(#{$paddingmin}px + (#{$paddingmax} - #{$paddingmin}) * ((100vw - #{$min_width}px) / (#{$max_width} - #{$min_width})));
    }
    @include media-breakpoint-up(xl) {
        padding-right: #{$paddingmax}px;
    }
}

@mixin res-padding-bottom($paddingmin,$paddingmax) {
    padding-bottom: #{$paddingmin}px;
    @include media-breakpoint-between(sm, lg) {
        padding-bottom: calc(#{$paddingmin}px + (#{$paddingmax} - #{$paddingmin}) * ((100vw - #{$min_width}px) / (#{$max_width} - #{$min_width})));
    }
    @include media-breakpoint-up(xl) {
        padding-bottom: #{$paddingmax}px;
    }
}

@mixin res-padding-left($paddingmin,$paddingmax) {
    padding-left: #{$paddingmin}px;
    @include media-breakpoint-between(sm, lg) {
        padding-left: calc(#{$paddingmin}px + (#{$paddingmax} - #{$paddingmin}) * ((100vw - #{$min_width}px) / (#{$max_width} - #{$min_width})));
    }
    @include media-breakpoint-up(xl) {
        padding-left: #{$paddingmax}px;
    }
}

@mixin res-margin-top($marginmin,$marginmax) {
    margin-top: #{$marginmin}px;
    @include media-breakpoint-between(sm, lg) {
        margin-top: calc(#{$marginmin}px + (#{$marginmax} - #{$marginmin}) * ((100vw - #{$min_width}px) / (#{$max_width} - #{$min_width})));
    }
    @include media-breakpoint-up(xl) {
        margin-top: #{$marginmax}px;
    }
}

@mixin res-margin-right($marginmin,$marginmax) {
    margin-right: #{$marginmin}px;
    @include media-breakpoint-between(sm, lg) {
        margin-right: calc(#{$marginmin}px + (#{$marginmax} - #{$marginmin}) * ((100vw - #{$min_width}px) / (#{$max_width} - #{$min_width})));
    }
    @include media-breakpoint-up(xl) {
        margin-right: #{$marginmax}px;
    }
}

@mixin res-margin-bottom($marginmin,$marginmax) {
    margin-bottom: #{$marginmin}px;
    @include media-breakpoint-between(sm, lg) {
        margin-bottom: calc(#{$marginmin}px + (#{$marginmax} - #{$marginmin}) * ((100vw - #{$min_width}px) / (#{$max_width} - #{$min_width})));
    }
    @include media-breakpoint-up(xl) {
        margin-bottom: #{$marginmax}px;
    }
}

@mixin res-margin-left($marginmin,$marginmax) {
    margin-left: #{$marginmin}px;
    @include media-breakpoint-between(sm, lg) {
        margin-left: calc(#{$marginmin}px + (#{$marginmax} - #{$marginmin}) * ((100vw - #{$min_width}px) / (#{$max_width} - #{$min_width})));
    }
    @include media-breakpoint-up(xl) {
        margin-left: #{$marginmax}px;
    }
}

@mixin svg-arrow($color, $position: up) {

    $degrees: 0;
    $height: 6px;
    $width: 18px;

    @if ($position == down) {
        $degrees: 180 18 6;
    } @else if ($position == left) {
        $degrees: -90 18 18;
        $width: 6px;
        $height: 18px;
    } @else if ($position == right) {
        $degrees: 90 6 6;
        $width: 6px;
        $height: 18px;
    }

    background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="#{$width * 2}" height="#{$height * 2}"><path fill="#{$color}" transform="rotate(#{$degrees})" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');
    background-size: 100% auto;
    width: $width;
    height: $height;
}

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

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

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

@mixin opacity($trans) {
    filter: alpha(opacity=($trans * 100));
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$trans * 100})";
    -moz-opacity: $trans;
    -khtml-opacity: $trans;
    opacity: $trans;
}

@mixin base-effects() {
    @include opacity(0);
    pointer-events: none;
    @include transition(all .18s ease-out .18s);
}
