// center vertically and/or horizontally an absolute positioned element
@mixin center($xy:xy) {
  @if $xy==xy {
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    transform: translateX(-50%) translateY(-50%);
  }
  @else if $xy==x {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  @else if $xy==y {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}

@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
  @if $inset {
    box-shadow: inset $top $left $blur $color;
  }
  @else {
    box-shadow: $top $left $blur $color;
  }
}

// define different reveal animations
@mixin reveal($animation, $value) {
  @include keyframes($animation) {
    0% {
      opacity: 1;
      transform: translateY($value);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
}