/**
 * Minty Media Signature Field - frontend.
 *
 * @package MintyMedia\ElementorFormsAddon
 * @version 1.0.0
 */

.mms-signature,
.mms-signature--preview {
	--mms-canvas-bg: #ffffff;
	--mms-canvas-border: rgba(0, 0, 0, 0.2);
	--mms-clear-color: inherit;
}

.mms-signature {
	width: 100%;
}

.mms-signature .mms-canvas {
	display: block;
	width: 100%;
	height: 180px;
	background: var(--mms-canvas-bg);
	border: 1px solid var(--mms-canvas-border);
	border-radius: 3px;
	cursor: crosshair;

	/* Needed so drawing with a finger does not scroll the page. */
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

.mms-signature .mms-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-top: 4px;
}

.mms-signature .mms-clear {
	padding: 0;
	font-size: 0.85em;
	line-height: 1.4;
	color: var(--mms-clear-color);
	background: none;
	border: 0;
	opacity: 0.7;
	cursor: pointer;
	text-decoration: underline;
}

.mms-signature .mms-clear:hover,
.mms-signature .mms-clear:focus {
	opacity: 1;
}

.mms-signature .mms-message {
	display: block;
	position: relative;
	width: 100%;
	margin-top: 5px;
}

.mms-signature .mms-message[hidden] {
	display: none !important;
}

/* Placeholder inside the Elementor editor. */
.mms-signature--preview {
	background: var(--mms-canvas-bg);
	border: 1px dashed var(--mms-canvas-border);
	border-radius: 3px;
}