/*
 * The rich-text editor at the surrounding form's scale, rather than its own.
 *
 * HugeRTE ships oxide, a complete design language with no relationship to Bootstrap or Tabler, and
 * it is simply bigger. Measured against Tabler on the same page:
 *
 *     .tox font-size        16px   vs  Tabler's 14px body
 *     toolbar icon          24px   vs  Tabler's .icon at 1.25rem / 20px
 *     toolbar button        34x28
 *     .tox font-family      -apple-system stack, ignoring Inter entirely
 *
 * So an editor dropped into a Tabler form reads as a control from a different application. Nothing
 * here is a defect in oxide; it is two scales meeting, and this picks the page's.
 *
 * SPECIFICITY RATHER THAN SOURCE ORDER.
 *
 * Every other corrections sheet here can rely on order - TomSelectCorrectionsCssReference declares
 * the skin as its dependency, so Wicket guarantees the skin loads first and the correction second.
 * This one used to be unable to: HugeRTE injected its skin from JavaScript, after everything Wicket
 * rendered. The skin is now a Wicket header item (HugeRteSkinReference, rendered by
 * RichTextBehavior), but it is contributed by a component and this sheet by the theme, and nothing
 * orders the two. So the doubled class stays. Oxide writes `.tox .tox-tbtn`, specificity (0,2,0);
 * `.tox.tox-hugerte .tox-tbtn` is (0,3,0) and wins wherever it sits. Keep that shape when adding a
 * rule, and do not "simplify" it back to a single class - the result would render correctly in a
 * test that checks the bytes and wrongly in a browser.
 *
 * The properties below are this library's own, declared so an application can retune the scale
 * without restating these selectors.
 */
/*
 * The editor's colors, which are Bootstrap's tokens, mapped onto Tabler's.
 *
 * wicket-bootstrap5 serves HugeRTE's skin rewritten so every color is the --bs-* token it plays the
 * role of (HugeRteSkinReference, issue #84): that is what lets the editor follow a theme at all,
 * since the shipped skin hardcodes a navy palette. Tabler declares none of --bs-*, so without this
 * block every one of them is undefined and the editor renders colorless. The same bridge
 * tabler-tom-select-corrections.css carries for Tom Select's skin, and for the same reason.
 *
 * On .tox rather than .tox-hugerte, because HugeRTE renders its menus and dialogs in a separate
 * .tox.tox-silver-sink appended to <body>, outside the editor, and they need the tokens too. The
 * names are exactly the ones the rewritten sheets read; TablerEditorAliasTest keeps it that way.
 */
.tox {
	--bs-body-bg: var(--tblr-bg-forms);
	--bs-body-color: var(--tblr-body-color);
	--bs-emphasis-color: var(--tblr-emphasis-color);
	--bs-secondary-color: var(--tblr-secondary-color);
	--bs-secondary-bg: var(--tblr-secondary-bg);
	--bs-tertiary-bg: var(--tblr-tertiary-bg);
	--bs-border-color: var(--tblr-border-color);
	--bs-border-color-translucent: var(--tblr-border-color-translucent);
	--bs-primary: var(--tblr-primary);
	--bs-link-color: var(--tblr-link-color);
	--bs-link-hover-color: var(--tblr-link-hover-color);
	--bs-danger: var(--tblr-danger);
	--bs-success-bg-subtle: var(--tblr-success-bg-subtle);
	--bs-success-border-subtle: var(--tblr-success-border-subtle);
	--bs-success-text-emphasis: var(--tblr-success-text-emphasis);
	--bs-danger-bg-subtle: var(--tblr-danger-bg-subtle);
	--bs-danger-border-subtle: var(--tblr-danger-border-subtle);
	--bs-danger-text-emphasis: var(--tblr-danger-text-emphasis);
	--bs-warning-bg-subtle: var(--tblr-warning-bg-subtle);
	--bs-warning-border-subtle: var(--tblr-warning-border-subtle);
	--bs-warning-text-emphasis: var(--tblr-warning-text-emphasis);
	--bs-info-bg-subtle: var(--tblr-info-bg-subtle);
	--bs-info-border-subtle: var(--tblr-info-border-subtle);
	--bs-info-text-emphasis: var(--tblr-info-text-emphasis);
}

/*
 * Menus and dialogs float over the page, so they take Tabler's surface color rather than the form
 * background the editor itself sits on - the same call tabler-tom-select-corrections.css makes for
 * the Tom Select dropdown. The two differ only in dark mode.
 */
.tox.tox-silver-sink {
	--bs-body-bg: var(--tblr-bg-surface);
}

.tox.tox-hugerte {
	--bs5-editor-font-size: 0.875rem;
	--bs5-editor-icon-size: 1.25rem;
	--bs5-editor-button-height: 1.75rem;
	--bs5-editor-button-width: 2rem;

	/* Inherit, so the editor follows whatever the page set rather than naming a font of its own. */
	font-family: inherit;
	font-size: var(--bs5-editor-font-size);
}

.tox.tox-hugerte .tox-tbtn {
	height: var(--bs5-editor-button-height);
	width: var(--bs5-editor-button-width);
	font-size: var(--bs5-editor-font-size);
}

/*
 * The icon carries most of the visual weight: oxide's is 24px inside a 28px button, which is what
 * makes the toolbar read as oversized beside Tabler's 20px glyphs.
 */
.tox.tox-hugerte .tox-tbtn svg {
	width: var(--bs5-editor-icon-size);
	height: var(--bs5-editor-icon-size);
}

/* The format dropdown is a button with a label, so it sizes from text rather than from the icon. */
.tox.tox-hugerte .tox-tbtn--select {
	width: auto;
	font-size: var(--bs5-editor-font-size);
}

/*
 * The rich-text editor taking the focus treatment every other control on the page has.
 *
 * Oxide does answer focus, just not where a Bootstrap form expects and not in a shape that matches
 * anything around it. It draws an overlay inside the edit area only:
 *
 *     .tox .tox-edit-area::before      { border: 2px solid #2D6ADF; border-radius: 4px; opacity: 0 }
 *     .tox.tox-edit-focus .tox-edit-area::before { opacity: 1 }
 *
 * so a hard two-pixel box appears around the text and stops below the toolbar, in oxide's own blue
 * (white in oxide-dark), while every other control on the form shifts its border and draws Tabler's
 * focus ring, an outline since 1.6:
 *
 *     .form-control:focus { border-color: color-mix(in oklab, var(--tblr-white) 50%, var(--tblr-primary));
 *                           --tblr-focus-ring-offset: -1px;
 *                           outline: var(--tblr-focus-ring-width) solid var(--tblr-focus-ring-color) }
 *
 * The ring goes on the container, because the container is the control - the toolbar belongs to the
 * field, and a highlight that excludes it reads as though only part of the widget were live. The
 * overlay is then suppressed rather than recolored: two concentric indicators of different shape,
 * hardness and inset on one control is noise, and matching its color would only make the pair
 * harder to read as one thing.
 *
 * The radius comes along with the ring. Oxide sets 10px against Tabler's 6px, and a ring follows the
 * radius of the element it surrounds, so leaving it would draw a visibly rounder ring than the one
 * on the field above. What is deliberately not matched is oxide's 2px border against Tabler's 1px:
 * that is resting appearance rather than the focus answer, and changing it is a look, not a fix.
 *
 * Note the focus border is named but NOT declared, unlike the scale properties at the top of this
 * file. A declaration on the element beats one inherited from an ancestor, so declaring it here
 * would mean an application setting its own accent on a wrapper had no effect and had to
 * out-specify a sheet the theme contributed. Naming it only at the point of use leaves any ancestor
 * declaration winning, with this as the fallback. The reveal control in
 * tabler-form-corrections.css carries the same shape for the same reason.
 *
 * The ring has no property of ours. Through Tabler 1.5 it was a box-shadow read from
 * --bs5-editor-focus-ring; since 1.6 Tabler's own ring is an outline built from
 * --tblr-focus-ring-width and --tblr-focus-ring-color, declared on :root, so an ancestor setting
 * that color re-tints the editor and every control beside it at once. The border fallback is
 * Tabler's own .form-control:focus expression rather than the rgb() literal 1.5 hardcoded, so it
 * follows the theme's primary too.
 */
.tox.tox-hugerte {
	border-radius: var(--tblr-border-radius);
	outline-color: transparent;
	transition: border-color .15s ease-in-out, outline-color .15s ease-in-out;
}

.tox.tox-hugerte.tox-edit-focus {
	border-color: var(--bs5-editor-focus-border, color-mix(in oklab, var(--tblr-white) 50%, var(--tblr-primary)));
	--tblr-focus-ring-offset: -1px;
	outline: var(--tblr-focus-ring, var(--tblr-focus-ring-width) solid var(--tblr-focus-ring-color));
	outline-offset: var(--tblr-focus-ring-offset);
}

.tox.tox-hugerte.tox-edit-focus .tox-edit-area::before {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.tox.tox-hugerte {
		transition: none;
	}
}