@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
	.text-balance {
		text-wrap: balance;
	}
}

@layer base {
	:root {
		--background: 211 32% 99%;
		--foreground: 211 56% 3%;
		--muted: 211 6% 85%;
		--muted-foreground: 211 2% 30%;
		--popover: 211 32% 98%;
		--popover-foreground: 211 56% 2%;
		--card: 211 32% 98%;
		--card-foreground: 211 56% 2%;
		--border: 211 9% 89%;
		--input: 211 9% 89%;
		--primary: 211 100% 50%;
		--primary-foreground: 0 0% 100%;
		--secondary: 211 4% 92%;
		--secondary-foreground: 211 4% 32%;
		--accent: 211 4% 92%;
		--accent-foreground: 211 4% 32%;
		--destructive: 12 94% 28%;
		--destructive-foreground: 12 94% 88%;
		--ring: 211 100% 50%;
		--chart-1: 211 100% 50%;
		--chart-2: 211 4% 92%;
		--chart-3: 211 4% 92%;
		--chart-4: 211 4% 95%;
		--chart-5: 211 103% 50%;
		--radius: 0.5rem;
		--gradient-angle: 170deg;
		--gradient-bg: linear-gradient(
			var(--gradient-angle),
			#d8d9dd,
			#cccdd1 100%
		);
		--mesh-bg: "";
		--solid-bg: "";
	}

	.dark {
		--background: 211 60% 0%;
		--foreground: 211 26% 100%;
		--muted: 219.46 9.94% 23.09%;
		--muted-foreground: 0 2% 70%;
		--popover: 0 0% 1%;
		--popover-foreground: 0 0% 100%;
		--card: 0 0% 1%;
		--card-foreground: 0 0% 100%;
		--border: 211 9% 15%;
		--input: 211 9% 15%;
		--primary: 211 100% 50%;
		--primary-foreground: 0 0% 100%;
		--secondary: 0 0% 16%;
		--secondary-foreground: 0 0% 76%;
		--accent: 0 0% 16%;
		--accent-foreground: 0 0% 76%;
		--destructive: 12 94% 57%;
		--destructive-foreground: 0 0% 0%;
		--ring: 211 100% 50%;
		--chart-1: 211 100% 50%;
		--chart-2: 0 0% 16%;
		--chart-3: 0 0% 16%;
		--chart-4: 0 0% 19%;
		--chart-5: 211 103% 50%;
		--radius: 0.5rem;
		--gradient-angle: 170deg;
		--gradient-bg: linear-gradient(
			var(--gradient-angle),
			#1a202c,
			#2d3748 100%
		);
		--mesh-bg: "";
		--solid-bg: "";
	}
}

@layer base {
	* {
		overflow-anchor: none;
		@apply border-border;
		scroll-behavior: smooth;
	}

	body {
		@apply bg-background text-foreground;
	}
}

@layer components {
	.flex-center {
		@apply flex items-center justify-center;
	}
}

@layer utilities {
	.add-focus {
		@apply focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-4 focus:ring-offset-background;
	}

	.no-scrollbar::-webkit-scrollbar {
		display: none;
	}

	.no-scrollbar {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
}

#canvas-container img {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
}

#canvas-container > div > div > img {
	cursor: pointer;
}

#canvas-container > div > div > img:active {
	cursor: grabbing;
}

.moveable-control-box {
	--moveable-color: var(--accent-foreground) !important;
}

.circular-slider > div {
	transition: opacity 0s ease-in 0s !important;
	font-weight: 600;
}

.ProseMirror {
	outline: none !important;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: scale(0.9) translateY(10px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.animate-fade-in-1 {
	animation: fadeIn 0.8s ease-out 0.2s forwards;
}

.animate-fade-in-2 {
	animation: fadeIn 0.8s ease-out 0.4s forwards;
}

.animate-fade-in-3 {
	animation: fadeIn 0.8s ease-out 0.6s forwards;
}

.animate-fade-in-4 {
	animation: fadeIn 0.8s ease-out 0.8s forwards;
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

.animate-float {
	animation: float 3s ease-in-out infinite;
}

.animate-float-slow {
	animation: float 4s ease-in-out infinite;
}

.animate-float-fast {
	animation: float 2.5s ease-in-out infinite;
}

.animate-float-delayed {
	animation: float 3.5s ease-in-out 0.5s infinite;
}

.error-bg {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%3E%3Cpath%20fill%3D%22%230066cc%22%20d%3D%22M957%20450%20539%20900h857z%22%2F%3E%3Cpath%20fill%3D%22%230052a3%22%20d%3D%22m957%20450-84.1%20450H1396zM-60%20900l458-238%20418%20238z%22%2F%3E%3Cpath%20fill%3D%22%230052a3%22%20d%3D%22m337%20900%2061-238%20418%20238zm866-354%20349%20354H876z%22%2F%3E%3Cpath%20fill%3D%22%23003d7a%22%20d%3D%22m1203%20546%20349%20354h-390z%22%2F%3E%3Cpath%20fill%3D%22%230066cc%22%20d%3D%22m641%20695%20245%20205H367z%22%2F%3E%3Cpath%20fill%3D%22%230052a3%22%20d%3D%22m587%20900%2054-205%20245%20205zm1123%200-309-268-305%20268z%22%2F%3E%3Cpath%20fill%3D%22%23003d7a%22%20d%3D%22m1710%20900-309-268-36%20268z%22%2F%3E%3Cpath%20fill%3D%22%230066cc%22%20d%3D%22M1210%20900%20971%20687%20725%20900z%22%2F%3E%3Cpath%20fill%3D%22%230052a3%22%20d%3D%22M943%20900h267L971%20687z%22%2F%3E%3C%2Fsvg%3E");
}


.tiptap p.is-editor-empty:first-child::before {
	color: #ffffff70;
	content: attr(data-placeholder);
	float: left;
	height: 0;
	pointer-events: none;
}

.tiptap p.is-empty::before {
	color: #ffffff70;
	content: attr(data-placeholder);
	float: left;
	height: 0;
	pointer-events: none;
}

.prose-a {
	color: #007bff !important;
}

/* Thanks, TipTap.. */
#tippy-1 ::selection {
	background-color: #fff;
	color: #333;
}

#tippy-1 {
	position: relative;
	transform: translate(0, 50px) !important;
}

#tippy-2 {
	position: relative;
	transform: translate(0, 50px) !important;
}

#tippy-3 {
	position: relative;
	transform: translate(0, 50px) !important;
}

#tippy-4 {
	position: relative;
	transform: translate(0, 50px) !important;
}

#tippy-5 {
	position: relative;
	transform: translate(0, 50px) !important;
}

#tippy-6 {
	position: relative;
	transform: translate(0, 50px) !important;
}

#tippy-7 {
	position: relative;
	transform: translate(0, 50px) !important;
}

#tippy-8 {
	position: relative;
	transform: translate(0, 50px) !important;
}

::selection {
	background-color: #007bff;
}

.ProseMirror {
	outline: none !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-width: fit-content !important;
	min-height: fit-content !important;
	overflow: visible !important;
	white-space: nowrap !important;
	word-wrap: break-word !important;
}

.ProseMirror p {
	margin: 0 !important;
	padding: 0 !important;
	line-height: inherit !important;
	white-space: nowrap !important;
}

.text.apply-font {
	transform-origin: center center !important;
	display: inline-block !important;
	white-space: nowrap !important;
}

.selecto-area {
	outline: none !important;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
