@mixin transition($timing) {
  -moz-transition: $timing;
  -webkit-transition: $timing;
  -o-transition: $timing;
  -ms-transition: $timing;
  transition: $timing;
}
@mixin appear($timing) {
  animation: appear $timing forwards;
}
@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@mixin gradient-edge {
  &.left-top-corner {
    mask-image: -webkit-gradient(
      linear,
      right bottom,
      left top,
      color-stop(0, rgba(0, 0, 0, 1)),
      color-stop(0.5, rgba(0, 0, 0, 0))
    );
    -webkit-mask-image: -webkit-gradient(
      linear,
      right bottom,
      left top,
      color-stop(0, rgba(0, 0, 0, 1)),
      color-stop(0.5, rgba(0, 0, 0, 0))
    );
  }
  &.right-top-corner {
    mask-image: -webkit-gradient(
      linear,
      left bottom,
      right top,
      color-stop(0, rgba(0, 0, 0, 1)),
      color-stop(0.5, rgba(0, 0, 0, 0))
    );
    -webkit-mask-image: -webkit-gradient(
      linear,
      left bottom,
      right top,
      color-stop(0, rgba(0, 0, 0, 1)),
      color-stop(0.5, rgba(0, 0, 0, 0))
    );
  }
  &.left-bottom-corner {
    mask-image: -webkit-gradient(
      linear,
      right top,
      left bottom,
      color-stop(0, rgba(0, 0, 0, 1)),
      color-stop(0.5, rgba(0, 0, 0, 0))
    );
    -webkit-mask-image: -webkit-gradient(
      linear,
      right top,
      left bottom,
      color-stop(0, rgba(0, 0, 0, 1)),
      color-stop(0.5, rgba(0, 0, 0, 0))
    );
  }
  &.right-bottom-corner {
    mask-image: -webkit-gradient(
      linear,
      left top,
      right bottom,
      color-stop(0, rgba(0, 0, 0, 1)),
      color-stop(0.5, rgba(0, 0, 0, 0))
    );
    -webkit-mask-image: -webkit-gradient(
      linear,
      left top,
      right bottom,
      color-stop(0, rgba(0, 0, 0, 1)),
      color-stop(0.5, rgba(0, 0, 0, 0))
    );
  }

  &.left {
    mask-image: -webkit-gradient(
      linear,
      right top,
      left top,
      from(rgba(0, 0, 0, 1)),
      to(rgba(0, 0, 0, 0))
    );
    -webkit-mask-image: -webkit-gradient(
      linear,
      right top,
      left top,
      from(rgba(0, 0, 0, 1)),
      to(rgba(0, 0, 0, 0))
    );
  }
  &.right {
    mask-image: -webkit-gradient(
      linear,
      left top,
      right top,
      from(rgba(0, 0, 0, 1)),
      to(rgba(0, 0, 0, 0))
    );
    -webkit-mask-image: -webkit-gradient(
      linear,
      left top,
      right top,
      from(rgba(0, 0, 0, 1)),
      to(rgba(0, 0, 0, 0))
    );
  }
  &.top {
    mask-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      from(rgba(0, 0, 0, 1)),
      to(rgba(0, 0, 0, 0))
    );
    -webkit-mask-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      from(rgba(0, 0, 0, 1)),
      to(rgba(0, 0, 0, 0))
    );
  }
  &.bottom {
    mask-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(rgba(0, 0, 0, 1)),
      to(rgba(0, 0, 0, 0))
    );
    -webkit-mask-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(rgba(0, 0, 0, 1)),
      to(rgba(0, 0, 0, 0))
    );
  }
}

// Pixelart sharpness (no interpolation)
// https://css-tricks.com/keep-pixelated-images-pixelated-as-they-scale/
@mixin pixelart {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
