@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) {
  ::-webkit-scrollbar {
      width:  $size;
      height: $size;
  }

  ::-webkit-scrollbar-thumb {
      background: $foreground-color;
  }

  ::-webkit-scrollbar-track {
      background: $background-color;
  }

  // For Internet Explorer
  body {
    scrollbar-face-color: $foreground-color;
    scrollbar-track-color: $background-color;
  }
}

@mixin box-shadow($shadow...) {
  box-shadow: $shadow;
}

@mixin transition-input-focus-color() {
  -webkit-transition: color .3s ease-in-out, border-color .3s ease-in-out,
  background-color .3s ease-in-out;
     -moz-transition: color .3s ease-in-out, border-color .3s ease-in-out,
  background-color .3s ease-in-out;
      -ms-transition: color .3s ease-in-out, border-color .3s ease-in-out,
  background-color .3s ease-in-out;
       -o-transition: color .3s ease-in-out, border-color .3s ease-in-out,
  background-color .3s ease-in-out;
          transition: color .3s ease-in-out, border-color .3s ease-in-out,
  background-color .3s ease-in-out;
}

@mixin rotate-180() {
  transform: rotate(180deg);
}

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

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

@mixin bar-animation($type) {
  -webkit-animation: $type 500ms linear 0s;
     -moz-animation: $type 500ms linear 0s;
          animation: $type 500ms 0s;

  -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@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);
    }
  }
  @-webkit-keyframes topbar-x {
    0% {
      top: 0;

      -webkit-transform: rotate(0deg);
    }
    45% {
      top: 6px;

      -webkit-transform: rotate(145deg);
    }
    75% {
      -webkit-transform: rotate(130deg);
    }
    100% {
      -webkit-transform: rotate(135deg);
    }
  }
  @-moz-keyframes topbar-x {
    0% {
      top: 0;

      -moz-transform: rotate(0deg);
    }
    45% {
      top: 6px;

      -moz-transform: rotate(145deg);
    }
    75% {
      -moz-transform: rotate(130deg);
    }
    100% {
      -moz-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);
    }
  }

  @-webkit-keyframes topbar-back {
    0% {
      top: 6px;

      -webkit-transform: rotate(135deg);
    }
    45% {
      -webkit-transform: rotate(-10deg);
    }
    75% {
      -webkit-transform: rotate(5deg);
    }
    100% {
      top: 0;

      -webkit-transform: rotate(0);
    }
  }

  @-moz-keyframes topbar-back {
    0% {
      top: 6px;

      -moz-transform: rotate(135deg);
    }
    45% {
      -moz-transform: rotate(-10deg);
    }
    75% {
      -moz-transform: rotate(5deg);
    }
    100% {
      top: 0;

      -moz-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);
    }
  }
  @-webkit-keyframes bottombar-x {
    0% {
      bottom: 0;

      -webkit-transform: rotate(0deg);
    }
    45% {
      bottom: 6px;

      -webkit-transform: rotate(-145deg);
    }
    75% {
      -webkit-transform: rotate(-130deg);
    }
    100% {
      -webkit-transform: rotate(-135deg);
    }
  }
  @-moz-keyframes bottombar-x {
    0% {
      bottom: 0;

      -moz-transform: rotate(0deg);
    }
    45% {
      bottom: 6px;

      -moz-transform: rotate(-145deg);
    }
    75% {
      -moz-transform: rotate(-130deg);
    }
    100% {
      -moz-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);
    }
  }
  @-webkit-keyframes bottombar-back {
    0% {
      bottom: 6px;

      -webkit-transform: rotate(-135deg);
    }
    45% {
      -webkit-transform: rotate(10deg);
    }
    75% {
      -webkit-transform: rotate(-5deg);
    }
    100% {
      bottom: 0;

      -webkit-transform: rotate(0);
    }
  }
  @-moz-keyframes bottombar-back {
    0% {
      bottom: 6px;

      -moz-transform: rotate(-135deg);
    }
    45% {
      -moz-transform: rotate(10deg);
    }
    75% {
      -moz-transform: rotate(-5deg);
    }
    100% {
      bottom: 0;

      -moz-transform: rotate(0);
    }
  }
}

@mixin nc-rotate($degrees, $rotation) {
  -webkit-transform: rotate($degrees);
     -moz-transform: rotate($degrees);
      -ms-transform: rotate($degrees);
       -o-transform: rotate($degrees);
          transform: rotate($degrees);

  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
}

@mixin nc-flip($horiz, $vert, $rotation) {
  -webkit-transform: scale($horiz, $vert);
     -moz-transform: scale($horiz, $vert);
      -ms-transform: scale($horiz, $vert);
       -o-transform: scale($horiz, $vert);
          transform: scale($horiz, $vert);

  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
}