.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;
  .info {
    position: absolute;
    bottom: var(--ui-padding);
    left: var(--ui-padding);
    font-size: 0.75rem;
  }
  .xp-editor-btn-group {
    position: absolute;
    top: var(--ui-padding);
    left: var(--ui-padding);
  }
  &: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,
  .nw,
  .se,
  .sw,
  .n,
  .s,
  .w,
  .e {
    position: absolute;
    border: 1px solid var(--handle-border-color);
    width: var(--handle-size);
    height: var(--handle-size);
    display: none;
  }
  .ne,
  .n,
  .e {
    left: calc(-1 * (var(--handle-size) / 2));
    top: calc(-1 * (var(--handle-size) / 2));
  }
  .nw,
  .w {
    right: calc(-1 * (var(--handle-size) / 2));
    top: calc(-1 * (var(--handle-size) / 2));
  }
  .se,
  .s {
    left: calc(-1 * (var(--handle-size) / 2));
    bottom: calc(-1 * (var(--handle-size) / 2));
  }
  .sw {
    right: calc(-1 * (var(--handle-size) / 2));
    bottom: calc(-1 * (var(--handle-size) / 2));
  }
  .n,
  .s {
    left: 50%;
    transform: translateX(-50%);
  }
  .e,
  .w {
    top: 50%;
    transform: translateY(-50%);
  }
}

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

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