// Questo file fa parte di MyTown.
// MyTown è software libero: puoi ridistribuirlo e/o modificarlo secondo
// i termini della GNU Affero General Public License come pubblicata dalla
// Free Software Foundation, versione 3.
// Distribuito senza ALCUNA GARANZIA; vedi la GNU AGPL v3 per i dettagli.
// Copyright (C) Kondor Consulting & Services S.r.l.
// SPDX-License-Identifier: AGPL-3.0-or-later

.drawing-board-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 20px;
	padding-left: 0px;
	box-sizing: border-box;
}

.drawing-board-controls {
	display: flex;
	margin-bottom: 12px;
	width: 100%;
	max-width: 600px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.drawing-board-controls > div {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

/* gruppi di pulsanti della barra */
.drawing-board-controls > div > div {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* pulsanti barra strumenti: quadrati, compatti e coerenti */
.drawing-board-controls ion-button {
	--background: #fff;
	--background-hover: var(--ion-color-primary-tint, #eef4ff);
	--background-activated: var(--ion-color-primary-tint, #eef4ff);
	--background-focused: var(--ion-color-primary-tint, #eef4ff);
	--color: var(--ion-color-primary);
	--border-radius: 11px;
	--border-width: 1px;
	--border-color: rgba(17, 24, 39, 0.12);
	--box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
	--padding-start: 0;
	--padding-end: 0;
	--ripple-color: var(--ion-color-primary);
	width: 40px;
	height: 40px;
	min-height: 40px;
	margin: 0;
}

.drawing-board-controls ion-button icon {
	font-size: 16px;
	line-height: 1;
}

/* stato attivo (es. strumento mano) */
.drawing-board-controls ion-button.active {
	--background: var(--ion-color-primary);
	--background-hover: var(--ion-color-primary);
	--background-activated: var(--ion-color-primary-shade);
	--color: #fff;
	--border-color: var(--ion-color-primary);
}

/* azione distruttiva (elimina pagina) */
.drawing-board-controls ion-button.tb-danger {
	--color: var(--ion-color-danger);
	--background-hover: var(--ion-color-danger-tint, #ffe9e9);
	--border-color: rgba(220, 53, 69, 0.28);
}

/* pulsanti disabilitati (navigazione pagine) */
.drawing-board-controls ion-button.button-disabled {
	--opacity: 0.4;
}

/* navigazione pagine: riga dedicata, centrata, con indicatore tra le frecce */
.drawing-board-controls .page-nav {
	flex: 1 1 100%;
	justify-content: center;
}

/* indicatore pagina corrente */
.drawing-board-controls span {
	font-size: 12px;
	font-weight: 700;
	color: var(--ion-color-dark);
	background: #f1f4f9;
	border-radius: 999px;
	padding: 5px 12px;
	white-space: nowrap;
}

.top-button {
	padding: 5px;
	border: 1px solid grey;
	margin: 4px;
	cursor: pointer;
	background: #f0f0f0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.top-button > i {
	font-size: 14px;
}

.top-button:hover {
	background: #dbdada;
}

.board-area {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.color-btn {
	width: 35px;
	height: 35px;
	border: none;
	margin: 5px;
	cursor: pointer;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.288);
	border-radius: 4px;
}

.color-btn.active {
	background-color: #e0e0e0;
	border: 1px solid rgba(0, 0, 0, 0.493);
}

.color-btn.brush > svg {
	transform: scale(1.35) translateY(45%) rotateZ(135deg);
}

.canvas-container {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}

.canvas {
	border-radius: var(--kcs-inputtext-border-radius);
	border: 1px solid var(--kcs-inputtext-border-color);
	box-shadow: var(--kcs-inputtext-shadow);
}

canvas.pencil_pointer {
	display: block;
	cursor: url('../../../assets/images/brush-black.svg'), auto;
}

canvas.eraser_2 {
	display: block;
	cursor: url('../../../assets/images/eraser-2px.svg') 1 1, auto;
}

canvas.eraser_5 {
	display: block;
	cursor: url('../../../assets/images/eraser-5px.svg') 2 2, auto;
}

canvas.eraser_10 {
	display: block;
	cursor: url('../../../assets/images/eraser-10px.svg') 5 5, auto;
}

canvas.eraser_20 {
	display: block;
	cursor: url('../../../assets/images/eraser-20px.svg') 10 10, auto;
}

canvas.hand_pointer {
	cursor: grab;
}

canvas.hand_pointer:active {
	cursor: grabbing;
}

.reset-transform-btn {
	padding: 5px 10px;
	margin: 5px;
	cursor: pointer;
}

.drawing-board-footer {
	width: 100%;
	max-width: 600px;

	display: flex;
	align-items: center;
	justify-content: flex-end;

	gap: 10px;
}

.size-slider p-slider {
	width: 150px;
}

.size-pencil-preview {
	background-color: #dbdada;
	border-radius: 50%;
	margin-right: 3px;

	width: 24px;
	height: 24px;

	display: flex;
	justify-content: center;
	align-items: center;
}

.size-pencil-preview > div {
	margin: 0;
	padding: 0;
	background-color: #5f5f5f;
	border-radius: 50%;
}

.color-pencil-preview {
	border-radius: 5px;
	outline: 2px solid #4e4e4e;

	width: 24px;
	height: 24px;

	display: flex;
	justify-content: center;
	align-items: center;
}

::ng-deep .canvas-container {
	margin: 0 auto !important;
	max-width: 100% !important;
}

::ng-deep .upper-canvas {
	touch-action: none !important;
}
