image-editor {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  padding-bottom: 50px;

  .image-editor-canvas {
    width: 100%;
    position: relative;
    overflow: hidden;
  }


  image-selection {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 10;

    [draggable] {
      cursor: move;
    }

    .image-editor-selection-border-top,
    .image-editor-selection-border-bottom {
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        /* Source: src/scss/border-anim-h.gif */
        background-image: url('data:image/gif;base64,R0lGODlhBgABAKEAAP///wAAADY2Nv///yH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQACgD/ACwAAAAABgABAAACAxQuUgAh+QQBCgADACwAAAAABgABAAACA5SAUgAh+QQBCgADACwAAAAABgABAAACA5SBBQAh+QQBCgADACwAAAAABgABAAACA4QOUAAh+QQBCgADACwAAAAABgABAAACAwSEUAAh+QQBCgADACwAAAAABgABAAACA4SFBQA7');
        z-index: 1;
    }
    .image-editor-selection-border-top {
        top: 0;
    }
    .image-editor-selection-border-bottom {
        bottom: 0
    }
    .image-editor-selection-border-left,
    .image-editor-selection-border-right {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1px;
        /* Source: src/scss/border-anim-v.gif */
        background-image: url('data:image/gif;base64,R0lGODlhAQAGAKEAAP///wAAADY2Nv///yH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQACgD/ACwAAAAAAQAGAAACAxQuUgAh+QQBCgADACwAAAAAAQAGAAACA5SAUgAh+QQBCgADACwAAAAAAQAGAAACA5SBBQAh+QQBCgADACwAAAAAAQAGAAACA4QOUAAh+QQBCgADACwAAAAAAQAGAAACAwSEUAAh+QQBCgADACwAAAAAAQAGAAACA4SFBQA7');
        z-index: 1;
    }
    .image-editor-selection-border-left {
        left: 0;
    }
    .image-editor-selection-border-right {
        right: 0
    }

    .image-editor-overlay-top,
    .image-editor-overlay-left,
    .image-editor-overlay-right,
    .image-editor-overlay-bottom {
        position: absolute;
        background: rgba(0, 0, 0, 0.5);
    }
  }

  editor-panel {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;

    span {
      float: left;
      display: block;
      margin-right: 8px;
      height: 32px;
      width: 32px;
      cursor: pointer;
      /* Source: src/scss/image-edit-icons.png */
      background: #f1f1f2 0 0 no-repeat;
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAAAgCAIAAACEp+MCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjMxRjIwMTdDRTg3MTFFNThBNEU4MjU5Q0ZCM0IzOTUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjMxRjIwMThDRTg3MTFFNThBNEU4MjU5Q0ZCM0IzOTUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyMzFGMjAxNUNFODcxMUU1OEE0RTgyNTlDRkIzQjM5NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyMzFGMjAxNkNFODcxMUU1OEE0RTgyNTlDRkIzQjM5NSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PilyOo0AAAi6SURBVHja7JxfbFNV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');
      border: 1px solid #747678;
      border-radius: 4px;
    }
    .image-editor-rotate-cw {
        background-position: -32px 0;
    }
    .image-editor-rotate-acw {
        background-position: -64px 0;
    }
    .image-editor-flip-h {
        background-position: -96px 0;
    }
    .image-editor-flip-v {
        background-position: -128px 0;
    }
    .image-editor-undo {
        background-position: -160px 0;
    }
    .image-editor-redo {
        background-position: -192px 0;
    }
    .disabled {
        opacity: 0.5;
        filter: alpha(opacity=50);
        cursor: default;
    }
  }

  .resizable-handle {
    position: absolute;
    width: 6px;
    height: 6px;
    border: 1px solid #000;
    box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6), inset 1px 1px 0 rgba(255, 255, 255, 0.6);
  }
  .resizable-nw {
    cursor: nw-resize;
    left: 1px;
    top: 1px;
  }
  .resizable-ne {
    cursor: ne-resize;
    right: 1px;
    top: 1px;
  }
  .resizable-sw {
    bottom: 1px;
    cursor: sw-resize;
    left: 1px;
  }
  .resizable-se {
    bottom: 1px;
    cursor: se-resize;
    right: 1px;
  }
  .resizable-n {
    cursor: n-resize;
    left: 50%;
    margin-left: -3px;
    top: 1px;
  }
  .resizable-s {
    bottom: 1px;
    cursor: s-resize;
    left: 50%;
    margin-left: -3px;
  }
  .resizable-w {
    cursor: w-resize;
    left: 1px;
    margin-top: -3px;
    top: 50%;
  }
  .resizable-e {
    cursor: e-resize;
    margin-top: -3px;
    right: 1px;
    top: 50%;
  }
}