@tailwind base;
@tailwind components;


.ProseMirror {

	*, ::before, ::after {
		@apply box-border border-0 border-solid border-slate-400;
	}

	@apply m-0 font-sans text-lg leading-7 bg-white;

	h1 {
		@apply mt-0 mb-[0.8333333em] text-5xl leading-none;
	}

	h2 {
		@apply mt-[1.6666667em] mb-[1em] text-3xl leading-[1.3333333];
	}

	h3 {
		@apply mt-[1.6666667em] mb-[.6666667em] text-2xl leading-[1.3333333];
	}

	h4 {
		@apply mt-[1.6666667em] mb-[.4444444em] text-2xl leading-[1.3333333];
	}

	a {
		@apply text-stone-400 underline underline-offset-4 hover:text-blue-600;
	}

	hr {
		@apply h-0 border-t mt-[1rem] mb-[1.5rem] border-stone-300;

		& + * {
			@apply mt-0;
		}
	}

	code, pre {
		@apply font-mono text-base;
	}

	small {
		font-size: 80%;
	}

	sub, sup {
		@apply relative align-baseline leading-none;
		font-size: 75%;
	}

	sub {
		bottom: -0.25em;
	}

	sup {
		top: -0.5em;
	}

	blockquote, dl, dd, pre {
		@apply m-0;
	}

	fieldset {
		@apply m-0 p-0;
	}

	legend {
		@apply p-0;
	}

	img, svg, video, canvas, audio, iframe, embed, object {
		@apply align-middle;
	}

	& > p {
		@apply my-[1.3333333em];
	}

	blockquote {
		@apply my-[1.6666667em] pl-[1em] text-stone-600 border-l-4 border-blue-400;
	}

	div.blockquote-highlight {
		@apply m-0 p-[.75em] border border-blue-200 rounded-lg bg-orange-100;
	}

	.resizable-image {
		@apply max-w-full border border-stone-200 rounded-lg;
	}

	figure {
		@apply m-0 my-8;

		& > * {
			@apply my-0;
		}
	}

	figcaption {
		@apply mt-[1em] leading-6;
		font-size: 0.8888889em;
	}

	code {
		font-size: 0.8888889em;
	}

	pre {
		@apply my-[2em] px-[1.5em] py-[1em] leading-7 rounded-lg;
		font-size: 0.8888889em;
	}

	.bullet-list, .ordered-list {
		@apply mt-[-0.5em] mb-[1.3333333em] mx-0 p-0 pl-[1.5em] leading-3 rounded-lg;

		li {
			@apply my-[0.6666667em] pl-[0.4444444em] leading-normal;
		}
	}

	.bullet-list {
		@apply list-disc list-outside;
	}

	.ordered-list {
		@apply list-decimal list-outside;
	}

	.task-list {
		li {
			@apply flex items-start my-[0.6666667em];

			& > label {
				@apply select-none mr-[0.2em];

				input[type="checkbox"] {
					@apply relative grid place-content-center top-[0.3em] m-0 mx-[0.3em] w-[1em] h-[1em] appearance-none bg-white border-2 border-stone-900 cursor-pointer hover:bg-stone-100;

					&:active {
						@apply bg-stone-300;
					}

					&::before {
						content: "";
						width: 0.65em;
						height: 0.65em;
						transform: scale(0);
						transition: 120ms transform ease-in-out;
						box-shadow: inset 1em 1em;
						transform-origin: center;
						clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
					}

					&:checked::before {
						transform: scale(1);
					}
				}
			}

			@media screen and (max-width: 768px) {
				& > label {
					margin-right: 0.5rem;
				}
			}

			&[data-checked="true"] p {
				@apply text-stone-400 line-through decoration-2;
			}
		}
	}

	h2 + *, h3 + *, h4 + * {
		margin-top: 0;
	}

	table {
		@apply table-fixed w-full m-0 text-base leading-6 text-left indent-0 border-collapse;

		tbody {
			@apply table-row-group align-middle;

			th {
				@apply px-[0.75em] pb-[0.75em] text-left font-bold bg-stone-200 first:pl-0 last:pr-0;
			}

			td, th {
				@apply p-[0.5em] min-w-[1em] align-top border border-stone-300;
			}
		}
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	@keyframes spinning {
		to {
			transform: rotate(360deg);
		}
	}

	.tippy-box {
		max-width: 400px !important;
	}

	@keyframes spinning {
		to {
			transform: rotate(360deg);
		}
	}
}

@tailwind utilities;

@import "katex/dist/katex.css";
