:root {
	padding: 0;
	margin: 0;
	font-family: Helvetica, sans-serif, Arial;
	box-sizing: border-box;
	scroll-behavior: smooth;
	color: var(--text);

	--background: #222222;
	--text: #f7f7f7;
	--accent: #0000ff;
	--accent-hover: #0000cc;
	--sidebar-background: #f5f5f5;
	--sidebar-outline: #888888;
	--scrollbar-thumb: #888888;
	--input-outline: #555555;
	--input-background: #333333;
}

:root[theme="light"] {
	--background: #ffffff;
	--text: #000000;
	--accent: #0000ff;
	--accent-hover: #0000cc;
	--sidebar-background: #f5f5f5;
	--sidebar-outline: #888888;
	--scrollbar-thumb: #888888;
	--input-outline: #cccccc;
	--input-background: #ffffff;
}

:root[theme="dark"] {
	--background: #222222;
	--text: #f7f7f7;
	--accent: rgb(120, 120, 227);
	--accent-hover: rgb(135, 135, 239);
	--sidebar-background: #333333;
	--sidebar-outline: #555555;
	--scrollbar-thumb: #666666;
	--input-outline: #555555;
	--input-background: #333333;
}

html {
	background: var(--background);
}

html::-webkit-scrollbar {
	display: none;
}

.scrollbar::-webkit-scrollbar {
	width: 0.3rem;
}

.scrollbar::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb);
	border-radius: 0.5rem;
}

.scrollbar::-webkit-scrollbar-track {
	background: transparent;
}

header {
	position: fixed;
	top: 0;
	right: 0;
	width: 100vw;

	& .header-content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 0.25rem 1rem 0.25rem 0.3rem;
	}
}

input,
button {
	border-radius: 0.5rem;
	color: var(--text);
}

input {
	background: var(--input-background);
}

button:not([variant="ghost"]) {
	padding: 0.75rem 1.5rem;
	cursor: pointer;
	background: var(--accent);
}

button[variant="ghost"] {
	border: none;
	background: transparent;
	cursor: pointer;
}

.searchField {
	border: 2px solid var(--input-outline);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	width: min-content;
	border-radius: 0.5rem;
	background: var(--input-background);

	& input,
	input:focus-visible {
		border: none;
		outline: none;
		width: 25rem;

		padding: 0.4rem 0.75rem;
		height: 1.75rem;
	}
	& svg {
		padding-top: 0.25rem;
	}
}

main {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 80vh;
	margin-top: 20vh;
	gap: 5rem;
}

footer {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

.icon {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--text);
	stroke: var(--text);
}

.icon[variant="filled"] {
	fill: var(--text);
}

sidebar {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	height: 99vh;
	width: 30vw;
	border-radius: 0.8rem 0 0 0.8rem;
	border: 1px solid var(--sidebar-outline);
	background: var(--sidebar-background);
	position: fixed;
	top: 0.5vh;
	right: 0;

	& .sidebar-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;

		& .sidebar-header-title {
			margin: 1rem 0 0 1.75rem;
			font-size: 1.5rem;
			font-weight: bold;
		}

		& .sidebar-header-close {
			margin: 1rem 1rem 0 0;
			cursor: pointer;
			height: 1.5rem;
		}
	}

	& .sidebar-content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		width: 95%;
		padding-left: 1.5rem;
		height: calc(100vh - 3rem);
		overflow-y: scroll;
		overflow-x: hidden;
		gap: 1rem;
	}
}

.hidden {
	display: none;
}

.link {
	text-decoration: underline;
	cursor: pointer;
	color: var(--accent);
}