@import 'mediawiki.skin.variables.less';
@import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui-mixin-dark.less';
@import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui-mixin-light.less';

/**
 * T365764 - OOUI Icon classes for inverted dark-mode icons.
 * This includes OOUI icons that are not colored (progressive/destructive), checkbox icons, and
 * indicator widgets.
 */
@OOUIIconSelectors: ~'.oo-ui-iconElement-icon:not( .oo-ui-image-progressive ):not( .oo-ui-image-destructive ):not( .oo-ui-checkboxInputWidget-checkIcon ):not( .oo-ui-image-invert ):not( .mw-no-invert )';
@OOUIIndicatorSelectors: ~'.oo-ui-indicatorElement-indicator';

@media screen {
	/**
	 * Light mode
	 *
	 * Applies the light mode color palette by default
	 * or with the .skin-invert, or .notheme classes
	 */
	:root,
	.skin-invert,
	.notheme {
		.cdx-mode-light();
	}

	/**
	 * Forced night mode.
	 *
	 * Applies the night mode color palette per the users explicit preference,
	 * regardless of system settings.
	 */
	html.skin-theme-clientpref-night {
		color-scheme: dark;
		.cdx-mode-dark();
	}

	/**
	 * Inverted Dark-mode
	 * Creates a dark-mode effect on elements by flipping their color,
	 * (usually from black to white).
	 * Applied as a last resort when using CSS variables is not possible.
	 * NOTE: `.skin-invert` is used in templates and user generated content.
	 *
	 * - T365102 invert class specifically for image related element
	 * - T365764 special treatment of inverted OOUI icons
	 */
	html.skin-theme-clientpref-night .skin-invert-image img,
	html.skin-theme-clientpref-night .skin-invert,
	html.skin-theme-clientpref-night @{OOUIIconSelectors},
	html.skin-theme-clientpref-night @{OOUIIndicatorSelectors} {
		color-scheme: light;
		filter: invert( 1 ) hue-rotate( 180deg );
	}

	/**
	 * Forced light mode.
	 * Makes elements appear in light-mode when dark-mode is enabled.
	 * NOTE: might be used in templates and user generated content.
	 */
	html.skin-theme-clientpref-night .notheme {
		color-scheme: light;
		color: var( --color-base );
	}

	/**
	 * Prevent double inversion.
	 * Do not apply invert to elements that are inside a notheme or a skin-invert class to avoid inversion in light theme or
	 * double inversion in an already inverted element
	 * - OOUI icons inside .notheme OOUI elements
	 * - OOUI icons inside elements with .skin-invert
	 * - OOUI icons inside elements with .notheme
	 */
	.skin-invert,
	.notheme {
		@{OOUIIndicatorSelectors},
		@{OOUIIconSelectors} {
			filter: none !important; /* stylelint-disable-line declaration-no-important */
		}
	}

	/**
	 * Font size settings
	 *
	 * Notes:
	 * `.mw-body-content .cdx-message` selector:
	 * Temporary workaround to prevent Codex messages from scaling with text size T391890.
	 * Remove the workaround once font size modes are fully integrated in Vector.
	 *
	 * `.no-font-mode-scale` (@unstable) selector:
	 * Temporary and not be considered stable class, which is not designed for use in
	 * article content.
	 */
	html.vector-feature-custom-font-size-clientpref--excluded,
	/* FIXME: Remove in 2 weeks time. This is for cache HTML only. */
	.vector-feature-custom-font-size-clientpref--excluded,
	html.vector-feature-custom-font-size-clientpref-0,
	.no-font-mode-scale,
	.mw-body-content .cdx-message {
		--font-size-medium: @font-size-small;
		--line-height-medium: @line-height-small;
		// Use for user-generated content that comes from outside of the design system.
		// TODO: Remove once font size modes are fully integrated in Vector.
		--line-height-content: 1.5714285;
	}

	html.vector-feature-custom-font-size-clientpref-1,
	/* FIXME: Set `.vector-icon` to medium equal to 20x20 px, see T394091. */
	.vector-icon {
		--font-size-medium: @font-size-medium;
		--line-height-medium: @line-height-medium;
		// Use for user-generated content that comes from outside of the design system.
		// TODO: Remove once font size modes are fully integrated in Vector.
		--line-height-content: 1.625;
	}

	html.vector-feature-custom-font-size-clientpref-2 {
		--font-size-medium: @font-size-x-large;
		--line-height-medium: 1.5;
		// Use for user-generated content that comes from outside of the design system.
		// TODO: Remove once font size modes are fully integrated in Vector.
		--line-height-content: 1.55;
	}

	// Fix height of Message icon, this uses `--line-height-medium` but doesn't accept a
	// unitless value as set in Vector's 'mediawiki.skin.variables.less' file. (T401457).
	// Note, that this has to be set on `.skin-vector-2022` to also fix Messages outside of
	// `.mw-body-content`, like teleported one for example.
	// TODO: Remove once the `--line-height-medium` override in above
	// `.vector-icon` is removed.
	.skin-vector-2022 .cdx-message {
		.cdx-message__icon,
		.cdx-message__icon--vue {
			height: 1.625rem;
		}
	}
}

/**
 * Auto night mode.
 *
 * Applies the night mode color palette only in response to system settings.
 */
@media screen and ( prefers-color-scheme: dark ) {
	html.skin-theme-clientpref-os {
		color-scheme: light dark;
		.cdx-mode-dark();
	}

	html.skin-theme-clientpref-os .notheme {
		color-scheme: light;
		color: var( --color-base );
	}

	// T365102 invert class specifically for image related elements
	html.skin-theme-clientpref-os .skin-invert-image img,
	html.skin-theme-clientpref-os .skin-invert,
	html.skin-theme-clientpref-os @{OOUIIconSelectors},
	html.skin-theme-clientpref-os @{OOUIIndicatorSelectors} {
		color-scheme: light;
		filter: invert( 1 ) hue-rotate( 180deg );
	}
}