@import 'tailwindcss';

@import '@skeletonlabs/skeleton';
@import '@skeletonlabs/skeleton/optional/presets';

/* @import "tailwindcss/preflight"; */
/* @tailwind utilities; */

@import '@skeletonlabs/skeleton/themes/cerberus';
@import '@skeletonlabs/skeleton/themes/modern';
@import '@skeletonlabs/skeleton/themes/wintry';

@source '../node_modules/@skeletonlabs/skeleton-svelte/dist';

@import 'tailwindcss/utilities.css' layer(utilities);

.tiptap :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.tiptap code:not(pre code) {
	/* Remove the before and after pseudo elements */
	@apply rounded-sm border bg-black/50 p-1 before:content-[''] after:content-[''];
}

.tiptap blockquote p {
	@apply before:content-[''] after:content-[''];
}

.tiptap a {
	@apply text-blue-600 underline;
}

ul[data-type='taskList'] {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul[data-type='taskList'] li {
	display: flex;
	align-items: center;
}

ul li,
ol li {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

ul[data-type='taskList'] li label {
	flex: 0 0 auto;
	margin-right: 0.5rem;
	user-select: none;
}

ul[data-type='taskList'] li div {
	flex: 1 1 auto;
}

ul[data-type='taskList'] li label {
	display: flex;
	align-items: center;
	justify-content: center;
}

ul[data-type='taskList'] li[data-checked='true'] div {
	@apply text-black/50 line-through;
}

input[type='checkbox'] {
	@apply size-4 cursor-pointer rounded-sm;
	/* This kills compiling  !important */
}

ul[data-type='taskList'] ul[data-type='taskList'] {
	margin: 0;
}

/* Color swatches */
.color {
	@apply whitespace-nowrap;
}

.color::before {
	@apply mb-[0.15rem] mr-[0.1rem] inline-block size-[1rem] rounded-sm border border-black/50 align-middle;
	background-color: var(--color);
	content: ' ';
}

/* Table-specific styling */
.tiptap table {
	border-collapse: collapse;
	margin: 0;
	overflow: hidden;
	table-layout: fixed;
	width: 100%;
}

.tiptap table td,
.tiptap table th {
	@apply border border-black/50;
	box-sizing: border-box;
	min-width: 1em;
	padding: 6px 8px;
	position: relative;
	vertical-align: top;
}

.tiptap table td > *,
.tiptap table th > * {
	margin-bottom: 0;
}

.tiptap table th {
	@apply bg-black/50 text-left;
	/* Kills compile: font-bold */
	font-weight: bold;
}

.tiptap table .selectedCell:after {
	@apply pointer-events-none absolute bottom-0 left-0 right-0 top-0 border-[2px] border-black/50;
	content: '';
	z-index: 2;
}

.tiptap table .column-resize-handle {
	@apply pointer-events-none absolute -bottom-[2px] -right-[2px] top-0 w-1 bg-black/50;
}

.tiptap .tableWrapper {
	margin: 1.5rem 0;
	overflow-x: auto;
}

.tiptap.resize-cursor {
	cursor: ew-resize;
	cursor: col-resize;
}

/* Tiptap code block */
.tiptap pre {
	@apply m-0 flex h-fit overflow-auto !rounded-none bg-transparent p-0;
}

.tiptap pre code {
	@apply flex-1 !rounded-none bg-transparent p-0 text-inherit;
}

.tiptap .search-result {
	background-color: yellow;
}

.tiptap .search-result-current {
	background-color: orange;
}
