/**
 * GENERATED FILE — do not edit.
 *
 * SPDX-License-Identifier: EUPL-1.2
 * SPDX-FileCopyrightText: 2026 Conduction B.V. <info@conduction.nl>
 *
 * Source: scripts/mapping/component-tokens.json
 * Regenerate: npm run generate:component-scopes
 */

/*
 * Component-scoped tokens.
 *
 * Each rule below redeclares, inside one component's subtree, the Nextcloud
 * variable that component consumes — so the component follows its own token
 * when one is set and the brand-wide global when one is not. Nextcloud's own
 * stylesheets keep doing the painting; only the value they see changes.
 *
 * The capture block copies each global under a name the scopes can fall back
 * to. Falling back to the global directly would be a self-referential custom
 * property, which CSS discards as invalid.
 *
 * IT IS `body`, NOT `:root`, AND THAT IS THE WHOLE POINT.
 *
 * Every design system declares the Nextcloud globals on `body` —
 * css/systems/nldesign/theme.css does, and so do the high-contrast,
 * summer-breeze and lasuite sheets. Nextcloud core declares its OWN on
 * `:root`, because ThemeInjectionService serves the default theme with
 * `plain=true`. So a capture taken on `:root` copied core's value and never
 * the token set's, and every component whose token nobody had set was painted
 * Nextcloud blue instead of the brand colour.
 *
 * `body` sees both: what it declares itself, and whatever `:root` declares,
 * by inheritance. There is no element between `body` and the components that
 * declares a global, so nothing is missed.
 *
 * The token editor's preview is the one exception, and it is captured again.
 * An unsaved edit is declared on `#nldesign-preview` and nowhere else — it is
 * a preview until it is saved — so a capture taken only on `body` would hand
 * the specimens inside the preview the saved value instead of the edit.
 */

body,
#nldesign-preview {
	--thematiq-global-color-background-plain: var(--color-background-plain);
	--thematiq-global-color-background-plain-text: var(--color-background-plain-text);
	--thematiq-global-color-background-hover: var(--color-background-hover);
	--thematiq-global-border-radius-large: var(--border-radius-large);
	--thematiq-global-color-border: var(--color-border);
	--thematiq-global-color-primary-element: var(--color-primary-element);
	--thematiq-global-color-primary-element-text: var(--color-primary-element-text);
	--thematiq-global-color-primary-element-hover: var(--color-primary-element-hover);
	--thematiq-global-border-radius-element: var(--border-radius-element);
	--thematiq-global-color-primary-text: var(--color-primary-text);
	--thematiq-global-font-face: var(--font-face);
	--thematiq-global-color-main-text: var(--color-main-text);
	--thematiq-global-body-container-radius: var(--body-container-radius);
	--thematiq-global-border-radius-rounded: var(--border-radius-rounded);
	--thematiq-global-color-scrollbar: var(--color-scrollbar);
	--thematiq-global-color-text-maxcontrast: var(--color-text-maxcontrast);
	--thematiq-global-color-main-background: var(--color-main-background);
	--thematiq-global-font-weight-default: var(--font-weight-default);
	--thematiq-global-color-background-dark: var(--color-background-dark);
	--thematiq-global-color-border-dark: var(--color-border-dark);
	--thematiq-global-animation-quick: var(--animation-quick);
	--thematiq-global-color-primary-light: var(--color-primary-light);
	--thematiq-global-color-primary-light-text: var(--color-primary-light-text);
	--thematiq-global-color-primary-light-hover: var(--color-primary-light-hover);
	--thematiq-global-color-success: var(--color-success);
	--thematiq-global-color-primary: var(--color-primary);
	--thematiq-global-color-border-maxcontrast: var(--color-border-maxcontrast);
	--thematiq-global-color-placeholder-dark: var(--color-placeholder-dark);
	--thematiq-global-color-placeholder-light: var(--color-placeholder-light);
	--thematiq-global-color-border-error: var(--color-border-error);
	--thematiq-global-vs-border-color: var(--vs-border-color);
	--thematiq-global-vs-border-radius: var(--vs-border-radius);
	--thematiq-global-vs-selected-color: var(--vs-selected-color);
	--thematiq-global-color-primary-element-light: var(--color-primary-element-light);
	--thematiq-global-vs-dropdown-color: var(--vs-dropdown-color);
	--thematiq-global-vs-dropdown-option--active-bg: var(--vs-dropdown-option--active-bg);
	--thematiq-global-vs-dropdown-option--active-color: var(--vs-dropdown-option--active-color);
	--thematiq-global-border-radius-small: var(--border-radius-small);
	--thematiq-global-animation-slow: var(--animation-slow);
	--thematiq-global-color-background-darker: var(--color-background-darker);
	--thematiq-global-border-radius-pill: var(--border-radius-pill);
	--thematiq-global-font-weight-element: var(--font-weight-element);
	--thematiq-global-color-primary-element-light-text: var(--color-primary-element-light-text);
	--thematiq-global-color-primary-element-light-hover: var(--color-primary-element-light-hover);
	--thematiq-global-color-error: var(--color-error);
	--thematiq-global-color-error-rgb: var(--color-error-rgb);
	--thematiq-global-color-error-hover: var(--color-error-hover);
	--thematiq-global-color-error-text: var(--color-error-text);
	--thematiq-global-color-success-text: var(--color-success-text);
	--thematiq-global-color-success-hover: var(--color-success-hover);
	--thematiq-global-color-info: var(--color-info);
	--thematiq-global-color-info-text: var(--color-info-text);
	--thematiq-global-color-info-rgb: var(--color-info-rgb);
	--thematiq-global-border-radius: var(--border-radius);
	--thematiq-global-color-warning: var(--color-warning);
	--thematiq-global-color-warning-text: var(--color-warning-text);
	--thematiq-global-color-warning-rgb: var(--color-warning-rgb);
	--thematiq-global-color-success-rgb: var(--color-success-rgb);
	--thematiq-global-color-favorite: var(--color-favorite);
	--thematiq-global-font-weight-heading: var(--font-weight-heading);
	--thematiq-global-color-primary-hover: var(--color-primary-hover);
	--thematiq-global-color-text-light: var(--color-text-light);
	--thematiq-global-color-text-lighter: var(--color-text-lighter);
	--thematiq-global-color-text-error: var(--color-text-error);
	--thematiq-global-color-text-warning: var(--color-text-warning);
	--thematiq-global-color-text-success: var(--color-text-success);

	/* Component tokens that a component redirects onto its own. */
	--thematiq-alias-nldesign-component-button-primary-action-background-color: var(--nldesign-component-button-primary-action-background-color);
	--thematiq-alias-nldesign-component-button-primary-action-border-color: var(--nldesign-component-button-primary-action-border-color);
	--thematiq-alias-nldesign-component-button-primary-action-color: var(--nldesign-component-button-primary-action-color);
	--thematiq-alias-nldesign-component-button-primary-action-hover-background-color: var(--nldesign-component-button-primary-action-hover-background-color);
	--thematiq-alias-nldesign-component-button-border-radius: var(--nldesign-component-button-border-radius);
	--thematiq-alias-nldesign-component-textbox-border-color: var(--nldesign-component-textbox-border-color);
	--thematiq-alias-nldesign-component-textbox-border-radius: var(--nldesign-component-textbox-border-radius);
	--thematiq-alias-nldesign-component-textbox-background-color: var(--nldesign-component-textbox-background-color);
	--thematiq-alias-nldesign-component-textbox-focus-border-color: var(--nldesign-component-textbox-focus-border-color);
	--thematiq-alias-nldesign-component-button-primary-action-font-weight: var(--nldesign-component-button-primary-action-font-weight);
}

/* header-bar */
#header,
[data-thematiq-component='header-bar'] {
	--color-background-plain-text: var(
		--nldesign-component-header-color,
		var(--thematiq-global-color-background-plain-text)
	);
	--color-background-hover: var(
		--nldesign-component-header-hover-background-color,
		var(--thematiq-global-color-background-hover)
	);
}

#header {
	background-color: var(--nldesign-component-header-background-color, transparent);
}

/* login-card */
#body-login .guest-box,
#body-login .login-box,
[data-thematiq-component='login-card'] {
	--border-radius-large: var(
		--nldesign-component-login-box-border-radius,
		var(--thematiq-global-border-radius-large)
	);
}

#body-login .guest-box.login-box {
	border: 1px solid var(--nldesign-component-login-box-border-color) !important;
}

/* login-button */
#body-login .button-vue--primary,
#body-login .button-vue--vue-primary,
#body-login input[type='submit'],
#body-login button.primary,
.login-form button[type='submit'],
[data-thematiq-component='login-button'] {
	--color-primary-element: var(
		--nldesign-component-login-button-background-color,
		var(--thematiq-global-color-primary-element)
	);
	--color-primary-element-text: var(
		--nldesign-component-login-button-color,
		var(--thematiq-global-color-primary-element-text)
	);
	--color-primary-element-hover: var(
		--nldesign-component-login-button-hover-background-color,
		var(--thematiq-global-color-primary-element-hover)
	);
	--border-radius-element: var(
		--nldesign-component-login-button-border-radius,
		var(--thematiq-global-border-radius-element)
	);
	--nldesign-component-button-primary-action-background-color: var(
		--nldesign-component-login-button-background-color,
		var(--thematiq-alias-nldesign-component-button-primary-action-background-color)
	);
	--nldesign-component-button-primary-action-border-color: var(
		--nldesign-component-login-button-background-color,
		var(--thematiq-alias-nldesign-component-button-primary-action-border-color)
	);
	--nldesign-component-button-primary-action-color: var(
		--nldesign-component-login-button-color,
		var(--thematiq-alias-nldesign-component-button-primary-action-color)
	);
	--nldesign-component-button-primary-action-hover-background-color: var(
		--nldesign-component-login-button-hover-background-color,
		var(--thematiq-alias-nldesign-component-button-primary-action-hover-background-color)
	);
	--nldesign-component-button-border-radius: var(
		--nldesign-component-login-button-border-radius,
		var(--thematiq-alias-nldesign-component-button-border-radius)
	);
}

/* logo-slogan */
#body-login .header-guest,
#body-login .logo,
[data-thematiq-component='logo-slogan'] {
	--color-primary-text: var(
		--nldesign-component-logo-slogan-color,
		var(--thematiq-global-color-primary-text)
	);
	--font-face: var(
		--nldesign-component-logo-slogan-font-family,
		var(--thematiq-global-font-face)
	);
}

/* app-navigation */
#app-navigation,
#app-navigation-vue,
.app-navigation,
[data-thematiq-component='app-navigation'] {
	--border-radius-element: var(
		--nldesign-component-navigation-border-radius,
		var(--thematiq-global-border-radius-element)
	);
	--color-main-text: var(
		--nldesign-component-navigation-color,
		var(--thematiq-global-color-main-text)
	);
	--color-primary-element: var(
		--nldesign-component-navigation-active-background-color,
		var(--thematiq-global-color-primary-element)
	);
}

/* content-card */
#app-content,
.app-content,
#content,
[data-thematiq-component='content-card'] {
	--body-container-radius: var(
		--nldesign-component-content-card-container-border-radius,
		var(--thematiq-global-body-container-radius)
	);
	--border-radius-rounded: var(
		--nldesign-component-content-card-border-radius,
		var(--thematiq-global-border-radius-rounded)
	);
	--color-border: var(
		--nldesign-component-content-card-border-color,
		var(--thematiq-global-color-border)
	);
	--color-scrollbar: var(
		--nldesign-component-content-card-scrollbar-color,
		var(--thematiq-global-color-scrollbar)
	);
}

/* table */
table,
[data-thematiq-component='table'] {
	--color-text-maxcontrast: var(
		--nldesign-component-table-header-color,
		var(--thematiq-global-color-text-maxcontrast)
	);
	--color-border: var(
		--nldesign-component-table-border-color,
		var(--thematiq-global-color-border)
	);
	--color-background-dark: var(
		--nldesign-component-table-zebra-background-color,
		var(--thematiq-global-color-background-dark)
	);
	--color-background-hover: var(
		--nldesign-component-table-row-hover-background-color,
		var(--thematiq-global-color-background-hover)
	);
}

th {
	background-color: var(--nldesign-component-table-header-background-color, transparent);
	font-weight: var(--nldesign-component-table-header-font-weight, normal);
}

/* sidebar */
#app-sidebar,
#app-sidebar-vue,
.app-sidebar,
[data-thematiq-component='sidebar'] {
	--color-border: var(
		--nldesign-component-sidebar-border-color,
		var(--thematiq-global-color-border)
	);
	--color-border-dark: var(
		--nldesign-component-sidebar-divider-color,
		var(--thematiq-global-color-border-dark)
	);
	--border-radius-large: var(
		--nldesign-component-sidebar-border-radius,
		var(--thematiq-global-border-radius-large)
	);
	--color-primary-element: var(
		--nldesign-component-sidebar-active-color,
		var(--thematiq-global-color-primary-element)
	);
}

/* list-item */
.list-item,
.list-item__wrapper,
[data-thematiq-component='list-item'] {
	--border-radius-element: var(
		--nldesign-component-list-item-border-radius,
		var(--thematiq-global-border-radius-element)
	);
	--color-text-maxcontrast: var(
		--nldesign-component-list-item-subline-color,
		var(--thematiq-global-color-text-maxcontrast)
	);
	--color-background-hover: var(
		--nldesign-component-list-item-hover-background-color,
		var(--thematiq-global-color-background-hover)
	);
	--animation-quick: var(
		--nldesign-component-list-item-transition-duration,
		var(--thematiq-global-animation-quick)
	);
	--color-primary-light: var(
		--nldesign-component-list-item-selected-background-color,
		var(--thematiq-global-color-primary-light)
	);
	--color-primary-light-text: var(
		--nldesign-component-list-item-selected-color,
		var(--thematiq-global-color-primary-light-text)
	);
	--color-primary-light-hover: var(
		--nldesign-component-list-item-selected-hover-background-color,
		var(--thematiq-global-color-primary-light-hover)
	);
}

/* empty-content */
.empty-content,
.empty-content__name,
[data-thematiq-component='empty-content'] {
	--color-main-text: var(
		--nldesign-component-empty-content-color,
		var(--thematiq-global-color-main-text)
	);
	--color-text-maxcontrast: var(
		--nldesign-component-empty-content-description-color,
		var(--thematiq-global-color-text-maxcontrast)
	);
	--color-background-dark: var(
		--nldesign-component-empty-content-icon-background-color,
		var(--thematiq-global-color-background-dark)
	);
}

/* actions-menu */
.popover,
.popovermenu,
.v-popper__popper,
[data-thematiq-component='actions-menu'] {
	--color-main-text: var(
		--nldesign-component-actions-menu-color,
		var(--thematiq-global-color-main-text)
	);
	--border-radius-large: var(
		--nldesign-component-actions-menu-border-radius,
		var(--thematiq-global-border-radius-large)
	);
	--color-background-hover: var(
		--nldesign-component-actions-menu-hover-background-color,
		var(--thematiq-global-color-background-hover)
	);
}

/* avatar */
.user-status-icon {
	--user-status-color-online: var(--nldesign-component-avatar-online-status-color, #2D7B41) !important;
}

/* breadcrumbs */
.breadcrumb,
.vue-crumb,
[data-thematiq-component='breadcrumbs'] {
	--color-primary: var(
		--nldesign-component-breadcrumb-color,
		var(--thematiq-global-color-primary)
	);
	--color-text-maxcontrast: var(
		--nldesign-component-breadcrumb-separator-color,
		var(--thematiq-global-color-text-maxcontrast)
	);
	--color-background-hover: var(
		--nldesign-component-breadcrumb-hover-background-color,
		var(--thematiq-global-color-background-hover)
	);
}

/* settings-section */
.settings-section,
.app-settings-section,
.settings-section__name,
[data-thematiq-component='settings-section'] {
	--color-main-text: var(
		--nldesign-component-settings-section-heading-color,
		var(--thematiq-global-color-main-text)
	);
	--color-text-maxcontrast: var(
		--nldesign-component-settings-section-hint-color,
		var(--thematiq-global-color-text-maxcontrast)
	);
	--color-border: var(
		--nldesign-component-settings-section-border-color,
		var(--thematiq-global-color-border)
	);
}

/* text-input */
.input-field,
input[type='text'],
input[type='password'],
input[type='email'],
input[type='search'],
[data-thematiq-component='text-input'] {
	--color-border-maxcontrast: var(
		--nldesign-component-textbox-border-color,
		var(--thematiq-global-color-border-maxcontrast)
	);
	--color-placeholder-light: var(
		--nldesign-component-textbox-placeholder-light-color,
		var(--thematiq-global-color-placeholder-light)
	);
	--border-radius-element: var(
		--nldesign-component-textbox-border-radius,
		var(--thematiq-global-border-radius-element)
	);
	--color-border-error: var(
		--nldesign-component-textbox-invalid-border-color,
		var(--thematiq-global-color-border-error)
	);
}

.input-field__input::placeholder {
	color: var(--nldesign-component-textbox-placeholder-color, var(--color-text-maxcontrast)) !important;
}

.input-field__input:focus:not([disabled]),
.input-field__input:active:not([disabled]) {
	--input-border-color: var(--nldesign-component-textbox-focus-border-color, var(--color-main-text)) !important;
}

/* select */
select,
.v-select,
.vs__dropdown-menu,
[data-thematiq-component='select'] {
	--vs-border-color: var(
		--nldesign-component-form-select-border-color,
		var(--thematiq-global-vs-border-color)
	);
	--vs-border-radius: var(
		--nldesign-component-form-select-border-radius,
		var(--thematiq-global-vs-border-radius)
	);
	--vs-selected-color: var(
		--nldesign-component-form-select-color,
		var(--thematiq-global-vs-selected-color)
	);
	--color-primary-element-light: var(
		--nldesign-component-form-select-selected-background-color,
		var(--thematiq-global-color-primary-element-light)
	);
	--vs-dropdown-color: var(
		--nldesign-component-form-select-option-color,
		var(--thematiq-global-vs-dropdown-color)
	);
	--vs-dropdown-option--active-bg: var(
		--nldesign-component-form-select-option-hover-background-color,
		var(--thematiq-global-vs-dropdown-option--active-bg)
	);
	--vs-dropdown-option--active-color: var(
		--nldesign-component-form-select-option-hover-color,
		var(--thematiq-global-vs-dropdown-option--active-color)
	);
}

/* checkbox-switch */
.checkbox-radio-switch,
input[type='checkbox'],
input[type='radio'],
[data-thematiq-component='checkbox-switch'] {
	--border-radius-small: var(
		--nldesign-component-checkbox-border-radius,
		var(--thematiq-global-border-radius-small)
	);
	--color-primary-element: var(
		--nldesign-component-checkbox-checked-background-color,
		var(--thematiq-global-color-primary-element)
	);
}

.checkbox-radio-switch-checkbox:not(.checkbox-radio-switch--checked) .checkbox-content__icon > *,
.checkbox-radio-switch-radio:not(.checkbox-radio-switch--checked) .checkbox-content__icon > * {
	color: var(--nldesign-component-checkbox-border-color, var(--color-primary-element));
}

/* textarea */
textarea,
.textarea,
[data-thematiq-component='textarea'] {
	--color-border-maxcontrast: var(
		--nldesign-component-textarea-border-color,
		var(--thematiq-global-color-border-maxcontrast)
	);
	--border-radius-element: var(
		--nldesign-component-textarea-border-radius,
		var(--thematiq-global-border-radius-element)
	);
	--color-main-text: var(
		--nldesign-component-textarea-color,
		var(--thematiq-global-color-main-text)
	);
	--color-main-background: var(
		--nldesign-component-textarea-background-color,
		var(--thematiq-global-color-main-background)
	);
	--color-border-error: var(
		--nldesign-component-textarea-invalid-border-color,
		var(--thematiq-global-color-border-error)
	);
	--nldesign-component-textbox-border-color: var(
		--nldesign-component-textarea-border-color,
		var(--thematiq-alias-nldesign-component-textbox-border-color)
	);
	--nldesign-component-textbox-border-radius: var(
		--nldesign-component-textarea-border-radius,
		var(--thematiq-alias-nldesign-component-textbox-border-radius)
	);
	--nldesign-component-textbox-background-color: var(
		--nldesign-component-textarea-background-color,
		var(--thematiq-alias-nldesign-component-textbox-background-color)
	);
	--nldesign-component-textbox-focus-border-color: var(
		--nldesign-component-textarea-focus-border-color,
		var(--thematiq-alias-nldesign-component-textbox-focus-border-color)
	);
}

.textarea__input::placeholder {
	color: var(--nldesign-component-textarea-placeholder-color, var(--color-text-maxcontrast)) !important;
}

.textarea__input:focus:not([disabled]),
.textarea__input:active:not([disabled]) {
	--input-border-color: var(--nldesign-component-textarea-focus-border-color, var(--color-main-text)) !important;
}

/* dialog */
.modal-container,
.modal-wrapper,
.dialog,
[data-thematiq-component='dialog'] {
	--border-radius-large: var(
		--nldesign-component-dialog-border-radius,
		var(--thematiq-global-border-radius-large)
	);
	--color-border: var(
		--nldesign-component-dialog-border-color,
		var(--thematiq-global-color-border)
	);
	--animation-slow: var(
		--nldesign-component-dialog-transition-duration,
		var(--thematiq-global-animation-slow)
	);
	--color-primary-element: var(
		--nldesign-component-dialog-confirm-background-color,
		var(--thematiq-global-color-primary-element)
	);
	--nldesign-component-button-primary-action-background-color: var(
		--nldesign-component-dialog-confirm-background-color,
		var(--thematiq-alias-nldesign-component-button-primary-action-background-color)
	);
	--nldesign-component-button-primary-action-border-color: var(
		--nldesign-component-dialog-confirm-background-color,
		var(--thematiq-alias-nldesign-component-button-primary-action-border-color)
	);
}

/* progress */
progress,
.progress-bar,
.icon-loading,
[data-thematiq-component='progress'] {
	--color-primary-element: var(
		--nldesign-component-progress-background-color,
		var(--thematiq-global-color-primary-element)
	);
	--color-background-darker: var(
		--nldesign-component-progress-track-background-color,
		var(--thematiq-global-color-background-darker)
	);
	--border-radius-pill: var(
		--nldesign-component-progress-border-radius,
		var(--thematiq-global-border-radius-pill)
	);
	--animation-slow: var(
		--nldesign-component-progress-transition-duration,
		var(--thematiq-global-animation-slow)
	);
}

/* primary-button */
.button-vue--primary,
.button-vue--vue-primary,
button.primary,
input[type='submit'],
[data-thematiq-component='primary-button'] {
	--color-primary-element: var(
		--nldesign-component-button-primary-action-background-color,
		var(--thematiq-global-color-primary-element)
	);
	--color-primary-element-text: var(
		--nldesign-component-button-primary-action-color,
		var(--thematiq-global-color-primary-element-text)
	);
	--color-primary-element-hover: var(
		--nldesign-component-button-primary-action-hover-background-color,
		var(--thematiq-global-color-primary-element-hover)
	);
	--color-main-text: var(
		--nldesign-component-button-focus-border-color,
		var(--thematiq-global-color-main-text)
	);
	--border-radius-element: var(
		--nldesign-component-button-border-radius,
		var(--thematiq-global-border-radius-element)
	);
	--font-weight-element: var(
		--nldesign-component-button-font-weight,
		var(--thematiq-global-font-weight-element)
	);
	--nldesign-component-button-primary-action-font-weight: var(
		--nldesign-component-button-font-weight,
		var(--thematiq-alias-nldesign-component-button-primary-action-font-weight)
	);
}

/* secondary-button */
.button-vue--secondary,
.button-vue--vue-secondary,
[data-thematiq-component='secondary-button'] {
	--color-primary-element-light: var(
		--nldesign-component-button-secondary-action-background-color,
		var(--thematiq-global-color-primary-element-light)
	);
	--color-primary-element-light-text: var(
		--nldesign-component-button-secondary-action-color,
		var(--thematiq-global-color-primary-element-light-text)
	);
	--color-primary-element-light-hover: var(
		--nldesign-component-button-secondary-action-hover-background-color,
		var(--thematiq-global-color-primary-element-light-hover)
	);
	--border-radius-element: var(
		--nldesign-component-button-secondary-action-border-radius,
		var(--thematiq-global-border-radius-element)
	);
	--nldesign-component-button-border-radius: var(
		--nldesign-component-button-secondary-action-border-radius,
		var(--thematiq-alias-nldesign-component-button-border-radius)
	);
}

/* tertiary-button */
.button-vue--tertiary,
.button-vue--vue-tertiary,
.button-vue--tertiary-no-background,
[data-thematiq-component='tertiary-button'] {
	--color-main-text: var(
		--nldesign-component-button-color,
		var(--thematiq-global-color-main-text)
	);
	--color-primary-element-light: var(
		--nldesign-component-button-active-background-color,
		var(--thematiq-global-color-primary-element-light)
	);
}

.button-vue--tertiary:not(.button-vue--tertiary-no-background):not(.button-vue--tertiary-on-primary):hover:not(:disabled) {
	background-color: var(--nldesign-component-button-hover-background-color, color-mix(in srgb, var(--color-primary-element) 8%, transparent)) !important;
}

/* error-button */
.button-vue--error,
.button-vue--vue-error,
[data-thematiq-component='error-button'] {
	--color-error: var(
		--nldesign-component-button-error-background-color,
		var(--thematiq-global-color-error)
	);
	--color-error-rgb: var(
		--nldesign-component-button-error-background-color-rgb,
		var(--thematiq-global-color-error-rgb)
	);
	--color-error-hover: var(
		--nldesign-component-button-error-hover-background-color,
		var(--thematiq-global-color-error-hover)
	);
	--color-error-text: var(
		--nldesign-component-button-error-color,
		var(--thematiq-global-color-error-text)
	);
}

/* success-button */
.button-vue--success,
.button-vue--vue-success,
[data-thematiq-component='success-button'] {
	--color-success: var(
		--nldesign-component-button-success-background-color,
		var(--thematiq-global-color-success)
	);
	--color-success-text: var(
		--nldesign-component-button-success-color,
		var(--thematiq-global-color-success-text)
	);
	--color-success-hover: var(
		--nldesign-component-button-success-hover-background-color,
		var(--thematiq-global-color-success-hover)
	);
}

/* note-cards */
.notecard,
[data-thematiq-component='note-cards'] {
	--color-info: var(
		--nldesign-component-notecard-info-color,
		var(--thematiq-global-color-info)
	);
	--color-info-text: var(
		--nldesign-component-notecard-info-icon-color,
		var(--thematiq-global-color-info-text)
	);
	--color-info-rgb: var(
		--nldesign-component-notecard-info-color-rgb,
		var(--thematiq-global-color-info-rgb)
	);
	--border-radius: var(
		--nldesign-component-notecard-border-radius,
		var(--thematiq-global-border-radius)
	);
	--color-warning: var(
		--nldesign-component-notecard-warning-color,
		var(--thematiq-global-color-warning)
	);
	--color-warning-text: var(
		--nldesign-component-notecard-warning-icon-color,
		var(--thematiq-global-color-warning-text)
	);
	--color-warning-rgb: var(
		--nldesign-component-notecard-warning-color-rgb,
		var(--thematiq-global-color-warning-rgb)
	);
	--color-error: var(
		--nldesign-component-notecard-error-color,
		var(--thematiq-global-color-error)
	);
	--color-error-text: var(
		--nldesign-component-notecard-error-icon-color,
		var(--thematiq-global-color-error-text)
	);
	--color-error-rgb: var(
		--nldesign-component-notecard-error-color-rgb,
		var(--thematiq-global-color-error-rgb)
	);
	--color-success: var(
		--nldesign-component-notecard-success-color,
		var(--thematiq-global-color-success)
	);
	--color-success-text: var(
		--nldesign-component-notecard-success-icon-color,
		var(--thematiq-global-color-success-text)
	);
	--color-success-rgb: var(
		--nldesign-component-notecard-success-color-rgb,
		var(--thematiq-global-color-success-rgb)
	);
}

body .notecard.notecard--info,
body .notecard.info {
	--thematiq-contrast-notecard-info-text-color: lch(from var(--nldesign-component-notecard-info-color) calc((49.44 - l) * infinity) 0 0);
	color: var(--nldesign-component-notecard-info-text-color, var(--thematiq-contrast-notecard-info-text-color, var(--color-main-text))) !important;
}

body .notecard.notecard--warning,
body .notecard.warning {
	--thematiq-contrast-notecard-warning-text-color: lch(from var(--nldesign-component-notecard-warning-color) calc((49.44 - l) * infinity) 0 0);
	color: var(--nldesign-component-notecard-warning-text-color, var(--thematiq-contrast-notecard-warning-text-color, var(--color-main-text))) !important;
}

body .notecard.notecard--error,
body .notecard.error {
	--thematiq-contrast-notecard-error-text-color: lch(from var(--nldesign-component-notecard-error-color) calc((49.44 - l) * infinity) 0 0);
	color: var(--nldesign-component-notecard-error-text-color, var(--thematiq-contrast-notecard-error-text-color, var(--color-main-text))) !important;
}

body .notecard.notecard--success,
body .notecard.success {
	--thematiq-contrast-notecard-success-text-color: lch(from var(--nldesign-component-notecard-success-color) calc((49.44 - l) * infinity) 0 0);
	color: var(--nldesign-component-notecard-success-text-color, var(--thematiq-contrast-notecard-success-text-color, var(--color-main-text))) !important;
}

/* badge-counter */
.counter-bubble,
.counter-bubble__counter,
.app-navigation-entry__counter,
[data-thematiq-component='badge-counter'] {
	--color-primary-element: var(
		--nldesign-component-badge-background-color,
		var(--thematiq-global-color-primary-element)
	);
	--color-primary-element-text: var(
		--nldesign-component-badge-color,
		var(--thematiq-global-color-primary-element-text)
	);
	--border-radius-pill: var(
		--nldesign-component-badge-border-radius,
		var(--thematiq-global-border-radius-pill)
	);
	--color-favorite: var(
		--nldesign-component-badge-favorite-color,
		var(--thematiq-global-color-favorite)
	);
}

/* toast */
.toastify,
[class^='_toast_'],
[data-thematiq-component='toast'] {
	--border-radius: var(
		--nldesign-component-toast-border-radius,
		var(--thematiq-global-border-radius)
	);
}

body [class*='_toast_success_'],
body .toastify.toast-success {
	background-color: var(--nldesign-component-toast-success-background-color, var(--color-main-background));
	--thematiq-contrast-toast-success-color: lch(from var(--nldesign-component-toast-success-background-color) calc((49.44 - l) * infinity) 0 0);
	color: var(--nldesign-component-toast-success-color, var(--thematiq-contrast-toast-success-color, var(--color-main-text)));
}

body [class*='_toast_error_'],
body .toastify.toast-error {
	background-color: var(--nldesign-component-toast-error-background-color, var(--color-main-background));
	--thematiq-contrast-toast-error-color: lch(from var(--nldesign-component-toast-error-background-color) calc((49.44 - l) * infinity) 0 0);
	color: var(--nldesign-component-toast-error-color, var(--thematiq-contrast-toast-error-color, var(--color-main-text)));
}

body [class*='_toast_warning_'],
body .toastify.toast-warning {
	background-color: var(--nldesign-component-toast-warning-background-color, var(--color-main-background));
	--thematiq-contrast-toast-warning-color: lch(from var(--nldesign-component-toast-warning-background-color) calc((49.44 - l) * infinity) 0 0);
	color: var(--nldesign-component-toast-warning-color, var(--thematiq-contrast-toast-warning-color, var(--color-main-text)));
}

body [class*='_toast_info_'],
body .toastify.toast-info {
	background-color: var(--nldesign-component-toast-info-background-color, var(--color-main-background));
	--thematiq-contrast-toast-info-color: lch(from var(--nldesign-component-toast-info-background-color) calc((49.44 - l) * infinity) 0 0);
	color: var(--nldesign-component-toast-info-color, var(--thematiq-contrast-toast-info-color, var(--color-main-text)));
}

/* heading */
h1,
h2,
h3,
h4,
h5,
h6,
[data-thematiq-component='heading'] {
	--font-face: var(
		--nldesign-component-heading-font-family,
		var(--thematiq-global-font-face)
	);
	--color-main-text: var(
		--nldesign-component-heading-color,
		var(--thematiq-global-color-main-text)
	);
	--font-weight-heading: var(
		--nldesign-component-heading-font-weight,
		var(--thematiq-global-font-weight-heading)
	);
}

/* paragraph */
p,
[data-thematiq-component='paragraph'] {
	--color-main-text: var(
		--nldesign-component-paragraph-color,
		var(--thematiq-global-color-main-text)
	);
	--font-face: var(
		--nldesign-component-paragraph-font-family,
		var(--thematiq-global-font-face)
	);
	--font-weight-default: var(
		--nldesign-component-paragraph-font-weight,
		var(--thematiq-global-font-weight-default)
	);
}

/* link */
a,
[data-thematiq-component='link'] {
	--color-primary: var(
		--nldesign-component-link-color,
		var(--thematiq-global-color-primary)
	);
	--color-primary-hover: var(
		--nldesign-component-link-hover-color,
		var(--thematiq-global-color-primary-hover)
	);
}

/* muted-text */
.settings-hint,
.app-settings-section__hint,
[data-thematiq-component='muted-text'] {
	--color-text-maxcontrast: var(
		--nldesign-component-text-muted-color,
		var(--thematiq-global-color-text-maxcontrast)
	);
	--color-text-light: var(
		--nldesign-component-text-light-color,
		var(--thematiq-global-color-text-light)
	);
	--color-text-lighter: var(
		--nldesign-component-text-lighter-color,
		var(--thematiq-global-color-text-lighter)
	);
}

/* status-text */
.status-text,
.text-error,
.text-warning,
.text-success,
[data-thematiq-component='status-text'] {
	--color-text-error: var(
		--nldesign-component-text-error-color,
		var(--thematiq-global-color-text-error)
	);
	--color-text-warning: var(
		--nldesign-component-text-warning-color,
		var(--thematiq-global-color-text-warning)
	);
	--color-text-success: var(
		--nldesign-component-text-success-color,
		var(--thematiq-global-color-text-success)
	);
}