import { twJoin } from '@/utils'

export const sidebarWrapperStyles = twJoin({
	tw: 'group/sidebar-wrapper',
	display: 'flex min-h-svh w-full'
})

export const pageWrapperStyles = twJoin({
	position: 'relative',
	display: 'flex min-h-screen w-full flex-col px-6.5 pt-4',
	visual: 'bg-background',
	//
	dark: 'dark:bg-dark-background'
})

export const headerBackdropStyles = twJoin({
	position: 'fixed top-0 left-0',
	display: 'h-19.5 w-full',
	visual: 'bg-background/70 backdrop-blur-xs',
	dark: 'dark:bg-dark-background/80'
})

export const contentWrapperStyles = twJoin({
	position: 'relative',
	display: 'pt-6.5'
})
