@mixin centerX {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@mixin centerY {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

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

@mixin ellipsis {
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

// fix inline-block ele bug
@mixin inlineblockfix {
  font-size: 0;
}

//clear floats
@mixin clearfix {
  &:before, &:after { content: " "; display: table; }
  &:after { clear: both; }
}

// 
@mixin liheight($height) {
  height: $height;
  line-height: $height;
}

@mixin minliheight($height) {
  min-height: $height;
  line-height: $height;
}

// 
@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
  transition: $property $speed $ease;
}

// create isosceles triangles
// $triangle-size - Used to set border-size. No default, set a px or em size.
// $triangle-color - Used to set border-color which makes up triangle. No default
// $triangle-direction - Used to determine which direction triangle points. Options: top, bottom, left, right
@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
  border: inset $triangle-size;
  content: "";
  display: block;
  height: 0;
  width: 0;
  @if ($triangle-direction == top) {
    border-color: $triangle-color transparent transparent transparent;
    border-top-style: solid;
  }
  @if ($triangle-direction == bottom) {
    border-color: transparent transparent $triangle-color transparent;
    border-bottom-style: solid;
  }
  @if ($triangle-direction == left) {
    border-color: transparent transparent transparent $triangle-color;
    border-left-style: solid;
  }
  @if ($triangle-direction == right) {
    border-color: transparent $triangle-color transparent transparent;
    border-right-style: solid;
  }
}

// create the icon with three lines aka the hamburger icon, the menu-icon or the navicon
// $width - Width of hamburger icon in rem
// $left - If false, icon will be centered horizontally || explicitly set value in rem
// $top - If false, icon will be centered vertically || explicitly set value in rem
// $thickness - thickness of lines in hamburger icon, set value in px
// $gap - spacing between the lines in hamburger icon, set value in px
// $color - icon color
// $hover-color - icon color during hover
// $offcanvas - Set to true of @include in offcanvas
@mixin hamburger($width, $left, $top, $thickness, $gap, $color, $hover-color, $offcanvas) {
  span::after {
    content: "";
    display: block;
    height: 0;
    position: absolute;

    @if $offcanvas {
      @if $top {
        top: $top;
      }
      @else {
        top: 50%;
        margin-top: (-$width/2);
      }
      @if $left {
        left: $left;
      }
      @else {
        left: (rem-calc(50) - $width)/2;
      }
    }
    @else {
      top: 50%;
      #{$opposite-direction}: 15px;
    }

    box-shadow:
      0 0 0 $thickness $color,
      0 $gap + $thickness 0 $thickness $color,
      0 (2 * $gap + 2*$thickness) 0 $thickness $color;
    width: $width;
  }
  span:hover:after {
    box-shadow:
      0 0 0 $thickness $hover-color,
      0 $gap + $thickness 0 $thickness $hover-color,
      0 (2 * $gap + 2*$thickness) 0 $thickness $hover-color;
  }
}