@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,600;1,900&display=swap');
@import url('https://rsms.me/inter/inter.css');

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

html {
	font-family: 'Inter', sans-serif;
}

.testColorPicker {
	color: rgb(55, 66, 75);
	color: rgb(146, 235, 255);
}

@supports (font-variation-settings: normal) {
	html {
		font-family: 'Inter var', sans-serif;
	}
}

.app {
	@apply relative w-full h-screen overflow-hidden;
}

.home {
	@apply md:w-fit w-full md:h-full h-auto flex xl:justify-between justify-start items-start flex-col max-xl:gap-7 absolute z-10 xl:py-8 lg:py-8 xl:px-36 sm:px-20 px-10 sm:p-8 p-8 sm:mx-auto;
	@media screen and (max-width: 768px) {
		height: auto;
		width: 100%;
	}
}

.home-content {
	@apply flex-1 md:justify-center justify-start flex flex-col sm:gap-10 gap-[2.5vmin];
}

.head-text {
	@apply xl:text-[10rem] lg:text-[8rem] md:text-[6rem] sm:text-[5rem] text-[12vmin] leading-none font-black text-gray-700;
	br {
		display: block;
	}
	@media screen and (max-width: 768px) {
		br {
			display: none;
		}
		font-size: 12vmin;
	}
}

.head-subtext {
	@apply lg:max-w-md md:max-w-xs font-normal text-gray-500 lg:text-[1.5rem]  md:text-[1.4rem] sm:text-[1.2rem] text-[1.2rem];
	@media screen and (max-width: 768px) {
		max-width: 100%;
	}
}

.download-btn {
	@apply w-14 h-14 flex justify-center items-center rounded-full glassmorphism cursor-pointer outline-none;
}

.editortabs-container {
	@apply glassmorphism w-16 border-[2px] rounded-lg flex flex-col justify-center items-center ml-1 py-4 gap-4;
}

.filtertabs-container {
	@apply absolute z-10 bottom-5 right-0 left-0 w-full flex justify-center items-center flex-wrap gap-4;
	@media screen and (max-width: 430px) {
		bottom: 15%;
	}
}

.aipicker-container {
	@apply absolute left-full ml-3 glassmorphism p-3 w-[220px] h-[220px] rounded-md flex flex-col gap-4;
}

.aipicker-textarea {
	@apply w-full bg-transparent lg:text-[1.2rem] text-[100%] border border-gray-300 p-2 outline-none flex-1 placeholder-gray-600 resize-none overflow-y-auto rounded-md;
}

.filepicker-container {
	@apply absolute left-full ml-3 glassmorphism p-3 w-[220px] h-[220px] flex flex-col rounded-md;
}

.filepicker-label {
	@apply border border-gray-300 py-1.5 px-2 rounded-md shadow-sm text-white bg-slate-400 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 cursor-pointer w-fit;
}
.filepicker-text {
	@apply mt-2 py-1.5 px-2 rounded-md shadow-sm bg-slate-200 border-[#4b556333] border opacity-80 text-gray-600 lg:text-[1rem] text-[80%] truncate;
}

.tab-btn {
	@apply w-14 h-14 flex justify-center items-center cursor-pointer select-none;
}

.glassmorphism {
	background: rgba(255, 255, 255, 0.5);
	box-shadow: 0 2px 30px 0 rgba(31, 38, 135, 0.07);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.18);
}

input[type='file'] {
	z-index: -1;
	position: absolute;
	opacity: 0;
}

.sketch-picker {
	width: 198px !important;
	height: 208px !important;
	background: rgba(255, 255, 255, 0.5) !important;
	box-shadow: 0 2px 30px 0 rgba(31, 38, 135, 0.07) !important;
	backdrop-filter: blur(4px) !important;
	-webkit-backdrop-filter: blur(4px) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: 6px !important;
}

.sketch-picker > div:nth-child(3) {
	display: none !important;
}

.capture {
	height: 100%;
	width: 100%;
	max-width: 100%;
}

@media screen and (max-width: 430px) {
	.head-text {
		font-size: 12vmin;
	}
	.head-subtext {
		font-size: 4.4vmin;
		line-height: 1.3;
	}
	// .filtertabs-container.iOS {
	// 	bottom: 12%;
	// }
	// .capture {
	// 	height: 90% !important;
	// }
	// .capture.iOS {
	// 	height: 85% !important;
	// }
}

#loading,
#mainLoading {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 2rem;
	height: 2rem;
	border: 3px solid rgb(209, 215, 222);
	border-top: 3px solid rgb(55, 66, 75);
	border-radius: 100%;
	margin: auto;
	animation: spin 1s infinite linear;
	display: none;
}
#loading.display {
	display: block;
}

#mainLoading {
	display: block;
	left: 68%;
	width: 4rem;
	height: 4rem;
	border: 8px solid rgb(209, 215, 222);
	border-top: 8px solid rgb(55, 66, 75);
	@media screen and (max-width: 768px) {
		left: 50%;
		top: 65%;
		width: 3rem;
		height: 3rem;
		border: 4px solid rgb(209, 215, 222);
		border-top: 4px solid rgb(55, 66, 75);
	}
}
#mainLoading.disabled {
	display: none;
}
#mainLoading.customizer {
	left: 50%;
	transition: all 0.5s linear;
	@media screen and (max-width: 767px) {
		top: 50%;
	}
}

.aipicker-buttons.disabled {
	opacity: 0.2;
	pointer-events: none;
}
.aipicker-textarea.disabled {
	pointer-events: none;
}

@keyframes spin {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* .invertedColor p {
	-webkit-filter: invert(100%);
	filter: invert(100%);
} */
