.canvas-composition-selection-ui {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

.canvas-composition-marquee,
.canvas-composition-selection-box {
  position: absolute;
  border: 1px dashed var(--primary);
  border-radius: var(--rect-radius);
  pointer-events: none;
}

.canvas-composition-selection-toolbar {
  position: absolute;
  height: 40px;
  min-height: 0;
  box-sizing: border-box;
  padding: 3px 4px 3px 12px;
  gap: 4px;
  border: 1px solid #e8edf5;
  border-radius: var(--rect-radius);
  background: rgba(255, 255, 255, 0.98);
  color: #344054;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(37, 78, 101, 0.08);
  pointer-events: auto;
  transform: translateX(-50%) scale(var(--canvas-ui-scale, 1));
  transform-origin: top center;
}

.canvas-composition-selection-count {
  color: #667085;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
}

.canvas-composition-selection-toolbar .canvas-composition-selection-button {
  height: 32px;
  min-height: 32px;
  min-width: 72px;
  border-radius: var(--rect-radius);
  padding: 0 12px;
  gap: 4px;
  background: linear-gradient(90deg, #00afe9 0%, #5cc8f4 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  box-shadow: 0 4px 12px rgba(0, 175, 233, 0.18);
}

.canvas-composition-selection-toolbar .canvas-composition-selection-button:hover {
  color: #fff;
  background: linear-gradient(90deg, #00a7df 0%, #4fc2f0 100%);
}

.canvas-composition-selection-toolbar .canvas-composition-selection-button:active {
  transform: translateY(1px);
}

.canvas-composition-selection-toolbar .canvas-composition-selection-button:focus-visible {
  box-shadow:
    0 0 0 2px rgba(0, 175, 233, 0.18),
    0 4px 12px rgba(0, 175, 233, 0.18);
}

.canvas-composition-selection-toolbar .canvas-composition-selection-button:disabled {
  background: #d0d5dd;
  box-shadow: none;
  color: #fff;
  cursor: not-allowed;
  transform: none;
}

.canvas-composition-selection-toolbar .canvas-composition-selection-button svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}

.canvas-image-frame.is-multi-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--primary);
  border-radius: var(--rect-radius);
  pointer-events: none;
}

.canvas-image-frame.is-multi-selected {
  cursor: grab;
}

.canvas-image-frame.is-multi-selected.is-group-moving {
  cursor: grabbing;
}

.canvas-content .canvas-image-frame.is-multi-selected .canvas-image-hover-actions {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.canvas-board[data-active-canvas-mode="reverse"]
  .canvas-composition-selection-toolbar {
  display: none;
}