.library {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	transition: box-shadow 0.1s;
	cursor: pointer;
	aspect-ratio: 1;
	gap: 8;

	&:hover {
		background-color: var(--mantine-color-slate-6);
	}
}

.library-active {
	background: var(--surrealist-gradient) !important;
	box-shadow: var(--surrealist-glow);
	color: white;

	svg * {
		fill: white !important;
	}
}

.library-disabled svg {
	filter: grayscale(100%);
}