<template>
	<div class="text-light-100 dark:text-dark-100 flex bg-light-0 dark:bg-dark-0 h-screen overflow-hidden">
		<NuxtRouteAnnouncer/>
		<NuxtLoadingIndicator />
		<TooltipProvider>
			<NuxtLayout>
				<div class="xl:px-12 xl:py-8 lg:px-8 lg:py-6 px-6 py-3 flex flex-1 justify-center overflow-auto max-h-full relative">
					<NuxtPage />
				</div>
			</NuxtLayout>
			<Toaster v-model="list" />
		</TooltipProvider>
	</div>
</template>

<script setup lang="ts">
provideToaster();

const { list } = useToast();
</script>

<style>
::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}
 
::-webkit-scrollbar-thumb {
	@apply bg-light-40;
	@apply dark:bg-dark-40;
	@apply rounded-md;
	@apply border-2;
	@apply border-solid;
	@apply border-transparent;
	@apply bg-clip-padding;
}
 
::-webkit-scrollbar-thumb:hover {
	@apply bg-light-50;
	@apply dark:bg-dark-50;
}

::-webkit-scrollbar-corner {
	@apply bg-transparent;
}
</style>