@import './fonts.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif !important;
    }
}

@layer components {
	input:checked ~ .dot {
		transform: translateX(100%);
		background-color: #FFF !important;
	}

	.dialog-overlay {
		@apply z-[100] fixed inset-0 bg-black/50 flex justify-center items-center p-6;
	}

	.dialog {
		@apply bg-white p-4 rounded-lg w-full max-w-lg;
	}

	/* Markdown content styling to restore list elements */
	.markdown-content ul {
		@apply list-disc list-inside ml-4;
	}

	.markdown-content ol {
		@apply list-decimal list-inside ml-4;
	}

	.markdown-content li {
		@apply mb-1;
	}

	.markdown-content ul ul,
	.markdown-content ol ol,
	.markdown-content ul ol,
	.markdown-content ol ul {
		@apply ml-4 mt-1;
	}
}