/*@include text-hide;*/
@mixin text-hide{
  text-indent: -9999px;
  overflow: hidden;
}

/* @include transform-translate(null, 50%); */

//CSS3 Transform mixins transform: rotate, scale, skew, translate
@mixin transform-rotate($val){
    @if($val != null){
        transform : rotate($val + deg) ;
    }
}
@mixin transform-scale($x:1, $y:1){
    transform : scale($x, $y);
}
@mixin transform-skew($x:0, $y:0){
    transform : skew($x + deg, $y + deg) ;
}
@mixin transform-translate($x, $y){
    @if($x != null){
        transform : translateX($x);
    }
    @if($y != null){
        transform : translateY($y);
    }
}

/*@include valign(top);*/
@mixin valign($position){
  display:inline-block;
  vertical-align:$position;
}

/*@include resize(full);*/
@mixin resize($width) {
  @if $width == full {
   width: 100%;
  }
  @else if $width == norm {
   max-width: 100%;
  }
  height:auto;
}

/* @include box-sizing(border-box); */
@mixin box-sizing($box-model) {
  box-sizing: $box-model;
}

/* @include text-ellipsis; */
@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
@include media(tablet){background: #000;}
@include media(mobile){background: #f00;}
*/
@mixin media($point) {
  @if $point == desktop {
   @media only screen and (max-width: $desktop) { @content; } 
  }
  @else if $point == tablet {
   @media only screen and (max-width: $tablet) { @content; } 
  }
  @else if $point == mobile {
   @media only screen and (max-width: $mobile) { @content; } 
  }
  @else if $point == mobile-small {
   @media only screen and (max-width: $mobile-small) { @content; } 
  }
}

/*triangle*/
/*@include triangle-bottom(300px, 100px, #f00);*/

@mixin triangle-left($width, $height, $bg) {
  width:0;
  height:0;
  border-style: solid;
  border-width:$height/2 $width $height/2 0;
  border-color: transparent $bg transparent transparent;
}
@mixin triangle-right($width, $height, $bg) {
  width:0;
  height:0;
  border-style: solid;
  border-width:$height/2 0 $height/2 $width;
  border-color: transparent transparent transparent $bg;
}
@mixin triangle-top($width, $height, $bg) {
  width:0;
  height:0;
  border-style: solid;
  border-width:0 $width/2 $height $width/2;
  border-color: transparent transparent $bg transparent;
}
@mixin triangle-bottom($width, $height, $bg) {
  width:0;
  height:0;
  border-style: solid;
  border-width:$height $width/2 0 $width/2;
  border-color:$bg transparent transparent transparent;
}