/* Stylesheet: core.css */

@layer base {
	/* === Body Styles === */

	body {
		@apply bg-surface-50-900-token;
	}

	/* === Selection === */

	::selection {
		@apply bg-primary-500/30;
	}

	/* === Focus === */

	/* Outline (do not change) */
	/* http://www.outlinenone.com/ */

	/* Mobile tap highlight */
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
	html {
		-webkit-tap-highlight-color: rgba(128, 128, 128, 0.5);
	}

	/* === Scrollbars === */

	::-webkit-scrollbar {
		@apply w-2;
		@apply h-2;
	}
	::-webkit-scrollbar-track {
		@apply !bg-surface-50-900-token px-[1px];
	}
	::-webkit-scrollbar-thumb {
		@apply rounded-token bg-surface-400-500-token;
	}

	/* Firefox */
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
	html {
		scrollbar-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.05);
	}
	html.dark {
		scrollbar-color: rgba(255, 255, 255, 0.1) rgba(0, 0, 0, 0.05);
	}

	/* Hide Scrollbars */
	.hide-scrollbar::-webkit-scrollbar {
		display: none;
	}
	.hide-scrollbar {
		-ms-overflow-style: none; /* IE/Edge */
		scrollbar-width: none; /* Firefox */
	}

	/* === Horizontal Rules === */

	hr:not(.divider) {
		@apply block border-t border-solid border-surface-300-600-token;
	}
	.divider-vertical {
		@apply inline-block border-l border-solid border-surface-300-600-token min-h-[10px] mx-auto;
	}
}