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

// global variables
$background: #e7eaeb;
$text-secondary: #484848;

// debug mode
// * {
// 	outline: 3px solid rgb(0, 64, 255);
// 	background: #ff646472;
// }

@mixin bg-gradient-light {
	background: linear-gradient(
		227deg,
		rgba(248, 217, 182, 0.527) 0%,
		rgba(188, 199, 229, 0.295) 36%,
		rgba(231, 234, 235, 1) 79%,
		rgba(218, 187, 152, 0.253) 100%
	);
}

:root,
html,
body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-rendering: optimizeSpeed;
	background-color: $background;

	-ms-overflow-style: none;
	-moz-scrollbar-width: none;
	scrollbar-width: none;
}

html {
	@include bg-gradient-light();
	font-size: 100%;
}

body {
	@include bg-gradient-light();
	font-family: Arial, Helvetica, sans-serif;
	height: 100%;
	width: 100%;
}

// Scrollbar

::-webkit-scrollbar {
	height: 0px;
	width: 0px;
}

* {
	-ms-overflow-style: none;
	-moz-scrollbar-width: none;
	scrollbar-width: none;
}

// ::-webkit-scrollbar-track {
// 	background: $background;
// }

// ::-webkit-scrollbar-thumb {
// 	background: $text-secondary;
// }

// ::-webkit-scrollbar-thumb:hover {
// 	background: #555;
// }

// Input autofill
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-background-clip: text;
	-webkit-text-fill-color: $text-secondary;
	transition: background-color 0s ease-in-out 0s; //? fallback for older chromium browsers
	box-shadow: inset 0 0 20px 20px #0000;
}

// Global classes

.rounded-base {
	@apply rounded-[3.125rem];
}

.rounded-r-base {
	@apply rounded-r-[3.125rem];
}

.rounded-l-base {
	@apply rounded-l-[3.125rem];
}

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

.col-center {
	@apply flex justify-center items-center flex-col;
}

.col {
	@apply flex flex-col;
}

.full {
	@apply w-full h-full;
}

.screen {
	@apply w-screen h-screen;
}

.gap-sm {
	@apply gap-[1.375rem];
}

.gap-md {
	@apply gap-[2.625rem];
}

.gap-xl {
	@apply gap-[7.5rem];
}

.px-md {
	@apply px-[2.625rem];
}

.bg-default {
	@apply bg-[#f1efeb];
}

.main-container {
	@apply w-full flex justify-center items-center gap-3 px-[5%];
}
