//== [ Transformations ]
@mixin transform($value...) {
    -webkit-transform: $value;
    transform: $value;
}

@mixin transform-none() {
    -webkit-transform: none;
    transform: none;
}

@mixin scale($ratio...) {
    -webkit-transform: scale($ratio);
    transform: scale($ratio);
}

@mixin scaleX($ratio) {
    -webkit-transform: scaleX($ratio);
    transform: scaleX($ratio);
}

@mixin scaleY($ratio) {
    -webkit-transform: scaleY($ratio);
    transform: scaleY($ratio);
}

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

@mixin skew($x, $y) {
    -webkit-transform: skewX($x) skewY($y);
    transform: skewX($x) skewY($y);
}

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

@mixin translateX($x) {
    -webkit-transform: translateX($x);
    transform: translateX($x);
}

@mixin translateY($y) {
    -webkit-transform: translateY($y);
    transform: translateY($y);
}

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

@mixin translate-0() {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

@mixin rotate($degrees) {
    -webkit-transform: rotate($degrees);
    transform: rotate($degrees);
}

@mixin rotateX($degrees) {
    -webkit-transform: rotateX($degrees);
    transform: rotateX($degrees);
}

@mixin rotateY($degrees) {
    -webkit-transform: rotateY($degrees);
    transform: rotateY($degrees);
}

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

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

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

//== [ 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-timing-function($timing-function) {
    -webkit-transition-timing-function: $timing-function;
    transition-timing-function: $timing-function;
}

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

//== [ Animations ]
@mixin animation($animation...) {
    -webkit-animation: $animation;
    animation: $animation;
}

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

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

@mixin animation-timing-function($timing-function) {
    -webkit-animation-timing-function: $timing-function;
    animation-timing-function: $timing-function;
}

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

@mixin animation-iteration-count($iteration-count) {
    -webkit-animation-iteration-count: $iteration-count;
    animation-iteration-count: $iteration-count;
}

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

@mixin animation-fill-mode($fill-mode) {
    -webkit-animation-fill-mode: $fill-mode;
    animation-fill-mode: $fill-mode;
}

//== [ animate load more ]

@mixin dot($width: $dotWidth, $height: $dotHeight, $radius: $dotRadius,$bgColor: $dotBgColor, $color: $dotColor ) {
    width: $width;
    height: $height;
    border-radius: $radius;
    background-color: $bgColor;
    color: $color;
}

@mixin placeholder($value) {
    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        color: $value;
    }
    &::-moz-placeholder { /* Firefox 19+ */
        color: $value;
    }
    &:-ms-input-placeholder { /* IE 10+ */
        color: $value;
    }
    &:-moz-placeholder { /* Firefox 18- */
        color: $value;
    }
}

@mixin resize-font($min-size, $max-size, $min-width, $max-width, $property: font-size, $px: px) {
    #{$property}: resize-font($min-size, $max-size, $min-width, $max-width);
    @media (max-width: #{$min-width}#{$px}) {
        #{$property}: printRem($min-size);
    }
    @media (min-width: #{$max-width}#{$px}) {
        #{$property}: printRem($max-size);
    }
}

@mixin rem-baseline($zoom: 100%) {
    font-size: $zoom / 16px * $rem-baseline;
}

@mixin rem($properties, $values...) {
    @if type-of($properties) == "map" {
        @each $property in map-keys($properties) {
            @include rem($property, map-get($properties, $property));
        }
    } @else {
        @each $property in $properties {
            @if $rem-fallback or $rem-px-only {
                #{$property}: rem-convert(px, $values...);
            }
            @if not $rem-px-only {
                #{$property}: rem-convert(rem, $values...);
            }
        }
    }
}

@mixin animation($value) {
    -webkit-animation: ($value);
    -moz-animation: ($value);
    -ms-animation: ($value);
    -o-animation: ($value);
    animation: ($value);
}

@mixin flex($value) {
    -webkit-box-flex: 0;
    max-width: $value;
    flex: 0 0 $value;
}

@mixin display-flex() {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

@mixin flex-direction($value) {
    -webkit-flex-direction: $value;
    -ms-flex-direction: $value;
    flex-direction: $value;
}

@mixin order($value) {
    -webkit-box-ordinal-group: $value + 1;
    -ms-flex-order: $value;
    -webkit-order: $value;
    order: $value;
}

@mixin background-border-color($color) {
    background: $color;
    border-color: $color;
}

// Text styling
@mixin letter-spacing($value) {
    letter-spacing: $value;
}

@mixin text-overflow() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin font-face($font-family, $font-weight, $url) {
    @font-face {
        font-family: '#{$font-family}';
        src: url('#{$url}.ttf') format('truetype');
        font-weight: $font-weight;
        font-style: normal;
        font-display: auto;
    }
}

@mixin btn-square($size) {
    line-height: $size;
    text-align: center;
}

//== [ Calculator ]
@mixin calc($property, $value) {
    #{$property}: calc(#{$value});
    #{$property}: -webkit-calc(#{$value});
}

//== [ Positioning element ]
@mixin position($position, $top: null, $right: null, $bottom: null, $left: null, $index: null) {
    position: $position;
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
    z-index: $index;
}

@mixin center-position() {
    top: 50%;
    left: 50%;
    @include transform(translate(-50%, -50%));
}

@mixin margin($top : null, $right : null ,$bottom : null, $left: null) {
    margin-top: rem($top);
    margin-right: rem($right);
    margin-bottom: rem($bottom);
    margin-left: rem($left);
}

@mixin padding($top : null, $right : null ,$bottom : null, $left: null) {
    padding-top: rem($top);
    padding-right: rem($right);
    padding-bottom: rem($bottom);
    padding-left: rem($left);
}

@mixin checkbox($tag) {
    display: none !important;

    & + #{$tag}:before {
        @extend %middle;
        @extend %checkbox;
        border: 1px solid $border_color;
        @include border-radius(999px);
        font-family: $icon_font;
        color: $heading_color;
    }
    &:checked + #{$tag}:before {
        content: '\e9c1';
    }
}

@mixin checkbox-label() {
    display: none !important;

    & + label[for]:before {
        @extend %middle;
        @extend %checkbox;
        border: 1px solid $border_color;
        @include border-radius(999px);
        font-family: $icon_font;
        color: $heading_color;
    }
    &:checked + label[for]:before {
        content: '\e9c1';
    }
}

@mixin heading-txt($heading_color) {
    font-family: $heading_font;
    color: $heading_color;
}

@mixin angle-top($value, $color, $index) {
    content: '';
    width: 0;
    height: 0;
    border-color: transparent transparent $color transparent;
    border-width: $value;
    border-style: solid;
    position: absolute;
    top: - #{$value * 2 };
    z-index: $index;
}

@mixin angle-right($value, $color, $index) {
    content: '';
    width: 0;
    height: 0;
    border-color: transparent $color transparent transparent;
    border-width: $value;
    border-style: solid;
    position: absolute;
    left: - #{$value * 2 };
    z-index: $index;
}

@mixin angle-bottom($value, $color, $index) {
    content: '';
    width: 0;
    height: 0;
    border-color: $color transparent transparent;
    border-width: $value;
    border-style: solid;
    position: absolute;
    bottom: - #{$value * 2 };
    margin-left: - #{$value};
    z-index: $index;
}

@mixin angle-left($value, $color, $index) {
    content: '';
    width: 0;
    height: 0;
    border-color: transparent transparent transparent $color;
    border-width: $value;
    border-style: solid;
    position: absolute;
    right: - #{$value * 2 };
    z-index: $index;
}

@mixin button-default-effect-3($a, $b, $c, $d) {
    width: rem($a);
    height: rem($b);
    padding: rem($c);
    font-size: rem($d);
    i {
        position: absolute;

        &:before {
            display: inline-block;
        }
    }

    &:hover {
        i:before {
            @include animation(wolfoBtnHover ease-out 0.3s);
        }
    }
}

//== [ Button Layout Effect 2 - button default + outline ]
@mixin button-layout-effect-2 {
    a {
        overflow: hidden;
        @include transition(all .4s, color 0s);

        span {
            @include transition(all .4s);
        }

        &:after {
            content: '\eb23';
            display: inline-block;
            line-height: 1;
            font-family: $icon_font;
            font-size: rem(20px);
            margin-top: -10px;
            @include position(absolute, 50%, 10px);
            @include transition(all .4s, color 0s);
            @extend %text-opacity-hiden;
        }
    }
    &:hover {
        a {
            span {
                text-indent: -10px;
                padding-right: rem(10px);
            }

            &:after {
                @extend %text-opacity-show;
                @include animation(wolfoBtnHover ease-out 0.3s);
            }
        }
    }
}

//== [ Button Layout Effect 3 - button default + outline ]
@mixin button-layout-effect-3 {
    overflow: hidden;

    &.size-small a {
        @include button-default-effect-3(30px, 30px, 5px, 20px);
    }

    &.size-medium a {
        @include button-default-effect-3(40px, 40px, 7px, 21px);
    }

    &.size-large a {
        @include button-default-effect-3(50px, 50px, 9px, 22px);
    }

    a {
        justify-content: center;
    }
}

//== [ Button Layout Effect 4- button default + outline ]
@mixin button-layout-effect-4 {
    a {
        .btn-line {
            display: block;
            width: calc(100% + 4px);
            height: calc(100% + 4px);
            @extend %text-opacity-hiden;
            @include position(absolute, rem(-2px), null, null, rem(-2px));
            @include box-shadow(0 0 0 2px $primary_color);
            @include transition(transform 0.4s, opacity 0.4s);
            @include transform(scale(.8));
        }
    }
    &:hover .btn-line {
        @extend %text-opacity-show;
        @include transform(scale(1));
    }
}


