//@import "_aileron"
@import "config"
@import "colors"

*
*::before
*::after
	box-sizing border-box

	scrollbar-width 16px
	// scrollbar-color nativeRGB(var(--theme-50)) nativeRGB(var(--theme-50))
	// @media (prefers-color-scheme dark)
	// 	scrollbar-color nativeRGB(var(--gray-800)) nativeRGB(var(--gray-800))
	font-family ui-system, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif

// Georgia,Cambria,"Times New Roman",Times,serif

code, pre
	font-family ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;

html
body
body > div[id="__next"]
	margin 0
	min-height 100vh
	background nativeRGB(var(--gray-50))

	@media (prefers-color-scheme dark)
		background nativeRGB(var(--gray-900))

a
	color inherit
	text-decoration none

/* width */
::-webkit-scrollbar
	width 16px

/* Track */
::-webkit-scrollbar-corner
::-webkit-scrollbar-track
	background nativeRGB(var(--theme-50))
	transition $transition
	@media (prefers-color-scheme dark)
		background nativeRGB(var(--gray-800))

// ::-webkit-scrollbar-thumb
// 	background: darken(nativeRGB(var(--theme-50)), 16%)
// 	transition $transition
// 	@media (prefers-color-scheme dark)
// 		background lighten(nativeRGB(var(--gray-800)), 16%)
// 	&:hover
// 		background: darken(nativeRGB(var(--theme-50)), 24%)
// 		@media (prefers-color-scheme dark)
// 			background: lighten(nativeRGB(var(--gray-800)), 24%)

// 		&:active
// 			background: darken(nativeRGB(var(--theme-50)), 32%)
// 			@media (prefers-color-scheme dark)
// 				background: lighten(nativeRGB(var(--gray-800)), 32%)