@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	html,
	body {
		@apply bg-discord-blurple-560;
	}

	body {
		overscroll-behavior-y: none;
		@apply min-h-screen min-w-full fixed;
	}

	#container {
		overscroll-behavior-y: none;
		@apply overflow-auto h-[calc(100vh-64px)];
	}

	img {
		@apply inline-block !m-0;
	}

	.reduce-motion * > * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@layer components {
	.noprose {
		@apply !m-0;
	}

	.noprose p {
		@apply !m-0;
	}

	.noprose > div.info,
	.noprose > div.warn {
		@apply !mt-4;
	}

	.noprose li {
		@apply !m-0;
	}

	.no-list {
		@apply p-0;
	}

	.no-list li {
		@apply mb-2 list-none;
	}

	.custom-scroll {
		scrollbar-width: thin;
		scrollbar-color: theme('colors.discord.blurple.460') #1d1d1d;
	}

	.custom-scroll::-webkit-scrollbar {
		height: 8px; /* Manually measured based on the original thin scrollbar on Firefox */
		width: 8px; /* Manually measured based on the original thin scrollbar on Firefox */
	}

	.custom-scroll::-webkit-scrollbar-thumb {
		background: theme('colors.discord.blurple.460');
	}

	.custom-scroll::-webkit-scrollbar-thumb:hover {
		background: theme('colors.discord.blurple.430');
	}

	.custom-scroll::-webkit-scrollbar-track {
		background: rgba(0, 0, 0, 0.07);
	}

	#container.custom-scroll::-webkit-scrollbar-track {
		background: #ffffff;
	}

	.dark #container.custom-scroll::-webkit-scrollbar-track {
		background: #1d1d1d;
	}
}

@layer utilities {
	.break-words-legacy {
		word-break: break-word;
	}

	.scroll-to {
		scroll-margin-top: theme('spacing.16');
	}
}

.info {
	@apply dark:text-gray-200 p-2 border-l-4 border-discord-blurple-500 mt-4;
	/* prettier-ignore */
	background: theme('colors.discord.blurple.400')50;
}

.warn {
	@apply dark:text-gray-200 p-2 border-l-4 border-discord-red-500 mt-4;
	/* prettier-ignore */
	background: theme('colors.discord.red.400')50;
}
