/*
 * The WordPress editor, dressed as a GoodMeet field.
 *
 * Stock wp-admin chrome (square corners, grey title strip, blue tabs) reads as
 * another interface pasted into the form. Everything here measures the same
 * editor against the rest of the meeting form: a 12px frame, slate hairlines,
 * the brand ring on focus, and Visual / Code as the same segmented control the
 * other two-way choices use.
 *
 * Scoped to .gmt-wpeditor. The !important flags are there because wp-admin,
 * editor.css and the TinyMCE skin are all loaded in an order we do not own.
 */

$gmt-ed-brand: #085df2;
$gmt-ed-line: #cbd5e1;
$gmt-ed-hair: #eef2f6;
$gmt-ed-ink: #0f172a;
$gmt-ed-muted: #475569;
$gmt-ed-ease: cubic-bezier(0.2, 0, 0, 1);

.gmt-wpeditor {
	width: 100%;
	font-family: inherit;

	/* The frame hugs the editor so it follows a sideways resize; the Code tab
	   has no sized panel, so it takes the full row. */
	.wp-editor-wrap {
		position: relative;
		display: inline-block !important;
		width: auto !important;
		max-width: 100%;
		vertical-align: top;
		box-sizing: border-box;
		border: 1px solid $gmt-ed-line !important;
		border-radius: 12px !important;
		background: #fff !important;
		overflow: hidden;
		transition: border-color 150ms $gmt-ed-ease, box-shadow 150ms $gmt-ed-ease;

		&:hover {
			border-color: #94a3b8 !important;
		}

		&:focus-within {
			border-color: $gmt-ed-brand !important;
			box-shadow: 0 0 0 3px rgba(8, 93, 242, 0.12) !important;
		}
	}

	/*
	 * Top strip: Add media left, Visual / Code right.
	 *
	 * Floats, not flex: core renders the editor body as a child of
	 * .wp-editor-tools, so a flex row would put the whole editor beside the
	 * buttons. The body clears the floats and pulls itself out to the frame's
	 * edges, painting white over the strip's grey below the buttons.
	 */
	.wp-editor-tools {
		display: block !important;
		float: none !important;
		width: auto !important;
		min-height: 0 !important;
		padding: 8px 10px 0 !important;
		background: #f8fafc !important;
		box-sizing: border-box;
	}

	.wp-media-buttons {
		float: left !important;
		display: flex;
		align-items: center;
		min-height: 32px;
		margin: 0 !important;

		.button {
			display: inline-flex !important;
			align-items: center;
			gap: 6px;
			height: 30px !important;
			min-height: 0 !important;
			margin: 0 !important;
			padding: 0 11px !important;
			border: 0 !important;
			border-radius: 8px !important;
			background: #fff !important;
			color: #334155 !important;
			font-size: 12.5px !important;
			font-weight: 600 !important;
			line-height: 1 !important;
			box-shadow: inset 0 0 0 1px #e2e8f0, 0 1px 1px rgba(15, 23, 42, 0.04) !important;
			text-shadow: none !important;
			cursor: pointer;
			transition: background-color 150ms $gmt-ed-ease, color 150ms $gmt-ed-ease;

			&:hover {
				background: #f1f5f9 !important;
				color: $gmt-ed-ink !important;
			}

			&:focus-visible {
				outline: 2px solid $gmt-ed-brand !important;
				outline-offset: 2px;
			}
		}

		.wp-media-buttons-icon {
			width: 16px !important;
			height: 16px !important;
			margin: 0 !important;
			vertical-align: middle;

			&::before {
				font-size: 16px !important;
				line-height: 16px !important;
				color: #64748b;
			}
		}
	}

	.wp-editor-tabs {
		float: right !important;
		display: inline-flex !important;
		gap: 2px;
		margin: 0 !important;
		padding: 3px !important;
		border-radius: 10px;
		background: #eef2f6;
	}

	.wp-switch-editor {
		float: none !important;
		height: 26px !important;
		margin: 0 !important;
		padding: 0 12px !important;
		border: 0 !important;
		border-radius: 7px !important;
		background: transparent !important;
		color: #64748b !important;
		font-size: 12.5px !important;
		font-weight: 600 !important;
		line-height: 26px !important;
		cursor: pointer;
		transition: background-color 150ms $gmt-ed-ease, color 150ms $gmt-ed-ease;

		&:hover {
			color: $gmt-ed-ink !important;
		}

		&:focus-visible {
			outline: 2px solid $gmt-ed-brand !important;
			outline-offset: 1px;
		}
	}

	.tmce-active .switch-tmce,
	.html-active .switch-html {
		background: #fff !important;
		color: $gmt-ed-brand !important;
		box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
	}

	/* ---- body ---- */

	.wp-editor-container {
		clear: both !important;
		margin: 8px -10px 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-top: 1px solid $gmt-ed-hair !important;
		background: #fff !important;
	}

	.mce-tinymce.mce-panel {
		border: 0 !important;
		box-shadow: none !important;
		background: #fff !important;
	}

	.mce-top-part::before {
		display: none !important;
	}

	.mce-toolbar-grp {
		padding: 6px 8px !important;
		border-bottom: 1px solid $gmt-ed-hair !important;
		background: #fff !important;

		> div {
			padding: 0 !important;
		}

		.mce-toolbar + .mce-toolbar {
			margin-top: 4px !important;
		}
	}

	.mce-toolbar .mce-container-body {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		row-gap: 4px;
	}

	.mce-toolbar .mce-btn-group {
		display: inline-flex !important;
		align-items: center;
		gap: 1px;
		padding: 0 6px !important;
		margin: 0 !important;
		border: 0 !important;

		&:not(:first-child) {
			border-left: 1px solid #e2e8f0 !important;
		}

		&:first-child {
			padding-left: 0 !important;
		}

		.mce-container-body {
			display: inline-flex;
			gap: 1px;
		}
	}

	.mce-toolbar .mce-btn {
		margin: 0 !important;
		border: 0 !important;
		border-radius: 7px !important;
		background: transparent !important;
		box-shadow: none !important;
		transition: background-color 120ms $gmt-ed-ease;

		button {
			height: 30px;
			min-width: 30px;
			padding: 0 5px !important;
			color: $gmt-ed-muted !important;
			text-shadow: none !important;
		}

		.mce-ico {
			color: $gmt-ed-muted !important;
		}

		&:hover {
			background: #f1f5f9 !important;

			.mce-ico {
				color: $gmt-ed-ink !important;
			}
		}

		&.mce-active,
		&.mce-active:hover {
			background: rgba(8, 93, 242, 0.1) !important;

			.mce-ico,
			button {
				color: $gmt-ed-brand !important;
			}
		}

		&.mce-disabled .mce-ico {
			opacity: 0.35;
		}

		&:focus,
		&.mce-focus {
			box-shadow: inset 0 0 0 2px rgba(8, 93, 242, 0.35) !important;
			background: #fff !important;
		}
	}

	/* Paragraph / heading picker, drawn as a small select. */
	.mce-toolbar .mce-listbox {
		margin-right: 2px !important;
		border-radius: 8px !important;
		background: #fff !important;
		box-shadow: inset 0 0 0 1px #e2e8f0 !important;

		button {
			height: 30px;
			padding: 0 26px 0 10px !important;
			color: #334155 !important;
		}

		.mce-txt {
			font-size: 12.5px !important;
			font-weight: 600 !important;
			color: #334155 !important;
		}

		.mce-caret {
			right: 9px !important;
			border-top-color: #64748b !important;
		}

		&:hover {
			background: #f8fafc !important;
			box-shadow: inset 0 0 0 1px $gmt-ed-line !important;
		}
	}

	.mce-toolbar .mce-colorbutton {
		.mce-preview {
			left: 7px !important;
			bottom: 5px !important;
			width: 16px !important;
			height: 3px !important;
			margin: 0 !important;
			border-radius: 2px;
		}

		.mce-open {
			border: 0 !important;
			padding-left: 2px !important;
		}
	}

	.mce-edit-area {
		border: 0 !important;

		iframe {
			display: block;
		}
	}

	/*
	 * The resize grip, without the grey bar it normally sits in: the status
	 * bar floats over the field's bottom-right corner and shows only the
	 * diagonal lines people already know to drag.
	 */
	.wp-editor-wrap.html-active {
		display: block !important;
		width: 100% !important;
	}

	.mce-tinymce {
		position: relative;
		max-width: 100%;
	}

	.mce-statusbar {
		position: absolute !important;
		right: 0;
		bottom: 0;
		left: auto !important;
		width: 18px !important;
		height: 18px !important;
		border: 0 !important;
		background: transparent !important;

		/* TinyMCE makes this a positioned box; left alone, the grip is placed
		   against it instead of the panel's corner. */
		.mce-container-body {
			position: static !important;
			height: 0 !important;
			padding: 0 !important;
		}

		.mce-path,
		.mce-wordcount {
			display: none !important;
		}
	}

	.mce-resizehandle {
		position: absolute !important;
		top: auto !important;
		left: auto !important;
		right: 3px !important;
		bottom: 3px !important;
		width: 11px !important;
		height: 11px !important;
		margin: 0 !important;
		padding: 0 !important;
		cursor: nwse-resize !important;
		background:
			linear-gradient(135deg, transparent 0 45%, #94a3b8 45% 52%, transparent 52% 70%, #94a3b8 70% 77%, transparent 77%) !important;
		opacity: 0.8;
		transition: opacity 150ms $gmt-ed-ease;

		i {
			display: none !important;
		}

		&:hover {
			opacity: 1;
			background:
				linear-gradient(135deg, transparent 0 45%, #{$gmt-ed-brand} 45% 52%, transparent 52% 70%, #{$gmt-ed-brand} 70% 77%, transparent 77%) !important;
		}
	}

	/* ---- Code tab ---- */

	.tmce-active .quicktags-toolbar {
		display: none !important;
	}

	.html-active .quicktags-toolbar {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		padding: 7px 10px !important;
		border: 0 !important;
		border-bottom: 1px solid $gmt-ed-hair !important;
		background: #fff !important;

		input.button.button-small {
			height: 28px !important;
			min-height: 0 !important;
			margin: 0 !important;
			padding: 0 10px !important;
			border: 0 !important;
			border-radius: 7px !important;
			background: #f8fafc !important;
			color: $gmt-ed-muted !important;
			font-size: 12px !important;
			font-weight: 600 !important;
			line-height: 28px !important;
			box-shadow: inset 0 0 0 1px #e2e8f0 !important;
			cursor: pointer;

			&:hover {
				background: #f1f5f9 !important;
				color: $gmt-ed-ink !important;
			}
		}
	}

	textarea.wp-editor-area {
		display: block;
		width: 100% !important;
		min-height: 220px;
		margin: 0 !important;
		padding: 14px 18px !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: #fff !important;
		color: $gmt-ed-ink !important;
		font: 13px/1.7 ui-monospace, SFMono-Regular, Consolas, Menlo, monospace !important;
		box-shadow: none !important;
		outline: none !important;
		resize: vertical;
		box-sizing: border-box;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gmt-wpeditor * {
		transition: none !important;
	}
}