@media (prefers-color-scheme: light) {
}

@media (prefers-color-scheme: dark) {
}

@media screen and (max-width: 1200px) {
	nav:not(:hover) {
		opacity: 0;
	}
}

@font-face {
	font-family: Sinkin Sans;
	src: url(SinkinSans.otf);
}

@font-face {
	font-family: Clash Display;
	src: url(ClashDisplay.otf);
}

@font-face {
	font-family: DM Sans;
	src: url(DMSans.ttf);
}

@keyframes fadeIn {
	0% {
		opacity: 0;
		filter: blur(4px);
	}
	to {
		opacity: 1;
		filter: blur(0);
	}
}

@keyframes fadeInGrid {
	0% {
		opacity: 0;
		filter: blur(4px);
	}
	to {
		opacity: 0.6;
		filter: blur(0);
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0.5;
		transform: translateY(10px);
		filter: blur(4px);
	}
	75% {
		opacity: 1;
		transform: translateY(0px);
		filter: blur(2px);
	}
	90% {
		opacity: 1;
		transform: translateY(0px);
		filter: blur(1px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes slideRight {
	from {
		opacity: 0;
		transform: translateX(-100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

:root {
	color-scheme: light dark;
	--cursor-default: url(https://faisaln.com/cursors/default.png) 8 8, auto;
	--cursor-pointer: url(https://faisaln.com/cursors/handpointing.png) 8 8, pointer;
	--cursor-grab: url(https://faisaln.com/cursors/handopen.png) 8 8, grab;
	--cursor-grabbing: url(https://faisaln.com/cursors/handgrabbing.png) 8 8, grabbing;
	--cursor-nesw: url(https://faisaln.com/cursors/resizenortheastsouthwest.png) 8 8, nesw-resize;
	--cursor-text: url(https://faisaln.com/cursors/textcursor.png) 8 8, text;
	--cursor-alias: url(https://faisaln.com/cursors/makealias.png) 8 8, alias;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "DM Sans";
	scroll-behavior: smooth;
	transition: 0.25s ease;
}

*::before,
*::after {
	transition: 0.25s ease;
}

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

::selection {
	background: var(--color);
	color: var(--background);
}

html {
	font-family: "DM Sans";
	scroll-behavior: smooth;
	background: var(--background);
	min-height: 100vh;
	scroll-padding-top: 45px;
}

body {
	background: var(--background);
	display: flex;
	justify-content: start;
	align-items: stretch;
	align-content: stretch;
	min-height: 100vh;
	color: var(--color);
	--color: light-dark(black, white);
	--background: light-dark(white, #0e0e0e);
	--sidebar: light-dark(#efefef, #131313);
	cursor: var(--cursor-default);
}

body[data-theme="sepia"] {
	--color: light-dark(#c8863b, #bf9e78);
	--background: light-dark(#ffe6c2, #20190f);
	--sidebar: light-dark(#ffdaa6, #18130c);
}

body[data-theme="red"] {
	--color: light-dark(#ff5151, #ff9c9c);
	--background: light-dark(#ffecec, #180000);
	--sidebar: light-dark(#ffe4e4, #210000);
}

body[data-theme="green"] {
	--color: light-dark(#007004, #9cff9f);
	--background: light-dark(#c9ffcc, #011800);
	--sidebar: light-dark(#a7ffb1, #072100);
}

body[data-theme="cyan"] {
	--color: light-dark(#009991, #8efff9);
	--background: light-dark(#c1f7fc, #001618);
	--sidebar: light-dark(#bdf0ff, #00211f);
}

body[data-theme="blue"] {
	--color: light-dark(#475fff, #8e9dff);
	--background: light-dark(#b5c2ff, #000218);
	--sidebar: light-dark(#bdb8ff, #040021);
}

body[data-theme="purple"] {
	--color: light-dark(#bf1fff, #df8eff);
	--background: light-dark(#f3cefa, #180018);
	--sidebar: light-dark(#f4cffe, #200021);
}

body[data-style="lowercase"] {
	text-transform: lowercase;
}

body.active {
	aside {
		margin-left: 0;
	}

	nav {
		left: 90px;
	}
}

h1 {
	font-family: "Sinkin Sans";
	font-size: 30px;
	font-weight: 950;
	line-height: 32.5px;
	letter-spacing: -1.25px;
}

h2 {
	font-family: "Sinkin Sans";
	font-size: 25px;
	font-weight: 950;
	line-height: 30px;
	letter-spacing: -1px;
}

b {
	font-size: 20px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: -0.75px;
}

p {
	font-size: 20px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: -0.75px;
	opacity: 0.6;
}

p.block {
	line-height: 20px;

	svg {
		height: 15px;
		stroke-width: 1.5px;
		margin-bottom: -2px;
		margin-right: -4px;
		overflow: visible;

		path {
			stroke: var(--color);
		}
	}
}

p.small {
	font-size: 15px;
	line-height: 15px;
	letter-spacing: -0.5px;
}

p[count]::before {
	content: attr(count);
}

a {
	font-size: 20px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: -0.75px;
	color: var(--color);
	text-decoration: none;
	cursor: var(--cursor-pointer);
}

a[href*="https:"] {
	cursor: var(--cursor-alias);
}

input,
textarea,
[contenteditable] {
	cursor: var(--cursor-text);
}

aside {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	padding: 15px;
	background: var(--sidebar);
	margin-left: -60px;

	> * {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		width: 30px;

		> * {
			width: -webkit-fill-available;
		}
	}

	svg {
		overflow: visible;

		path {
			fill: var(--color);
			stroke: transparent;
			stroke-width: 1.5px;
			transition: 0.25s ease;
		}
	}

	.top {
		position: sticky;
		top: 15px;
	}

	.bottom:hover svg path {
		fill: var(--sidebar) !important;
		stroke: var(--color);
		stroke-width: 1.5px;
		transition: 0.25s ease;
	}
}

main {
	display: flex;
	align-items: flex-start;
	align-self: stretch;
	justify-content: center;
	flex: 1 0 0;
	position: relative;
}

nav {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
	position: fixed;
	left: 30px;
	top: 0px;
	width: min-content;

	.customization {
		display: flex;
		align-items: flex-start;
		gap: 5px;
		margin-top: 25px;

		.theme-option {
			width: 15px;
			height: 15px;
			border-radius: 100px;
			cursor: var(--cursor-pointer);
			position: relative;
		}

		.theme-option::before {
			content: "";
			position: absolute;
			width: 5px;
			height: 5px;
			border-radius: 100px;
			background: var(--color);
			left: calc(50% - 2.5px);
			top: calc(50% - 2.5px);
			z-index: -1;
		}

		.theme-option:hover::before {
			top: calc(-50% - 2.5px);
			z-index: 0;
		}

		.theme-option.default {
			background: linear-gradient(
				90deg,
				light-dark(black, gray) 50%,
				light-dark(gray, white) 50%
			);
		}

		.theme-option.sepia {
			background: #bf9e78;
		}

		.theme-option.red {
			background: #ff9c9c;
		}

		.theme-option.green {
			background: #9cff9f;
		}

		.theme-option.cyan {
			background: #8efff9;
		}

		.theme-option.blue {
			background: #8e9dff;
		}

		.theme-option.purple {
			background: #df8eff;
		}

		.style-option {
			font-size: 12px;
			cursor: var(--cursor-pointer);
			text-transform: initial;
			text-decoration-line: underline;
			text-underline-offset: 2.5px;
			text-decoration-color: transparent;
		}

		.style-option.active {
			text-decoration-color: var(--color);
		}
	}

	.pages {
		display: flex;
		padding: 5px 5px 5px 10px;
		justify-content: center;
		align-items: center;
		gap: 7.5px;
		border-radius: 5px;
		border: 1px dashed var(--color);
		font-size: 14px;
		font-weight: 600;
		line-height: 24px;
		letter-spacing: -0.07px;
		width: -webkit-fill-available;
		cursor: var(--cursor-pointer);
		transition: 0.25s;

		.icon {
			display: flex;

			> svg,
			> i {
				width: 15px;

				path {
					stroke-width: 1.25px;
					stroke: var(--color);
				}
			}
		}

		select {
			font-size: 14px;
			font-weight: 500;
			letter-spacing: -0.02em;
			color: var(--color);
			flex: 1 0 0;
			min-width: max-content;
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			text-indent: 1px;
			text-overflow: "";
			background: transparent;
			padding: 5px 7.5px;
			margin: -5px -7.5px -5px -7.5px;
			border: none;
			outline: none;
			z-index: 1;
			cursor: var(--cursor-pointer);
		}

		option {
			font-size: 14px;
			font-weight: 500;
			letter-spacing: -0.02em;
			background: var(--background);
		}

		.count {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 10px;
			height: 22px;
			min-width: 20px;
			padding: 3px 6px;
			font-size: 12px;
			font-weight: 700;
			border-radius: 3px;

			svg,
			i {
				stroke: var(--color);
			}
		}
	}

	.pages:has(select) .count {
		margin-left: -27.5px;
	}

	.sections {
		display: flex;
		padding-left: 5px;
		flex-direction: column;
		align-items: flex-start;

		a {
			display: flex;
			align-items: flex-end;
			gap: 7.5px;
			padding: 2.5px 0 2.5px 12.5px;
			border-left: 2px solid var(--color);
			opacity: 0.5;
			font-size: 16px;
			width: -webkit-fill-available;
		}

		a:hover,
		a.active {
			opacity: 1;
		}
	}
}

nav:not(:hover) .customization {
	margin-top: -5px;
	opacity: 0;
}

article {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
	gap: 50px;
	max-width: 700px;
	padding: 80px 30px 50px 30px;

	> *:not(.hoverables):not(.loader) {
		opacity: 0;
		will-change: transform;
	}

	> *:not(.hoverables):not(.loader).active {
		animation: fadeInUp 1s cubic-bezier(0.14, 0.61, 0.1, 1.02) forwards;
	}

	> *:not(.hoverables):not(.loader).active .line-item {
		animation: fadeIn 1s cubic-bezier(0.14, 0.61, 0.1, 1.02) forwards;
	}

	> *:not(.hoverables):not(.loader).active .grid-item {
		animation: fadeInGrid 1s cubic-bezier(0.14, 0.61, 0.1, 1.02) forwards;
	}
}

header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7.5px;

	img {
		width: 75px;
		height: 75px;
		border-radius: 100px;
		margin-bottom: 5px;
	}
}

section {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
	gap: 15px;

	> :not(#stack):first-child::before {
		content: "#";
		position: absolute;
		left: -20px;
		opacity: 0;
	}
}

section:has(.line-item),
section:has(.grid-item) {
	gap: 9px;
}

section > :first-child:hover::before {
	opacity: 0.5;
}

hr {
	align-self: stretch;
	height: 1px;
	color: var(--color);
	opacity: 0.5;
}

hr.invisible {
	opacity: 0;
}

.line-item {
	display: flex;
	padding-left: 2.5px;
	align-items: center;
	gap: 7.5px;
	position: relative;
	width: -webkit-fill-available;
	opacity: 0;

	> * {
		opacity: 0.6;
	}

	.icon {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		align-self: stretch;
		gap: 10px;
		width: 20px;

		svg {
			overflow: visible;
			height: auto;
			width: auto;
			max-height: 19px;
			max-width: 19px;
		}
	}

	.icon.stroke svg path {
		stroke: var(--color);
	}

	.icon:not(.stroke) svg path {
		fill: var(--color);
	}

	p {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		line-clamp: 1;
		-webkit-line-clamp: 1;
		overflow: hidden;
		line-height: 24px;
		margin-bottom: -2px;
		margin-top: -2px;
	}
}

.line-item:hover > * {
	opacity: 0.75;
}

.chip {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 7.5px;
	padding: 5px 7.5px;
	border-radius: 7.5px;
	border: 1px solid var(--color);
	background: var(--sidebar);
	font-size: 15px;
	line-height: 15px;
	width: max-content;
	margin: -5px 0;
}

.quote {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-self: stretch;
	border-radius: 20px;
	position: relative;
	padding: 20px;
	min-height: 100px;

	svg {
		width: 15px;
		height: 15px;
		position: absolute;

		path {
			stroke: var(--color);
		}
	}

	svg:first-child {
		top: 0;
		left: 0;
	}

	svg:nth-child(2) {
		top: 0;
		right: 0;
		rotate: 90deg;
	}

	svg:nth-child(3) {
		bottom: 0;
		left: 0;
		rotate: 270deg;
	}

	svg:nth-child(4) {
		bottom: 0;
		right: 0;
		rotate: 180deg;
	}

	b {
		text-align: center;
		font-size: 17px;
		letter-spacing: 0.17px;
	}
}

footer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-self: stretch;
	gap: 7.5px;
	padding-top: 25px;

	svg {
		height: 24px;

		path {
			fill: var(--color);
		}
	}

	hr {
		margin: 20px 0;
	}

	b {
		font-size: 15px;
		line-height: 15px;
	}
}

.stack {
	display: grid;
	grid-template-areas: "center";
	--dynamic-radius: 2rem;
	z-index: 1;

	.card,
	.card > div {
		border-radius: calc((var(--dynamic-radius) + 0.1rem) - 2.5px);
	}

	.card-wrapper-wrapper {
		cursor: var(--cursor-grab);
		grid-area: center;
		transform-origin: 50% 50%;
		opacity: 0;
		position: relative;
		border-radius: calc(var(--dynamic-radius) + 0.1rem);
		transition: all 0.4s ease;

		.card-wrapper,
		.card-shine {
			aspect-ratio: 680/300;
		}

		.card-wrapper {
			position: relative;
			display: flex;
			font-weight: 600;
			overflow: hidden;
			transition: all 0.4s ease;
			background-size: cover;
			width: -webkit-fill-available;
			background-color: var(--sidebar);
			background-position: center;
			border-radius: calc(var(--dynamic-radius) + 0.1rem);

			.card-glass {
				position: absolute;
				z-index: 0;
				inset: 0;
				backdrop-filter: blur(0px) brightness(1);
				filter: url(#glass);
				overflow: hidden;
			}

			.card {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: start;
				gap: 10px;
				padding: 20px 25px;
				width: -webkit-fill-available;
				z-index: 3;
				color: white;

				.action {
					width: 24px;
					height: 24px;
					position: absolute;
					left: 20px;
					top: 20px;
					fill: rgba(0, 0, 0, 0.2);
					stroke-width: 2px;
					stroke: rgba(255, 255, 255, 0.2);
					backdrop-filter: blur(4px);
					cursor: var(--cursor-pointer);
				}

				.action:nth-child(2) {
					display: none;
				}

				.text {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					gap: 5px;
				}

				.subtitle {
					position: absolute;
					left: 25px;
					bottom: 16px;
					font-size: 15px;
				}

				.subtitle::after {
					content: " " attr(year);
				}
			}

			.card > * {
				opacity: 0;
			}
		}

		.card-wrapper:hover {
			.card-glass {
				backdrop-filter: blur(3px) brightness(1);
			}

			.card > * {
				opacity: 1;
			}

			.subtitle {
				opacity: 0.6;
			}
		}

		.card-wrapper:active {
			cursor: var(--cursor-grabbing);
		}

		.card-shine {
			position: absolute;
			inset: 0;
			z-index: 2;
			overflow: hidden;
			box-shadow:
				inset 2px 2px 1px 0 rgba(150, 150, 150, 0.5),
				inset -1px -1px 1px 1px rgba(150, 150, 150, 0.5),
				0 6px 6px rgba(0, 0, 0, 0.2),
				0 0 20px rgba(0, 0, 0, 0.1);
			background-color: var(--sidebar);
			transition:
				all 0.4s ease,
				0.25s background-color ease;
			border-radius: var(--dynamic-radius);
			pointer-events: none;
		}

		.card-wrapper.wallpaper .action {
			cursor: var(--cursor-nesw);
		}

		.card-wrapper.wallpaper.active {
			.action:nth-child(1) {
				display: none;
			}

			.action:nth-child(2) {
				display: flex;
			}
		}

		.card-wrapper.wallpaper.tint:hover .card-glass {
			backdrop-filter: blur(3px) brightness(0.75);
		}
	}

	.card-wrapper-wrapper:has(.card-wrapper.wallpaper.active) {
		.card-wrapper,
		.card-shine {
			aspect-ratio: 1080/600;
			margin: -100px;
		}
	}

	.card-wrapper-wrapper:has(.card-wrapper.has-image) .card-shine {
		background-color: transparent;
		transition:
			all 0.4s ease,
			0.25s background-color ease;
		transition-delay: 0s, 0.5s;
	}

	.card-wrapper-wrapper:has(.card-wrapper.wallpaper.tint) .card-shine {
		box-shadow:
			inset 2px 2px 1px 0 var(--background),
			inset -1px -1px 1px 1px var(--background),
			0 6px 6px rgba(0, 0, 0, 0.2),
			0 0 20px rgba(0, 0, 0, 0.1);
	}

	.card-wrapper-wrapper:nth-of-type(1) {
		opacity: 1;
		z-index: 3;
	}

	.card-wrapper-wrapper:nth-of-type(2) {
		opacity: 1;
		z-index: 2;
		transform: translateY(30px) scale(0.9);
	}

	.card-wrapper-wrapper:nth-of-type(3) {
		opacity: 1;
		z-index: 1;
		transform: translateY(60px) scale(0.8);
	}

	.card-wrapper-wrapper:nth-of-type(4) {
		opacity: 1;
		z-index: 0;
		transform: translateY(90px) scale(0.7);
	}

	.card-wrapper-wrapper:nth-of-type(5) {
		opacity: 1;
		z-index: -1;
		transform: translateY(120px) scale(0.6);
	}

	.card-wrapper-wrapper:nth-of-type(6) {
		opacity: 1;
		z-index: -2;
		transform: translateY(150px) scale(0.5);
	}

	.card-wrapper-wrapper:nth-of-type(7) {
		opacity: 1;
		z-index: -3;
		transform: translateY(180px) scale(0.4);
	}

	.card-wrapper-wrapper:nth-of-type(8) {
		opacity: 1;
		z-index: -4;
		transform: translateY(205px) scale(0.3);
	}

	.card-wrapper-wrapper:nth-of-type(9) {
		opacity: 1;
		z-index: -5;
		transform: translateY(228px) scale(0.2);
	}

	.card-wrapper-wrapper:nth-of-type(10) {
		opacity: 1;
		z-index: -6;
		transform: translateY(240px) scale(0.1);
	}
}

.now-playing-wrapper-wrapper {
	position: fixed;
	top: 25px;
	right: 35px;

	.now-playing,
	.now-playing > div {
		border-radius: 100%;
	}

	.now-playing {
		width: 64px;
		height: 64px;
		animation: rotate 5s linear infinite;
	}

	.now-playing-wrapper {
		position: relative;
		display: flex;
		font-weight: 600;
		overflow: hidden;
		box-shadow:
			0 2px 2px rgba(0, 0, 0, 0.2),
			0 0 0px rgba(0, 0, 0, 0.1);
		transition: all 0.4s ease;
		background-color: var(--sidebar);
		background-size: cover;

		.now-playing-glass {
			position: absolute;
			z-index: 0;
			inset: 0;
			backdrop-filter: blur(0px);
			filter: url(#glass);
			overflow: hidden;
		}

		.now-playing-shine {
			position: absolute;
			inset: 0;
			z-index: 2;
			overflow: hidden;
			box-shadow:
				inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
				inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);
		}
	}

	#player {
		width: 40px;
		height: 40px;
		position: absolute;
		bottom: -15px;
		right: -15px;
		z-index: 4;
	}
}

.now-playing-wrapper-wrapper:not(.active) {
	zoom: 50%;
	opacity: 0;
}

.now-playing-wrapper-wrapper:hover {
	.now-playing,
	.now-playing > div {
		border-radius: 16px;
	}

	.now-playing {
		animation-play-state: paused;
	}
}

.fadeBetween {
	position: relative;
	width: -webkit-fill-available;

	> * {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		width: -webkit-fill-available;
	}

	> *:not(.active) {
		opacity: 0;
	}
}

.hoverables {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 2147483647;
}

.hoverable {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	transform: rotate(-1deg);
	position: absolute;
	border-radius: 10px;
	border: 0.5px solid var(--sidebar);
	overflow: hidden;
	transition:
		0.25s ease opacity,
		0.12s ease transform;
	pointer-events: auto;
	opacity: 1 !important;
	z-index: 100;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 15px 40px 0px;

	* {
		font-size: 15px;
		line-height: 15px;
		letter-spacing: -0.5px;
		text-align: center;
		overflow: visible;
	}

	img {
		max-height: 85px;
	}

	.icon.stroke svg path {
		stroke: var(--color);
	}

	.icon:not(.stroke) svg {
		path {
			fill: var(--color);
		}

		rect {
			stroke: var(--color);
		}
	}

	.inner {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		align-self: stretch;
		gap: 2.5px;
	}

	.sleep {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		gap: 2px;
		margin-bottom: 2.5px;

		.day {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			height: 14px;
			padding: 3.5px;
			border-radius: 5px;
			background: var(--color);
			color: var(--background);
			font-size: 12.5px;
			border: 1px dashed var(--sidebar);
		}
	}

	.events {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
		gap: 2px;
		margin-bottom: 2.5px;
		position: relative;
		width: -webkit-fill-available;
		min-width: min-content;

		.event {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 14px;
			padding: 10px 12.5px;
			border-radius: 5px;
			background: var(--color);
			color: var(--background);
			font-size: 12.5px;
			position: absolute;
			min-width: min-content;
			width: -webkit-fill-available;
			text-wrap: nowrap;
			border: 1px dashed var(--sidebar);
		}

		.now {
			height: 2px;
			width: calc(100% + 20px);
			background: var(--color);
			position: absolute;
			margin-right: -10px;
			border-radius: 10px;
			z-index: -1;
		}
	}
}

.hoverable::after {
	content: "";
	border-width: 2px;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	border-radius: inherit;
	pointer-events: none;
	border-color: rgba(255, 255, 255, 0.08);
	border-style: solid;
	box-sizing: border-box;
}

.hoverable:not(:has(img)) {
	min-width: 150px;
	min-height: 85px;
	padding: 20px 25px;
	backdrop-filter: blur(2px);
}

.hoverable:not(:has(.events)) * {
	max-width: 200px;
}

.hoverable:not(.active) {
	opacity: 0 !important;
	pointer-events: none;
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(50%, 250px), 1fr));
	gap: 10px;
	width: -webkit-fill-available;
}

.grid-item {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 7.5px;
	position: relative;
	width: -webkit-fill-available;
	opacity: 0;
	background: var(--sidebar);
	padding: 12.5px;
	border: 1px solid var(--color);
	border-radius: 10px;

	> *:not(.grid-item-row),
	> .grid-item-row > * {
		opacity: 1;
	}

	.grid-item-row {
		display: flex;
		gap: 5px;
		width: -webkit-fill-available;

		p {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			line-clamp: 1;
			-webkit-line-clamp: 1;
			overflow: hidden;
			line-height: 24px;
			margin-bottom: -2px;
			margin-top: -2px;
		}
	}

	.icon {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		align-self: stretch;
		gap: 10px;
		width: 20px;

		svg {
			overflow: visible;
			height: auto;
			width: auto;
			max-height: 19px;
			max-width: 19px;
		}
	}

	.icon.stroke svg path {
		stroke: var(--color);
	}

	.icon:not(.stroke) svg {
		path {
			fill: var(--color);
		}

		rect {
			stroke: var(--color);
		}
	}

	> p {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		line-clamp: 2;
		-webkit-line-clamp: 2;
		overflow: hidden;
		line-height: 18px;
		margin-bottom: -3px;
		margin-top: -3px;
	}

	> .icon {
		position: absolute;
		top: 12.5px;
		right: 12.5px;
	}
}

.grid-item:hover {
	opacity: 0.75 !important;
}

.loader {
	position: fixed;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--background);
	z-index: 2147483646;
	pointer-events: none;
}

.loader.active {
	opacity: 0;
	transition: opacity 0.5s ease;
}

.loader path,
.loader circle,
.loader rect,
.loader ellipse,
.loader polygon,
.loader polyline,
.loader line,
.loader g {
	animation: slideRight 2s cubic-bezier(0.65, 0, 0.35, 1) both 1 normal;
	fill: var(--color);
}