@mixin arrow($position, $width) {
  @if ($position == 'top') {
    transform: rotate(-45deg);
    bottom: -$width * .5;
  } @else if ($position == 'bottom') {
    transform: rotate(135deg);
    top: -$width * .5;
  } @else if ($position == 'left') {
    transform: rotate(225deg);
    right: -$width * .5;
    top: 50%;
  } @else if ($position == 'right') {
    transform: rotate(45deg);
    left: -$width * .5;
    top: 50%;
  }
}

@mixin circle-transform-hide($position) {
  @if ($position == 'top') {
    transform: scale(0) translate(-50%, -50%);
  } @else if ($position == 'bottom') {
    transform: scale(0) translate(-50%, -50%);
  } @else if ($position == 'left') {
    transform: scale(0) translate(-50%, -33%);
  } @else if ($position == 'right') {
    transform: scale(0) translate(-50%, -33%);
  }
}

@mixin ember-attacher-hide-transform($position, $animation) {
  @if ($animation == 'perspective') {
    @if ($position == 'top') {
      transform: translateY(0) rotateX(90deg);
    } @else if ($position == 'bottom') {
      transform: translateY(0) rotateX(-90deg);
    } @else if ($position == 'left') {
      transform: translateX(0) rotateY(-90deg);
    } @else if ($position == 'right') {
      transform: translateX(0) rotateY(90deg);
    }
  } @else if ($animation == 'shift') {
    @if ($position == 'top') {
      transform: translateY(0);
    } @else if ($position == 'bottom') {
      transform: translateY(0);
    } @else if ($position == 'left') {
      transform: translateX(0);
    } @else if ($position == 'right') {
      transform: translateX(0);
    }
  } @else if ($animation == 'scale') {
    @if ($position == 'top') {
      transform: translateY(0) scale(0);
    } @else if ($position == 'bottom') {
      transform: translateY(0) scale(0);
    } @else if ($position == 'left') {
      transform: translateX(0) scale(0);
    } @else if ($position == 'right') {
      transform: translateX(0) scale(0);
    }
  } @else if ($animation == 'none') {
    @if ($position == 'top') {
      transform: translateY(-10px);
    } @else if ($position == 'bottom') {
      transform: translateY(10px);
    } @else if ($position == 'left') {
      transform: translateX(-10px);
    } @else if ($position == 'right') {
      transform: translateX(10px);
    }
  }
}

@mixin ember-attacher-show-transform($position, $animation) {
  @if ($animation == 'perspective') {
    @if ($position == 'top') {
      transform: translateY(-10px) rotateX(0);
    } @else if ($position == 'bottom') {
      transform: translateY(10px) rotateX(0);
    } @else if ($position == 'left') {
      transform: translateX(-10px) rotateY(0);
    } @else if ($position == 'right') {
      transform: translateX(10px) rotateY(0);
    }
  } @else if ($animation == 'fade') {
    @if ($position == 'top') {
      transform: translateY(-10px);
    } @else if ($position == 'bottom') {
      transform: translateY(10px);
    } @else if ($position == 'left') {
      transform: translateX(-10px);
    } @else if ($position == 'right') {
      transform: translateX(10px);
    }
  } @else if ($animation == 'scale') {
    @if ($position == 'top') {
      transform: translateY(-10px) scale(1);
    } @else if ($position == 'bottom') {
      transform: translateY(10px) scale(1);
    } @else if ($position == 'left') {
      transform: translateX(-10px) scale(1);
    } @else if ($position == 'right') {
      transform: translateX(10px) scale(1);
    }
  }
}