/* 话题选择器样式 */

:root {
	--tagify-dd-color-primary: transparent;
	--tagify-dd-item-pad: 0.35rem;
}

.tagify {
	display: flex;
	align-items: center;
	padding: 0.1rem 0.5rem;
	gap: 0.1rem 0.5rem;
	--loader-size: 1.1em;
	border: none;
	border-radius: 0;
	border-bottom: 1px solid #d1d5db;
}

.tagify .tagify__tag__removeBtn {
	color: white;
}

.tagify .tagify__tag__removeBtn:hover {
	background-color: white;
	color: red;
}

.tagify .tagify__input {
	padding: 0.5rem 0;
	margin: 0;
	font-size: 0.875rem;
	align-self: center;
}

.tagify--focus {
	border-color: rgba(107, 114, 128, 0.5) !important;
	box-shadow: none !important;
	outline: none !important;
}

.tagify__input:focus,
.tagify__tag:focus,
.tagify__tag--editable:focus {
	border-color: rgba(107, 114, 128, 0.5) !important;
	box-shadow: none !important;
	outline: none !important;
}

.tagify__dropdown {
	border: 1px solid #e5e7eb;
}

.tagify__dropdown__item {
	padding: 0.4rem 1rem;
	background-color: white;
	color: #1f2937;
	font-size: 14px;
	margin: 2px 0;
	border-radius: 0;
}

.tagify__dropdown__item--active {
	background-color: #e5e7eb;
	color: #111827;
}

@media (prefers-color-scheme: dark) {
	.tagify {
		background-color: transparent;
		border-color: #52525b;
	}

	.tagify__tag__removeBtn {
		color: #e9d5ff;
	}

	.tagify__tag__removeBtn:hover {
		color: #f5f3ff;
	}

	.tagify__input {
		color: #e5e7eb;
	}

	.tagify.tagify--empty:not(.tagify--focus) .tagify__input::before {
		color: #9ca3af !important;
	}

	.tagify--focus .tagify__input::before {
		color: #9ca3af !important;
	}

	.tagify__dropdown {
		border: 1px solid #3f3f46 !important;
		background-color: #27272a;
	}

	.tagify__dropdown__item {
		background-color: #27272a;
		color: #e5e7eb;
		border: none !important;
		box-shadow: none !important;
		margin: 0;
	}

	.tagify__dropdown__item--active {
		background-color: #09090b;
		color: #f3f4f6;
	}

	.tagify__dropdown__wrapper {
		border: none;
	}
}

/* Quill编辑器样式 */

#content-editor .ql-toolbar.ql-snow {
	border: 1px solid #d1d5db;
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
	background-color: #f9fafb;
}

#content-editor .ql-toolbar.ql-snow button:hover {
	background-color: #dbeafe;
}

#content-editor .ql-container.ql-snow {
	border: 1px solid #d1d5db;
	border-top: none;
	border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
}

@media (prefers-color-scheme: dark) {
	#content-editor .ql-toolbar.ql-snow {
		border: 1px solid #52525b;
		background-color: #09090b;
	}

	#content-editor .ql-toolbar.ql-snow .ql-stroke {
		stroke: #d1d5db;
	}

	#content-editor .ql-toolbar.ql-snow .ql-fill {
		fill: #d1d5db;
	}

	#content-editor .ql-toolbar.ql-snow button:hover {
		background-color: #52525b;
	}

	#content-editor .ql-toolbar.ql-snow button:hover .ql-stroke {
		stroke: #f3f4f6;
	}

	#content-editor .ql-toolbar.ql-snow button:hover .ql-fill {
		fill: #f3f4f6;
	}

	#content-editor .ql-container.ql-snow {
		background-color: #27272a;
		border: 1px solid #52525b;
		border-top: none;
	}

	#content-editor .ql-editor.ql-blank::before {
		color: #9ca3af;
	}
}