.markdown-editor {
	border-radius: var(--border05);
	border: none;
	transition: all var(--transition);
	background-color: transparent;
}

.markdown-editor-wrapper {
	margin-bottom: var(--space-md);

	&.is-invalid .EasyMDEContainer {
		border: 1px solid var(--error);
	}
}

.EasyMDEContainer {
	border-radius: var(--border05);
	transition: all var(--transition);
	overflow: hidden;
	margin-bottom: 0;
	border: 1px solid var(--transp-1);

	.CodeMirror {
		border-radius: 0;
		border: none;
		color: var(--text);
		background-color: transparent;
		font-family: var(--font);
		font-size: var(--p);
		line-height: 1.6;
		padding: 1rem var(--space-md);
		height: auto;

		.cm-header {
			color: var(--text-200);
		}
		.cm-header-1 {
			font-size: var(--h4);
		}
		.cm-header-2 {
			font-size: var(--h5);
		}
		.cm-header-3 {
			font-size: var(--h6);
		}
		.cm-quote {
			border-left: 2px solid var(--transp-2);
			padding-left: 0.6rem;
			margin-left: 0;
		}
		.cm-link,
		.cm-url {
			color: var(--accent);
		}
		.cm-strong {
			font-weight: 600;
		}
		.cm-em {
			font-style: italic;
		}
		.cm-strikethrough {
			text-decoration: line-through;
		}
		.cm-code,
		.cm-comment {
			background: var(--transp-1);
			border-radius: var(--border05);
		}

		.CodeMirror-lines {
			padding: 0;
		}

		.CodeMirror-line {
			padding: 0;
		}

		.CodeMirror-cursor {
			border-left: 1px solid var(--text);
		}

		.CodeMirror-selected {
			background: var(--transp-2);
		}

		&.CodeMirror-fullscreen {
			background-color: var(--background);
		}

		@keyframes pulse {
			0% {
				opacity: 0.6;
			}

			50% {
				opacity: 1;
			}

			100% {
				opacity: 0.6;
			}
		}
	}

	// Toolbar
	.editor-toolbar {
		border: none;
		opacity: 1;
		background-color: var(--transp-05);
		padding: var(--space-xs) var(--space-sm);
		border-bottom: 1px solid var(--transp-1);
		display: flex;
		flex-wrap: wrap;
		gap: 2px;

		&.fullscreen {
			backdrop-filter: blur(10px);
			background-color: var(--blurred-background);
		}

		&.disabled-for-preview {
			button.preview {
				pointer-events: all;
				opacity: 1;
			}
		}

		button {
			color: var(--text-500);
			border: none;
			border-radius: var(--border05);
			transition: all var(--transition);
			margin: 0;
			width: 34px;
			height: 34px;
			font-size: var(--h6);

			&::after {
				content: "";
			}

			.editor-toolbar-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
			}

			&:hover {
				background-color: var(--transp-1);
				color: var(--text-200);
			}

			&.active {
				background-color: var(--transp-1);
				color: var(--accent);
			}
		}

		// Custom button icon styles
		.custom-icon {
			font-style: normal;
			font-size: 1em;
			min-width: 24px;
			text-align: center;
			display: inline-block;

			// Emoji icon
			&[title="Insert Emoji"] {
				color: var(--accent-400);
			}

			// Clear editor icon
			&[title="Clear Editor"] {
				color: var(--error);
			}

			// Bold icon
			&[title="Bold (Ctrl+B)"] {
				font-weight: bold;
			}

			// Italic icon
			&[title="Italic (Ctrl+I)"] {
				font-style: italic;
			}

			// Heading icons
			&[title^="Heading"] {
				font-weight: bold;
			}

			// Preview icon
			&[title="Toggle Preview (Ctrl+P)"] {
				color: var(--info);
			}

			// Fullscreen icon
			&[title="Toggle Fullscreen (F11)"] {
				color: var(--accent);
			}
		}

		i.separator {
			border-left: 1px solid var(--transp-2);
			margin: 0 4px;
			opacity: 0.5;
		}

		.editor-clear {
			color: var(--error);
		}
	}

	// Preview mode
	.editor-preview,
	.editor-preview-side {
		background-color: var(--background);
		border-left: 1px solid var(--transp-1);
		color: var(--text);
		white-space: normal;
		@extend .md-content;
	}

	// Status bar
	.editor-statusbar {
		color: var(--text-600);
		padding: 4px var(--space-sm);
		background-color: var(--transp-05);
		border-top: 1px solid var(--transp-1);
		font-size: 0.8em;
		display: flex;
		justify-content: flex-end;
		backdrop-filter: blur(5px);
	}

	.separator {
		border-right: 1px solid var(--transp-1) !important;
	}

	// Fullscreen mode
	&.fullscreen {
		z-index: 100;
		backdrop-filter: blur(10px);

		.editor-toolbar {
			padding: var(--space-sm) var(--space-md);
			background-color: var(--transp-1);
		}

		.CodeMirror {
			padding: var(--space-lg);
			max-width: 900px;
			margin: 0 auto;
			height: calc(100% - 110px) !important;
			background-color: var(--background);
		}

		.editor-statusbar {
			padding: var(--space-xs) var(--space-md);
		}
	}
}

// Rich text upload info
.richtext-upload-info {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--text-500);
	font-size: var(--small);
	padding: 6px var(--space-sm);
	background-color: var(--transp-05);
	border-radius: 0 0 var(--border05) var(--border05);
	border-left: 1px solid var(--transp-1);
	border-right: 1px solid var(--transp-1);
	border-bottom: 1px solid var(--transp-1);

	&::before {
		content: "🖼️";
		font-size: 1.1em;
	}
}

// Image upload styling
.editor-upload-progress {
	padding: 0.5rem 1rem;
	background-color: var(--info-light);
	border-radius: var(--border05);
	color: var(--info);
	display: flex;
	align-items: center;
	margin-bottom: 0.5rem;

	progress {
		flex: 1;
		margin: 0 1rem;
		height: 6px;
		border-radius: 3px;
		border: none;
		background-color: var(--transp-2);
		color: var(--accent);

		&::-webkit-progress-bar {
			background-color: var(--transp-2);
			border-radius: 3px;
		}

		&::-webkit-progress-value {
			background-color: var(--accent);
			border-radius: 3px;
		}

		&::-moz-progress-bar {
			background-color: var(--accent);
			border-radius: 3px;
		}
	}
}
