:root {
	color-scheme: light dark;
	--card: 0 1px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	--main-clr: rgb(138, 43, 226);
	--border: 1.6px solid #ccc;
	--bg-bgc: hsl(0, 0%, 100%);
	--txt-clr: hsl(0, 0%, 5%);
	--icon-clr: hsl(0, 0%, 5%);
	--popup-bgc: hsl(0, 0%, 100%);
	--toast-bgc: #333;
	--toast-txt: rgb(255, 208, 0);
}

@media (prefers-color-scheme: dark) {
	:root {
		--card: 0 1px 4px rgba(200, 200, 200, 0.2), 0 1px 2px rgba(200, 200, 200, 0.3);
		--bg-bgc: hsl(0, 0%, 15%);
		--txt-clr: #bdc1c6;
		--border: 1.6px solid rgb(180, 180, 180);
		--popup-bgc: hsl(0, 0%, 25%);
		--input-bgc: hsl(0, 0%, 25%);
		--toast-bgc: #5e5f5f;
		--toast-txt: rgb(245, 140, 3);
	}
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scrollbar-width: thin;
}

body {
	font-family: BlinkMacSystemFont, Segoe UI, Roboto, "Fira Sans", Ubuntu, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	text-size-adjust: 100%;
	font-size: 100%;
	margin: 0;
	text-rendering: optimizeSpeed;
	min-width: 16.2rem;
	overflow-x: hidden;
	margin: 0;
	padding-inline: 0.5em;
	background-color: var(--bg-bgc);
	color: var(--txt-clr);
}

select {
	border: var(--border);
	border-radius: 4px 4px 0 0;
	margin-inline: 1px;
	background-color: var(--input-bgc);
	color: var(--txt-clr);
	font-family: inherit;
}

[popover] {
	border: none;
	margin: 0;
	color: inherit;
	border-radius: 0.4em;
	box-shadow: var(--card);
	background-color: var(--popup-bgc);
	inset: unset;
}

dialog {
	border: none;
	color: inherit;
	border-radius: 0.4em;
	box-shadow: var(--card);
	background-color: var(--popup-bgc);

	&::backdrop {
		background-color: rgb(0 0 0 / 0.4);
	}

	&[open] {
		animation: slide-from-bottom 0.6s ease-out normal;
	}
}

button {
	box-shadow: var(--card);
	background-color: var(--main-clr);
	border-radius: 0.4em;
	border: none;
	color: #fff;
	text-align: center;
	font-weight: bold;
	cursor: pointer;
}

.one-clipper {
	text-align: center;
	margin-block: 0.2em 0.4em;

	& img {
		vertical-align: middle;
		margin-right: 0.2em;
	}
}

.notebooks {
	font-size: small;
	margin-bottom: 0.8em;
	display: flex;
	justify-content: center;
	column-gap: 0.5em;
}

main {
	display: flex;
	flex-direction: column;
	row-gap: 1.4em;
}

body:has(#connect-onenote) {
	width: 21rem;
}

/* snackbar  */
#snackbar {
	min-width: 8em;
	background-color: var(--toast-bgc);
	color: var(--toast-txt);
	text-align: center;
	border-radius: 1em;
	padding: 0.6em;
	position: fixed;
	z-index: 1000;
	left: 22%;
	bottom: 2em;
	width: max-content;
	translate: 0 200%;
	animation: in-out 4s ease-out;
}

@keyframes in-out {
	10%,
	90% {
		translate: 0 0;
	}
}

@keyframes slide-from-bottom {
	from {
		translate: 0 110%;
	}

	to {
		translate: 0 0;
	}
}
