// Shared editor rules for token-based themes.
//
// `.jui-editor()` styles the editor, popups, menus, form fields and dialogs
// from the `--ui-*` custom properties a theme sets in the same block. It is
// a mixin (no CSS of its own): every theme calls it inside its
// `:is(.jodit_theme_<name>, .jodit-dialog_theme_<name>, .jodit-file-browser-pro_theme_<name>)`
// block, see themes/<name>/<name>.editor.less.
//
// Jodit names its custom properties `--jd-*` in the built CSS, so the mixin
// maps the theme tokens onto those names.

.jui-editor() {
	--jd-color-border: var(--ui-line);
	--jd-color-separator: var(--ui-line);
	--jd-color-panel: var(--ui-surface);
	--jd-color-text: var(--ui-text);
	--jd-color-text-icons: var(--ui-icon);
	--jd-color-icon: var(--ui-icon);
	--jd-color-label: var(--ui-muted);
	--jd-color-placeholder: var(--ui-muted);
	--jd-color-white: var(--ui-field-bg);
	--jd-color-gray: var(--ui-field-border);
	--jd-color-background-default: var(--ui-surface);
	--jd-color-background-light-gray: var(--ui-surface-alt);
	--jd-color-background-gray: var(--ui-surface-alt);
	--jd-color-background-gray-hover: var(--ui-hover-bg);
	--jd-color-background-button-hover: var(--ui-hover-bg);
	--jd-color-button-background-hover: var(--ui-hover-bg);
	--jd-color-button-background-hover-opacity40: var(--ui-pressed-bg);
	--jd-color-button-background-hover-opacity60: var(--ui-pressed-hover-bg);
	--jd-color-background-selection: var(--ui-selection);
	--jd-border-radius-default: var(--ui-btn-radius);
	--jd-font-default: var(--ui-font);
	--jd-font-size-default: var(--ui-font-size);

	// Toolbar: one surface instead of the default ruled rows
	.jodit-toolbar__box:not(:empty) {
		border-bottom-color: var(--ui-toolbar-border);
		background: var(--ui-toolbar-bg);

		.jodit-toolbar-editor-collection::after {
			display: none;
		}
	}

	.jodit-toolbar-collection,
	.jodit-toolbar-editor-collection {
		&_mode_horizontal {
			background-image: none;
		}
	}

	.jodit-ui-separator,
	.jodit-ui-group_separated_true:not(
			:last-child,
			.jodit-ui-group_before-spacer_true
		)::after {
		border-right-color: var(--ui-line);
	}

	.jodit-ui-break {
		border-top-color: transparent;
	}

	// Toolbar and menu buttons
	.jodit-toolbar-button,
	.jodit-toolbar-select,
	.jodit-ui-button {
		border-radius: var(--ui-btn-radius);
		color: var(--ui-icon);

		svg,
		.jodit-icon {
			fill: var(--ui-icon);
		}

		&__text {
			color: var(--ui-text);
		}
	}

	.jodit-toolbar-button:hover:not([disabled]),
	.jodit-toolbar-select:hover:not([disabled]) {
		border-color: var(--ui-hover-border);
	}

	.jodit-toolbar-button:has(> [aria-pressed='true']:not([disabled])) {
		border-color: var(--ui-pressed-border);
	}

	.jodit-toolbar-button__button,
	.jodit-toolbar-button__trigger,
	.jodit-toolbar-select__button,
	.jodit-toolbar-select__trigger,
	.jodit-ui-button:not([class*='_variant_']),
	.jodit-ui-button_variant_initial {
		&:hover:not([disabled]),
		&:focus-visible:not([disabled]) {
			background: var(--ui-hover-bg);
		}

		&:active:not([disabled]),
		&[aria-pressed='true']:not([disabled]) {
			background: var(--ui-pressed-bg);

			svg {
				fill: var(--ui-pressed-icon);
			}
		}

		&[aria-pressed='true']:hover:not([disabled]) {
			background: var(--ui-pressed-hover-bg);
		}
	}

	.jodit-toolbar-button__button {
		border-radius: var(--ui-btn-radius);
	}

	.jodit-toolbar-button_with-trigger_true {
		.jodit-toolbar-button__button {
			border-radius: var(--ui-btn-radius) 0 0 var(--ui-btn-radius);
		}

		.jodit-toolbar-button__trigger {
			border-radius: 0 var(--ui-btn-radius) var(--ui-btn-radius) 0;
		}

		&:hover:not([disabled]) .jodit-toolbar-button__trigger {
			opacity: 1;
		}
	}

	.jodit-toolbar-button:focus-visible,
	.jodit-toolbar-button__button:focus-visible {
		outline: 2px solid var(--ui-accent);
		outline-offset: -2px;
	}

	// Tabs (image and link popups): Jodit paints the active label separately
	.jodit-tabs .jodit-tabs__buttons .jodit-ui-button {
		&:active:not([disabled]),
		&[aria-pressed='true']:not([disabled]) {
			.jodit-ui-button__text {
				background: transparent;
			}
		}
	}

	// Push buttons in dialogs and forms
	.jodit-dialog__footer .jodit-ui-button,
	.jodit-ui-button_variant_default,
	.jodit-ui-button_variant_secondary {
		border: 1px solid var(--ui-push-border);
		border-radius: var(--ui-push-radius);
		background: var(--ui-push-bg);
		box-shadow: var(--ui-push-shadow);
		color: var(--ui-push-text);

		svg {
			fill: var(--ui-push-text);
			stroke: var(--ui-push-text);
		}

		.jodit-ui-button__text {
			color: var(--ui-push-text);
		}

		&:focus-visible:not([disabled]) {
			background: var(--ui-push-bg);
		}

		&:hover:not([disabled]) {
			border-color: var(--ui-push-hover-border);
			background: var(--ui-push-hover-bg);
			color: var(--ui-push-text);
		}

		&:active:not([disabled]),
		&[aria-pressed='true']:not([disabled]) {
			background: var(--ui-push-active-bg);
			color: var(--ui-push-text);
		}

		&:focus:not([disabled]) {
			outline: 2px solid var(--ui-accent);
			outline-offset: 1px;
		}
	}

	.jodit-ui-button_variant_primary {
		border: 1px solid var(--ui-primary-border);
		border-radius: var(--ui-push-radius);
		background: var(--ui-primary-bg);
		color: var(--ui-primary-text);

		svg {
			fill: var(--ui-primary-text);
			stroke: var(--ui-primary-text);
		}

		.jodit-ui-button__text {
			color: var(--ui-primary-text);
		}

		&:hover:not([disabled]),
		&:active:not([disabled]),
		&:focus-visible:not([disabled]) {
			border-color: var(--ui-primary-hover-bg);
			background: var(--ui-primary-hover-bg);
			color: var(--ui-primary-text);
		}
	}

	// Editing surface
	&.jodit-container {
		border-color: var(--ui-frame);
		border-radius: var(--ui-radius);
		background-color: var(--ui-content-bg);
	}

	&.jodit-container:not(.jodit_inline) .jodit-workplace {
		border-color: var(--ui-content-bg);
	}

	&.jodit-container .jodit-toolbar__box:not(:empty) {
		border-radius: var(--ui-radius) var(--ui-radius) 0 0;
	}

	.jodit-wysiwyg,
	.jodit-wysiwyg_iframe {
		background-color: var(--ui-content-bg);
		color: var(--ui-content-text);
	}

	.jodit-wysiwyg a {
		color: var(--ui-link);
	}

	.jodit-placeholder {
		color: var(--ui-muted);
	}

	// Status bar
	.jodit-status-bar {
		height: 24px;
		border-radius: 0 0 var(--ui-radius) var(--ui-radius);
		background: var(--ui-status-bg);
		color: var(--ui-status-text);
		text-transform: none;

		&:not(:empty) {
			border-top-color: var(--ui-toolbar-border);
		}

		&,
		.jodit-status-bar__item,
		.jodit-status-bar__item > span,
		.jodit-status-bar__item a,
		a.jodit-status-bar-link {
			&,
			&:hover,
			&:visited {
				color: var(--ui-status-text);
			}
		}

		.jodit-status-bar__item a:hover {
			background: var(--ui-hover-bg);
		}
	}

	// Popups and menus
	&.jodit-popup,
	&.jodit-context-menu {
		overflow: hidden;
		border: 1px solid var(--ui-menu-border);
		border-radius: var(--ui-menu-radius);
		box-shadow: var(--ui-menu-shadow);
	}

	&.jodit-popup .jodit-popup__content,
	&.jodit-context-menu,
	&.jodit-context-menu [class*='__content'] {
		background: var(--ui-menu-bg);
		color: var(--ui-text);
	}

	.jodit-toolbar-collection_mode_vertical,
	.jodit-toolbar-editor-collection_mode_vertical {
		.jodit-toolbar-button {
			border-color: transparent;
		}

		.jodit-toolbar-button__button {
			&:hover:not([disabled]) {
				background: var(--ui-menu-hover-bg);

				.jodit-toolbar-button__text {
					color: var(--ui-menu-hover-text);
				}

				svg {
					fill: var(--ui-menu-hover-text);
				}
			}

			&[aria-pressed='true']:not([disabled]) {
				background: var(--ui-pressed-bg);
			}
		}
	}

	&.jodit-context-menu .jodit-ui-button:hover:not([disabled]) {
		background: var(--ui-menu-hover-bg);

		.jodit-ui-button__text {
			color: var(--ui-menu-hover-text);
		}

		svg {
			fill: var(--ui-menu-hover-text);
		}
	}

	// Form fields
	.jodit-input,
	.jodit-select,
	.jodit-ui-input__wrapper,
	.jodit-ui-select__wrapper,
	.jodit-ui-text-area__wrapper,
	.jodit-form input[type='text'],
	.jodit-form input[type='url'],
	.jodit-form textarea {
		border-color: var(--ui-field-border);
		border-radius: var(--ui-field-radius);
		background-color: var(--ui-field-bg);
		color: var(--ui-field-text);

		&:hover {
			border-color: var(--ui-field-hover-border);
		}

		&:focus,
		&:focus-within {
			border-color: var(--ui-field-focus-border);
			box-shadow: var(--ui-field-focus-ring);
			outline: 0;
		}
	}

	.jodit-ui-input__input,
	.jodit-ui-select__input,
	.jodit-ui-text-area__input {
		background-color: transparent;
		color: var(--ui-field-text);
	}

	.jodit-ui-input__icon svg,
	.jodit-ui-input__clear svg {
		fill: var(--ui-muted);
	}

	.jodit-drag-and-drop__file-box,
	.jodit_uploadfile_button {
		border-radius: var(--ui-field-radius);
		color: var(--ui-text);
	}

	// Dialog window
	&.jodit-dialog {
		.jodit-dialog__panel {
			overflow: hidden;
			border: 1px solid var(--ui-dialog-border);
			border-radius: var(--ui-dialog-radius);
			background-color: var(--ui-surface);
			box-shadow: var(--ui-shadow);
			color: var(--ui-text);
		}

		.jodit-dialog__header {
			min-height: 36px;
			border-bottom-color: var(--ui-dialog-header-border);
			background: var(--ui-dialog-header-bg);
		}

		.jodit-dialog__header-title {
			color: var(--ui-dialog-title);
			font-size: var(--ui-dialog-title-size);
			font-weight: var(--ui-dialog-title-weight);
		}

		.jodit-dialog__header-toolbar [class*='_close'] .jodit-toolbar-button__button:hover:not([disabled]) {
			background: var(--ui-close-hover-bg);

			svg {
				fill: var(--ui-close-hover-icon);
				stroke: var(--ui-close-hover-icon);
			}
		}

		.jodit-dialog__content {
			color: var(--ui-text);
		}

		.jodit-dialog__footer {
			border-top: 1px solid var(--ui-dialog-header-border);
			background: var(--ui-dialog-footer-bg);
		}
	}
}