// @docs

// `global` holds boilerplate code for the project. It includes
// standard styles such as resets and typographic rules, which are
// commonly used throughout your project.
//
// @note This should only be imported once in your `styles.scss` file.
//
// @usage
// ```scss
// @use '@daffodil/design/scss/global';
// ```

@use 'typography' as t;
@use '@angular/cdk/overlay-prebuilt';
@use '@angular/cdk/a11y-prebuilt';
@use 'modern-normalize/modern-normalize';
@forward './theming/theme-css-variables';

body,
html {
	font-family: t.$font-family-base;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	::-webkit-scrollbar-track {
		background: rgba(var(--daff-theme-rgb), 0);
		// stylelint-disable-next-line daffodil/no-direct-cursor-pointer
		cursor: pointer;
	}
	::-webkit-scrollbar {
		width: 0.375rem;
		height: 0.375rem;
	}
	::-webkit-scrollbar-thumb {
		border-radius: 0.5rem;
		transition: background-color 300ms ease;
		background-color: rgba(var(--daff-theme-contrast-rgb), 0.1);
	}
}

html {
	scroll-behavior: smooth;

	@media screen and (prefers-reduced-motion: reduce) {
		scroll-behavior: auto;
	}
}

a {
	color: currentColor;

	@media (hover: hover) {
		&:hover {
			text-decoration: none;
		}
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
}