@mixin background($repeat, $size, $position) {
    background-repeat: $repeat;
    background-size: $size;
    background-position: $position;
}

//Box 

@mixin box($width, $height) {
    width: $width;
    height: $height;
}

@mixin box-circle() {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

//Position Align

@mixin abs-position ($top, $right, $bottom, $left) {
    position: absolute;
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
}

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

//Text Shorten

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

//Display Flex

@mixin d-flex {
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    flex-wrap: wrap;
   
}
@mixin flex-wrap($value: nowrap) {
    -webkit-flex-wrap: $value;
    @if $value==nowrap {
        -ms-flex-wrap: none;
    }
    @else {
        -ms-flex-wrap: $value;
    }

    flex-wrap: $value;
}
@mixin inline-flex {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

@mixin flex-direction($direction) {
    @if $direction==column {
        -webkit-flex-direction: vertical;
        -moz-flex-direction: vertical;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    @else {
        -webkit-flex-direction: horizontal;
        -moz-flex-direction: horizontal;
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
    }
}

@mixin justify-content($value: flex-start) {
    @if $value==flex-start {
        -webkit-box-pack: start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
    }

    @else if $value==flex-end {
        -webkit-box-pack: end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
    }

    @else if $value==space-between {
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
    }

    @else if $value==space-around {
        -ms-flex-pack: distribute;
    }

    @else {
        -webkit-box-pack: $value;
        -moz-box-pack: $value;
        -ms-flex-pack: $value;
    }

    -webkit-justify-content: $value;
    justify-content: $value;
}
@mixin align-items($value: stretch) {
    @if $value==flex-start {
        -webkit-box-align: start;
        -moz-box-align: start;
        -ms-flex-align: start;
    }

    @else if $value==flex-end {
        -webkit-box-align: end;
        -moz-box-align: end;
        -ms-flex-align: end;
    }

    @else {
        -webkit-box-align: $value;
        -moz-box-align: $value;
        -ms-flex-align: $value;
    }

    -webkit-align-items: $value;
    align-items: $value;
}

@mixin align-center{
        display: -webkit-inline-box;
        display: -moz-inline-box;
        display: -webkit-inline-flex;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center; 
}
//Transforn

// Rotate
@mixin rotate ($deg) {
    @include transform(rotate(#{$deg}deg));
}
  // RotateX
  @mixin rotateX($deg) {
      @include transform(rotateX(#{$deg}deg));
  }

  // RotateY
  @mixin rotateY($deg) {
      @include transform(rotateY(#{$deg}deg));
  }

// Scale
@mixin scale($scale) {
    @include transform(scale($scale));
}
// ScaleX
@mixin scaleX($scale) {
    @include transform(scaleX($scale));
}
// ScaleY
@mixin scaleY($scale) {
    @include transform(scaleY($scale));
}

// Skew
@mixin skew ($x, $y) {
    @include transform(skew(#{$x}deg, #{$y}deg));
}

// Transform Origin
@mixin transform-origin ($origin) {
    -webkit-transform-origin: $origin;
    -moz-transform-origin: $origin;
    -ms-transform-origin: $origin;
    transform-origin: $origin;
}

@mixin transform-x($value1) {
  -webkit-transform: translateX($value1);
  -moz-transform: translateX($value1);
  -ms-transform: translateX($value1);
  -o-transform: translateX($value1);
  transform: translateX($value1);
}

@mixin transform-y($value1) {
  -webkit-transform: translateY($value1);
  -moz-transform: translateY($value1);
  -ms-transform: translateY($value1);
  -o-transform: translateY($value1);
  transform: translateY($value1);
}


//Transition

@mixin transition($time) {
    -webkit-transition: all $time ease;
    -moz-transition: all $time ease;
    -o-transition: all $time ease;
    transition: all $time ease;
}

@mixin transition-linear($time) {
    -webkit-transition: all $time linear;
    -moz-transition: all $time linear;
    -o-transition: all $time linear;
    transition: all $time linear;
}




//Placeholder

@mixin placeholder {
    &.placeholder {
        @content;
    }

    &:-moz-placeholder {
        @content;
    }

    &::-moz-placeholder {
        @content;
    }

    &:-ms-input-placeholder {
        @content;
    }

    &::-webkit-input-placeholder {
        @content;
    }
}

//Border Radius

@mixin bd-radius($value) {
    -webkit-border-radius: $value;
    -moz-border-radius: $value;
    border-radius: $value;
}

@mixin bd-radius2($val, $val2, $val3, $val4) {
    -webkit-border-radius: $val,
        $val2,
        $val3,
        $val4;
    -moz-border-radius: $val,
        $val2,
        $val3,
        $val4;
    border-radius: $val,
        $val2,
        $val3,
        $val4;
}


@mixin box-shadow($val1, $val2, $val3, $rgb1) {
  -webkit-box-shadow: $val1 $val2 $val3 $rgb1;
  -moz-box-shadow: $val1 $val2 $val3 $rgb1;
  box-shadow: $val1 $val2 $val3 $rgb1;
}
@mixin box-shadow2($value) {
  -webkit-box-shadow: $value;
  -moz-box-shadow: $value;
  box-shadow: $value;
}