/* stylelint-disable scss/no-dollar-variables */
/* stylelint-disable mavrin/stylelint-declaration-use-css-custom-properties */
/* stylelint-disable no-duplicate-selectors */
@use 'mixin:clickable.scss';
@use 'mixin:input.scss';

// styles for TinyMCE and ProseMirror editors

// Editors: shared styles
.editor {
	--ironsworn-editor-height-min: 100px;

	min-height: var(--ironsworn-editor-height-min);
}

.editor {
	border: var(--ironsworn-border-width-md) solid
		var(--ironsworn-color-input-border);
	background: var(--ironsworn-color-input-bg);
	caret-color: var(--ironsworn-color-fg-highlight);
}

.tab .editor {
	border-top-width: 0;
	border-radius: 0 0 var(--ironsworn-border-radius-lg)
		var(--ironsworn-border-radius-lg);
}

.editor-edit {
	@include clickable.block;

	border-radius: var(--ironsworn-border-radius-md);
	border-color: var(--ironsworn-color-midtone-50);
	background: var(--ironsworn-color-midtone-30);
}

// Editor custom select elements
.prosemirror button,
.tox .tox-tbtn--bespoke {
	@include clickable.block;

	border-radius: var(--ironsworn-border-radius-md);
}

// Editors: ProseMirror

.ProseMirror {
	@include input.field;

	padding: var(--ironsworn-spacer-lg);
}

// Editors: TinyMCE
.tox-tinymce {
	border: 0;
	border-radius: 0;
}

.tox {
	font-family: var(--font-primary);

	&:not(.tox-tinymce-inline) .tox-editor-header {
		justify-content: center;
		border-bottom: var(--ironsworn-border-width-md) solid
			var(--ironsworn-color-border-muted);
	}

	:not(svg, rect) {
		color: currentcolor;
	}

	.tox-toolbar__primary {
		justify-content: center;

		& > .tox-toolbar__group {
			padding: 0 var(--ironsworn-spacer-md);
		}
	}

	.tox-tbtn .tox-toolbar-overlord,
	.tox-toolbar__primary,
	&:not(.tox-tinymce-inline) .tox-editor-header {
		background: var(--ironsworn-color-bg);
		color: var(--ironsworn-color-fg);
	}

	.tox-tbtn {
		transition: var(--ironsworn-transition);
		border-width: var(--ironsworn-border-width-md);
		border-style: solid;
		border-color: transparent;
		background: var(--ironsworn-color-clickable-block-bg);
		color: var(--ironsworn-color-clickable-block-fg);

		&:focus {
			border-width: var(--ironsworn-border-width-md);
			border-style: solid;
			background: var(--ironsworn-color-clickable-block-bg);
			color: var(--ironsworn-color-clickable-block-fg);

			&:not(.tox-tbtn--disabled) {
				color: var(--ironsworn-color-clickable-block-fg);

				svg {
					fill: currentcolor;
				}
			}
		}

		&:hover {
			border-width: var(--ironsworn-border-width-md);
			border-style: solid;
			border-color: var(--ironsworn-color-clickable-block-border-hover);
			background: var(--ironsworn-color-clickable-block-bg-hover);
			color: var(--ironsworn-color-clickable-block-fg-hover);

			svg {
				fill: currentcolor;
			}
		}

		svg {
			fill: currentcolor;
		}

		&[aria-pressed='true'] {
			background: var(--ironsworn-color-clickable-block-bg-selected);
			color: var(--ironsworn-color-clickable-block-fg-selected);

			svg {
				fill: currentcolor;
			}
		}
	}

	.tox-tbtn--select {
		@include input.field;

		text-shadow: none;
	}

	.tox-collection--list {
		.tox-collection__item--active {
			background: var(--ironsworn-color-clickable-block-bg-hover);
		}
	}
}

// DROPDOWN MENU

// Menu

// Root variables
// from https://github.com/tinymce/tinymce/blob/develop/modules/oxide/src/scss/theme/globals/global-variables.scss
// Begin customization by changing these variables as most other variables are derivatives of these.
$background-color: var(--ironsworn-color-input-bg);
$base-value: 16px;
$color-black: #000;
$color-tint: #006ce7;
$color-white: var(--ironsworn-color-light);
$color-error: #c00;
$color-success: #78ab46;
$font-stack: var(--font-primary);

// Content;

$content-ui-darkmode: false; // Change this to true to get white icons in the content such as bookmarks.

// Colors
$border-color: transparent;
$text-color: var(--ironsworn-color-fg);
$text-color-muted: var(--ironsworn-color-fg-muted);

// Some useful generic variables

$menu-background-color: var(--ironsworn-color-midtone-10);
$menu-border-color: var(--ironsworn-color-input-border);
$menu-box-shadow: 0 0 2px 0 rgba($color-black, 20%),
	0 4px 8px 0 rgba($color-black, 15%);

.tox {
	.tox-menu {
		border: var(--ironsworn-border-width-md) solid $menu-border-color;
		box-shadow: $menu-box-shadow;
		background: $menu-background-color;
	}
}

// LIST
// Collection
// A list of items that can be arranged as vertical list, horizontal toolbar or a grid.

$collection-item-separator-color: var(--ironsworn-color-border-muted);
$collection-item-label-text-color: var(--ironsworn-color-fg);
$collection-item-label-disabled-text-color: var(--ironsworn-color-fg-50);
$toolbar-button-hover-background-color: var(
	--ironsworn-color-clickable-block-bg-hover
);
$collection-list-item-active-background-color: var(
	--ironsworn-color-clickable-block-bg-hover
);
$collection-list-item-label-active-text-color: var(
	--ironsworn-color-clickable-block-fg-hover
);
$collection-list-item-enabled-background-color: $menu-background-color;
$collection-list-item-label-enabled-text-color: var(
	--ironsworn-color-clickable-block-fg
);
$collection-toolbar-item-active-background-color: var(
	--ironsworn-color-clickable-block-bg-hover
);
$collection-toolbar-item-label-active-text-color: var(
	--ironsworn-color-clickable-block-fg-selected
);
$toolbar-button-enabled-background-color: var(
	--ironsworn-color-clickable-block-bg
);
$collection-toolbar-item-enabled-background-color: $toolbar-button-enabled-background-color;
$collection-toolbar-item-label-enabled-text-color: var(
	--ironsworn-color-clickable-block-fg
);
$collection-grid-item-active-background-color: var(
	--ironsworn-color-clickable-block-bg-hover
);
$collection-grid-item-label-active-text-color: var(
	--ironsworn-color-clickable-block-fg-hover
);
$collection-grid-item-enabled-background-color: $toolbar-button-enabled-background-color;
$collection-grid-item-label-enabled-text-color: var(
	--ironsworn-color-clickable-block-fg
);
$collection-group-label-background-color: var(--ironsworn-color-bg-20);
$collection-group-label-text-color: var(--ironsworn-color-fg-muted);

.tox {
	.tox-collection--list .tox-collection__group {
		border-width: var(--ironsworn-border-width-md) 0 0;
		border-style: solid;
		border-color: $collection-item-separator-color;

		&:first-child {
			border-top-width: 0;
		}
	}

	// Group headings should only be used on collection lists.
	.tox-collection__group-heading {
		background: $collection-group-label-background-color;
		color: $collection-group-label-text-color;
	}

	.tox-collection__item {
		transition: var(--ironsworn-transition);
		color: $collection-item-label-text-color;
	}

	// Note: Ensure "enabled" is before "active", as active styles should have a higher precedence
	.tox-collection--list .tox-collection__item--enabled {
		background: $collection-list-item-enabled-background-color;
		color: $collection-list-item-label-enabled-text-color;
	}

	.tox-collection--list .tox-collection__item--active {
		background: $collection-list-item-active-background-color;
	}

	.tox-collection--toolbar .tox-collection__item--enabled {
		background: $collection-toolbar-item-enabled-background-color;
		color: $collection-toolbar-item-label-enabled-text-color;
	}

	.tox-collection--toolbar .tox-collection__item--active {
		background: $collection-toolbar-item-active-background-color;
	}

	.tox-collection--grid .tox-collection__item--enabled {
		background: $collection-grid-item-enabled-background-color;
		color: $collection-grid-item-label-enabled-text-color;
	}

	.tox-collection--grid
		.tox-collection__item--active:not(.tox-collection__item--state-disabled) {
		background: $collection-grid-item-active-background-color;
		color: $collection-grid-item-label-active-text-color;
	}

	.tox-collection--list
		.tox-collection__item--active:not(.tox-collection__item--state-disabled) {
		color: $collection-list-item-label-active-text-color;
	}

	.tox-collection--toolbar
		.tox-collection__item--active:not(.tox-collection__item--state-disabled) {
		color: $collection-toolbar-item-label-active-text-color;
	}

	.tox-collection__item-icon,
	.tox-collection__item-checkmark {
		svg {
			fill: currentcolor;
		}
	}

	.tox-collection__item-label {
		color: currentcolor;
	}

	.tox-collection__item-accessory {
		color: $text-color-muted;
	}

	.tox-collection__item-caret {
		svg {
			fill: currentcolor;
		}
	}

	// Disabled item
	.tox-collection__item--state-disabled {
		background: transparent !important;
		color: $collection-item-label-disabled-text-color;

		.tox-collection__item-caret svg {
			fill: currentcolor;
		}
	}

	.tox-collection--horizontal {
		border: var(--ironsworn-border-width-md) solid
			$collection-item-separator-color;
		background: $menu-background-color;
	}
}

$toolbar-group-separator-color: var(--ironsworn-color-border-muted);

.tox:not([dir='rtl']) {
	.tox-collection--horizontal .tox-collection__group:not(:last-of-type) {
		border-right: var(--ironsworn-border-width-md) solid
			$toolbar-group-separator-color;
	}
}

// RTL
.tox[dir='rtl'] {
	.tox-collection--horizontal .tox-collection__group:not(:last-of-type) {
		border-left: var(--ironsworn-border-width-md) solid
			$toolbar-group-separator-color;
	}
}
