/*!
 * Jodit Editor (https://xdsoft.net/jodit/)
 * Released under MIT see LICENSE.txt in the project root for license information.
 * Copyright (c) 2013-2024 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
 */

@import (reference) '../variables';

.jodit-dialog_theme_dark,
.jodit_theme_dark {
	--color-border: #6b6b6b;
	--color-text: var(--dark-text-color);

	.jodit-toolbar-collection,
	.jodit-toolbar-editor-collection {
		&_mode_horizontal {
			background-image: repeating-linear-gradient(
				transparent 0,
				transparent calc(var(--button-size) - 1px),
				var(--color-border) var(--button-size)
			);

			&::after {
				background-color: var(--color-border);
			}
		}
	}

	.jodit-toolbar {
		&__box {
			&:not(:empty) {
				border-color: var(--color-border);

				.jodit-toolbar-editor-collection::after {
					background-color: var(--color-border);
				}
			}
		}
	}

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

	&.jodit-container {
		border-color: var(--color-border);
		background-color: var(--dark-background-color);
	}

	&.jodit-container.jodit_disabled {
		background-color: var(--dark-background-color);
	}

	&.jodit-container:not(.jodit_inline) .jodit-workplace {
		border-color: var(--dark-background-color);
	}

	.jodit-popup {
		&__content {
			background: var(--dark-background-color);
		}
	}

	.jodit-ui-button,
	.jodit-toolbar-select,
	.jodit-toolbar-button {
		--color-icon: var(--dark-icon-color);

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

		svg,
		&__trigger,
		.jodit-icon {
			fill: var(--color-icon);
			stroke: var(--color-icon);
		}

		&,
		&__text,
		&__button,
		&__trigger {
			&:hover:not([disabled]) {
				--color-text: var(--dark-background-color);
				--color-icon: var(--dark-background-color);
				background-color: var(--dark-background-ligher);
				color: var(--dark-background-color);
			}
		}
	}

	.jodit-workplace + .jodit-status-bar:not(:empty),
	.jodit-status-bar {
		border-color: var(--color-border);
		background-color: var(--dark-toolbar-color);
		color: var(--dark-text-color);

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

		&,
		.jodit-status-bar__item a,
		.jodit-status-bar__item span {
			color: var(--dark-text-color);
		}
	}

	// stylelint-disable-next-line
	.jodit-toolbar__box:not(:empty) {
		background: var(--dark-toolbar-color);
	}

	.jodit-icon-close {
		stroke: var(--dark-icon-color);
	}

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

	.jodit-form textarea,
	.jodit-form input[type='url'],
	.jodit-form input[type='text'] {
		border-color: var(--dark-toolbar-seperator-color2);
		background-color: var(--dark-toolbar-seperator-color1);
		color: var(--dark-text-color);
	}

	.jodit-form button {
		background-color: var(--dark-toolbar-seperator-color3);
		color: var(--dark-text-color);
	}

	.jodit-placeholder {
		color: var(--dark-text-color-opacity80);
	}

	.jodit-drag-and-drop__file-box,
	.jodit_uploadfile_button {
		color: var(--dark-text-color);

		&:hover {
			background-color: var(--dark-toolbar-seperator-color3);
		}
	}

	.jodit-add-new-line {
		&::before {
			border-top-color: var(--dark-toolbar-seperator-color2);
		}

		span {
			border-color: var(--dark-toolbar-seperator-color2);
			background: var(--dark-toolbar-seperator-color3);

			svg {
				fill: var(--dark-text-color);
			}
		}
	}

	.jodit-resizer > i {
		border-color: var(--dark-icon-color);
		background: var(--dark-toolbar-seperator-color3);
	}

	.jodit-select,
	.jodit-input {
		border-color: var(--dark-border-color);
		background-color: var(--dark-background-ligher);
		color: var(--dark-border-color);
	}

	&.jodit-dialog {
		background-color: var(--dark-background-color);

		.jodit-filebrowser__files.active .jodit-filebrowser__files-item,
		.jodit-dialog__header {
			border-color: var(--dark-border-color);
		}

		.jodit-filebrowser__files.active .jodit-filebrowser__files-item-info {
			background-color: var(--dark-text-color);
		}
	}
}
