@mixin transform-translate-x($value) {
  transform: translate3d($value, 0, 0);
}

@mixin transform-translate-y($value) {
  transform: translate3d(0, $value, 0);
}

@mixin transitions($time, $type) {
  transition: all $time $type;
}

@mixin diagonal-gradient($start-color, $end-color) {
  background: $start-color;
  background-image: -webkit-linear-gradient(
    to bottom left,
    $start-color,
    $end-color,
    $start-color
  );
  background-image: -o-linear-gradient(
    to bottom left,
    $start-color,
    $end-color,
    $start-color
  );
  background-image: -moz-linear-gradient(
    to bottom left,
    $start-color,
    $end-color,
    $start-color
  );
  background-image: linear-gradient(
    to bottom left,
    $start-color,
    $end-color,
    $start-color
  );
  background-size: 210% 210%;
  background-position: top right;
}

@mixin bar-animation($type) {
  animation: $type 500ms 0s;
  animation-fill-mode: forwards;
}

@mixin rotate-180() {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  transform: rotate(180deg);
}

@mixin transform-translate-y-dropdown($value) {
  transform: translate3d(0, $value, 0) !important;
}

@mixin linear-gradient($color, $states-color) {
  background: $color;
  background: linear-gradient(0deg, $color 0%, $states-color 100%);
}

@mixin linear-gradient-right($color, $states-color) {
  background: $color;
  background: linear-gradient(to right, $color 0%, $states-color 100%);
}

@mixin sidebar-color($color) {
  &:after {
    background: $color;
  }

  .nav li.active > a {
    color: $color;

    i {
      color: $color;
    }
  }
}

@mixin transition-input-focus-color() {
  transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out,
    background-color 0.3s ease-in-out;
}

@mixin topbar-x-rotation() {
  @keyframes topbar-x {
    0% {
      top: 0;
      transform: rotate(0deg);
    }
    45% {
      top: 6px;
      transform: rotate(145deg);
    }
    75% {
      transform: rotate(130deg);
    }
    100% {
      transform: rotate(135deg);
    }
  }
}

@mixin topbar-back-rotation() {
  @keyframes topbar-back {
    0% {
      top: 6px;
      transform: rotate(135deg);
    }
    45% {
      transform: rotate(-10deg);
    }
    75% {
      transform: rotate(5deg);
    }
    100% {
      top: 0;
      transform: rotate(0);
    }
  }
}

@mixin bottombar-x-rotation() {
  @keyframes bottombar-x {
    0% {
      bottom: 0;
      transform: rotate(0deg);
    }
    45% {
      bottom: 6px;
      transform: rotate(-145deg);
    }
    75% {
      transform: rotate(-130deg);
    }
    100% {
      transform: rotate(-135deg);
    }
  }
}

@mixin bottombar-back-rotation {
  @keyframes bottombar-back {
    0% {
      bottom: 6px;
      transform: rotate(-135deg);
    }
    45% {
      transform: rotate(10deg);
    }
    75% {
      transform: rotate(-5deg);
    }
    100% {
      bottom: 0;
      transform: rotate(0);
    }
  }
}

@mixin nc-rotate($degrees, $rotation) {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
  transform: rotate($degrees);
}

@mixin nc-flip($horiz, $vert, $rotation) {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
  transform: scale($horiz, $vert);
}