$square-dimensions: 310px;
$square-padding: 10px;
$draggable-square-dimensions: $square-dimensions + ($square-padding * 2);

.bezierizer-canvas-container {
  height: $square-dimensions;
  position: relative;
  width: $square-dimensions;
}

  .bezierizer-canvas-container canvas {
    background: #555;
    height: $square-dimensions;
    width: $square-dimensions;
  }

  .bezierizer-canvas-container .bezierizer-handle-container {
    height: $draggable-square-dimensions;
    left: -$square-padding;
    position: absolute;
    top: -$square-padding;
    width: $draggable-square-dimensions;
  }

    .bezierizer-canvas-container .bezierizer-handle {
      border-radius: 12px;
      border: solid 4px #333;
      height: 24px;
      left: 0;
      padding: 0;
      position: absolute;
      top: 0;
      width: 24px;

      &,
      &:active {
        background: #999;
      }
    }

    .bezierizer-canvas-container .bezierizer-handle:focus {
      outline: none;
    }