/************************
    Drawing canvas (DbqDrawingCanvasControl)
*************************/

// The drawing surface stays white with dark default ink in the light and the dark theme.
// The stored PNG has a transparent background, the surface color is only the backdrop.
// The toolbar and the expanded overlay follow the Document Builder theme.
$drawing-canvas-surface-background: #ffffff;
$drawing-canvas-border-color: #e5e7ec;
$drawing-canvas-neutral: rgba(128, 128, 128, 0.35);
$drawing-canvas-hover: rgba(128, 128, 128, 0.15);

.dbqdb-canvas-container {
	position: relative;
	flex: 1 1 auto; // The container is a flex item of .dbqmd-label, make it use the full width
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	white-space: normal;

	.dbq-drawing-canvas {
		display: block;
		width: 100%;
		height: 300px; // The display height of the inline canvas. DbqDrawingCanvasControl measures it, keep the server markup (height='300') in sync.
		box-sizing: border-box;
		background: $drawing-canvas-surface-background;
		border: 2px dashed $drawing-canvas-border-color;
		border-radius: 0 0 10px 10px;
		touch-action: none; // Pointer Events: draw instead of scrolling on touch devices
		cursor: crosshair;
		user-select: none;
		-webkit-user-select: none;

		&.error {
			background: $modal-error-background;
			border: $field-border-width solid $modal-error-border;
		}
	}

	// The server-rendered clear button. DbqDrawingCanvasControl moves it into the toolbar, this is the look without the control.
	.dbqdb-canvas-clear-button {
		position: absolute;
		bottom: 10px;
		right: 4px;
		background: #eee;
		border: none;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		padding: 5px;
		outline: 0;

		&:hover {
			background: $color-primary;

			svg {
				fill: #fff;
			}
		}

		svg {
			width: 20px;
			height: 20px;
			fill: #000;
		}
	}
}

// Make room for the static material design label (absolutely positioned at the top) above the toolbar
// Same background as the material design inputs
.dbqmd-label > .dbqdb-canvas-container:has(.dbq-drawing-canvas) {
	padding: 28px 15px 15px 15px;

	&:has(.dbqdcc-resize-handle) {
		padding-bottom: 2px; // The resize handle provides the space below the canvas
	}

	background: $material-design-default-background-color;
}

.dbqmd-label.dbqmd-empty-label > .dbqdb-canvas-container:has(.dbq-drawing-canvas) {
	padding-top: 15px;
}

/* Resize handle (below the inline canvas) */
.dbqdcc-resize-handle {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 16px;
	cursor: ns-resize;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;

	span {
		display: block;
		width: 40px;
		height: 4px;
		border-radius: 2px;
		background: $drawing-canvas-neutral;
		transition: background-color 0.15s ease-in-out;
	}

	&:hover span {
		background: $color-primary;
	}
}

.dbqdcc-resizing {
	cursor: ns-resize;

	.dbqdcc-resize-handle span {
		background: $color-primary;
	}
}

/* Toolbar (inline and expanded) */
.dbqdcc-toolbar {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 4px;
	padding: 4px 6px;
	border: 2px dashed $drawing-canvas-border-color;
	border-bottom: none;
	border-radius: 10px 10px 0 0;
	box-sizing: border-box;

	// Anchor the popover to its button, including when the toolbar wraps
	.dbqdcc-shapes-container {
		position: relative;
		display: inline-flex;
	}

	.dbqdcc-shapes-popover {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10;
		display: none;
		flex-direction: row;
		gap: 4px;
		padding: 4px;
		background: color(default-background);
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

		&.dbqdcc-open {
			display: flex;
		}

		.dbqdcc-tool-button {
			flex-shrink: 0;
		}
	}

	.dbqdcc-group {
		display: inline-flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px;
	}

	.dbqdcc-separator {
		width: 1px;
		height: 20px;
		margin: 0 2px;
		background: $drawing-canvas-neutral;
	}

	.dbqdcc-spacer {
		flex: 1 1 auto;
	}

	.dbqdcc-tool-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		margin: 0;
		padding: 0;
		border: none;
		border-radius: 6px;
		background: transparent;
		outline: 0;
		cursor: pointer;

		svg {
			width: 20px;
			height: 20px;
			fill: color(text-color-default);
		}

		&:hover {
			background: $drawing-canvas-hover;
		}

		&.dbqdcc-active {
			background: $color-primary;

			svg {
				fill: #fff;
			}
		}

		&:disabled {
			opacity: 0.35;
			cursor: default;
			background: transparent;
		}
	}

	// Zoom percentage (click = fit to screen)
	.dbqdcc-zoom-reset {
		width: auto;
		min-width: 48px;
		padding: 0 4px;
		font-size: 12px;
		font-weight: 500;
		color: color(text-color-default);
	}

	.dbqdcc-confirm-button {
		@include button-round-confirm;
	}

	.dbqdcc-cancel-button {
		@include button-round-cancel;
	}

	.dbqdcc-size {
		width: 28px;

		span {
			display: block;
			border-radius: 50%;
			background: color(text-color-default);
		}

		&.dbqdcc-active {
			background: transparent;
			box-shadow: inset 0 0 0 2px $color-primary;
		}
	}

	.dbqdcc-swatch {
		position: relative;
		display: inline-block;
		width: 22px;
		height: 22px;
		margin: 0;
		padding: 0;
		border: 2px solid $drawing-canvas-neutral;
		border-radius: 50%;
		box-sizing: border-box;
		outline: 0;
		cursor: pointer;

		&.dbqdcc-active {
			box-shadow: 0 0 0 2px color(default-background), 0 0 0 4px $color-primary;
		}
	}

	.dbqdcc-swatch-custom {
		overflow: hidden;
		background: conic-gradient(#f44336, #ffeb3b, #4caf50, #00bcd4, #3f51b5, #e91e63, #f44336);

		input[type=color] {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			border: 0;
			opacity: 0;
			cursor: pointer;
		}
	}
}

/* Expanded mode */
body.dbqdcc-has-overlay {
	overflow: hidden;
}

.dbqdcc-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	background: color(default-background);

	.dbqdcc-toolbar {
		padding: 8px 12px;
		padding-top: calc(8px + env(safe-area-inset-top));
		border: none;
		border-bottom: 1px solid $drawing-canvas-neutral;
		border-radius: 0;
	}

	.dbqdcc-stage {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		align-items: flex-start; // Top aligned, so resizing only moves the bottom edge
		justify-content: center;
		padding: 16px;
		padding-bottom: calc(16px + env(safe-area-inset-bottom));
		overflow: hidden;
		background: $drawing-canvas-hover;
	}

	// Pan cursors (pan tool, space bar, while panning)
	&.dbqdcc-tool-pan,
	&.dbqdcc-space-pan {
		.dbqdcc-expanded-canvas {
			cursor: grab;
		}
	}

	&.dbqdcc-panning .dbqdcc-expanded-canvas {
		cursor: grabbing;
	}

	// The canvas with its resize handle below it
	.dbqdcc-sheet {
		display: flex;
		flex-direction: column;
		flex: 0 0 auto;
	}

	.dbqdcc-expanded-canvas {
		display: block;
		background: $drawing-canvas-surface-background;
		border-radius: 4px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
		touch-action: none;
		cursor: crosshair;
		user-select: none;
		-webkit-user-select: none;
	}
}