.xp-editor {
  --handle-size: 8px;
  --handle-border-color: red;
  --ui-padding: 8px;
  padding: 4rem;
  background: #333;
  border-radius: 5px;
  overflow: hidden; }

.xp-editor-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; }

.xp-editor-canvas-wrapper {
  position: relative;
  margin: 0 auto; }

.xp-editor-resize-toolbar {
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  position: absolute;
  z-index: 100;
  bottom: var(--ui-padding);
  right: var(--ui-padding); }

.xp-editor-crop-area {
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.23);
  color: white;
  font-family: sans-serif;
  touch-action: none;
  z-index: 100;
  border: 1px solid var(--handle-border-color);
  position: relative;
  box-sizing: border-box; }
  .xp-editor-crop-area .info {
    position: absolute;
    bottom: var(--ui-padding);
    left: var(--ui-padding);
    font-size: 0.75rem; }
  .xp-editor-crop-area .xp-editor-btn-group {
    position: absolute;
    top: var(--ui-padding);
    left: var(--ui-padding); }
  .xp-editor-crop-area:hover {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); }

[data-crop-active="true"] .xp-editor-crop-area {
  opacity: 1;
  pointer-events: auto; }

[data-resize-active="true"] .xp-editor-resize-toolbar {
  opacity: 1;
  pointer-events: auto; }

.xp-editor-handles .ne,
.xp-editor-handles .nw,
.xp-editor-handles .se,
.xp-editor-handles .sw,
.xp-editor-handles .n,
.xp-editor-handles .s,
.xp-editor-handles .w,
.xp-editor-handles .e {
  position: absolute;
  border: 1px solid var(--handle-border-color);
  width: var(--handle-size);
  height: var(--handle-size);
  display: none; }

.xp-editor-handles .ne,
.xp-editor-handles .n,
.xp-editor-handles .e {
  left: calc(-1 * (var(--handle-size) / 2));
  top: calc(-1 * (var(--handle-size) / 2)); }

.xp-editor-handles .nw,
.xp-editor-handles .w {
  right: calc(-1 * (var(--handle-size) / 2));
  top: calc(-1 * (var(--handle-size) / 2)); }

.xp-editor-handles .se,
.xp-editor-handles .s {
  left: calc(-1 * (var(--handle-size) / 2));
  bottom: calc(-1 * (var(--handle-size) / 2)); }

.xp-editor-handles .sw {
  right: calc(-1 * (var(--handle-size) / 2));
  bottom: calc(-1 * (var(--handle-size) / 2)); }

.xp-editor-handles .n,
.xp-editor-handles .s {
  left: 50%;
  transform: translateX(-50%); }

.xp-editor-handles .e,
.xp-editor-handles .w {
  top: 50%;
  transform: translateY(-50%); }

.xp-editor-crop-area:hover .xp-editor-handles .ne,
.xp-editor-crop-area:hover .xp-editor-handles .nw,
.xp-editor-crop-area:hover .xp-editor-handles .se,
.xp-editor-crop-area:hover .xp-editor-handles .sw,
.xp-editor-crop-area:hover .xp-editor-handles .n,
.xp-editor-crop-area:hover .xp-editor-handles .s,
.xp-editor-crop-area:hover .xp-editor-handles .w,
.xp-editor-crop-area:hover .xp-editor-handles .e {
  display: block; }

.xp-editor-crop-area [data-cmd] {
  position: absolute;
  bottom: var(--ui-padding);
  right: var(--ui-padding); }