@import './vars';

html {
	--animation-speed: 0.2s;
	--animation-type: ease-in-out;

	--z-index-modal: 100;

	--clip-path: polygon(0% 0%, 75% 0%, 100% 100%, 25% 100%);

	background-color: $color-bg;
	color: $color-text;

	min-width: $min-w-supported;
}

/* Reset */
body {
	font-size: 16px;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
* {
	margin: 0;
	padding: 0;
}
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	font-family:
		-apple-system,
		BlinkMacSystemFont,
		avenir next,
		avenir,
		segoe ui,
		helvetica neue,
		helvetica,
		Cantarell,
		Ubuntu,
		roboto,
		noto,
		arial,
		sans-serif;
}
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}
button {
	background: none;
	border: none;
	cursor: pointer;
}
input,
button,
textarea,
select {
	font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

body {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

@media print {
	main code[class*='language-'],
	main pre[class*='language-'] {
		white-space: pre-wrap;
		word-wrap: break-word;
	}
}

/* Pagefind UI */
.pagefind-ui {
	--pagefind-ui-border-radius: 0;
	--pagefind-ui-image-border-radius: 0;
	--pagefind-ui-font: inherit;

	.pagefind-ui__drawer {
		position: absolute;
		z-index: var(--z-index-modal);
		background-color: $color-bg;
		box-shadow: $shadow-medium;
		padding: 2rem;
		border-top: 0;
	}
}