[class^="surface-"],
[class*=" surface-"],
[surface] {
	--surface-color-background: var(--color-brand-100);
	--surface-color-text: var(--color-black);
	--surface-color-icon: var(--color-brand-700);

	background: var(--surface-color-background);
	color: var(--surface-color-text);
}

.surface-white,
[surface=white] {
	--surface-color-background: var(--color-white);
}

.surface-black,
[surface=black] {
	--surface-color-background: var(--color-black);
}

.surface-primary-400,
[surface=primary-400] {
	--surface-color-background: var(--color-brand-700);
}

.surface-primary-300,
[surface=primary-300] {
	--surface-color-background: var(--color-brand-300);
}

.surface-primary-200,
[surface=primary-200] {
	--surface-color-background: var(--color-brand-100);
}

.surface-primary-100,
[surface=primary-100] {
	--surface-color-background: var(--color-brand-50);
}

.surface-theme-primary-400,
[surface=theme-primary-400] {
	--surface-color-background: var(--color-theme-primary-400);
}

.surface-theme-primary-300,
[surface=theme-primary-300] {
	--surface-color-background: var(--color-theme-primary-300);
}

.surface-theme-primary-200,
[surface=theme-primary-200] {
	--surface-color-background: var(--color-theme-primary-200);
}

.surface-theme-primary-100,
[surface=theme-primary-100] {
	--surface-color-background: var(--color-theme-primary-100);
}

.surface-theme-secondary-200,
[surface=theme-secondary-200] {
	--surface-color-background: var(--color-theme-secondary-200);
}

.surface-theme-secondary-100,
[surface=theme-secondary-100] {
	--surface-color-background: var(--color-theme-secondary-100);
}

.surface-theme-primary-300,
.surface-theme-primary-200,
.surface-theme-primary-100,
.surface-theme-secondary-200,
.surface-theme-secondary-100,
.surface-primary-100,
.surface-primary-200,
.surface-white,
[surface=theme-primary-300],
[surface=theme-primary-200],
[surface=theme-primary-100],
[surface=theme-secondary-200],
[surface=theme-secondary-100],
[surface=primary-100],
[surface=primary-200],
[surface=white] {
	--link-color-primary: var(--color-black);
	--link-color-primary-hover: var(--color-black);
	--link-color-primary-active: var(--color-black);

	--link-color-secondary: var(--color-black);
	--link-color-secondary-hover: var(--color-black);
	--link-color-secondary-active: var(--color-black);

	--button-secondary-border-color: var(--color-black);
	--button-secondary-text-color: var(--color-black);
}

.main-content .surface-theme-primary-100,
.main-content .surface-primary-100,
.main-content [surface=theme-primary-100],
.main-content [surface=primary-100] {
	[surface] {
		--surface-color-background: var(--color-white);
	}
}

/*
    Row with background color
*/

.row--bg [surface]:not([surface=primary-400], [surface=theme-primary-400]) {
	--link-color-primary: var(--color-black);
	--link-color-primary-hover: var(--color-black);
	--link-color-primary-active: var(--color-black);

	--link-color-secondary: var(--color-black);
	--link-color-secondary-hover: var(--color-black);
	--link-color-secondary-active: var(--color-black);

	--button-secondary-border-color: var(--color-orange-700);
	--button-secondary-text-color: var(--color-orange-700);
}

.row--bg [surface=theme-primary-100],
.row--bg [surface=primary-100],
.row--bg [surface=theme-secondary-100]  {
	--surface-color-background: var(--color-white);

	[surface] {
		--surface-color-background: var(--color-brand-50);
	}
}

[theme=se-1-a] .row--bg [surface=theme-primary-200],
[theme=se-1-a] .row--bg [surface=primary-200],
[theme=se-1-b] .row--bg [surface=theme-primary-200],
[theme=se-1-b] .row--bg [surface=primary-200] {
	--surface-color-background: var(--color-white);
}

.surface-white,
[surface=white] {
	--button-primary-background-color: var(--color-orange-700);
	--button-primary-text-color: var(--color-orange-50);
	--button-primary-background-color-hover: var(--color-orange-800);
	--button-primary-text-color-hover: var(--color-orange-50);
	--button-primary-background-color-active: var(--color-orange-900);
	--button-primary-text-color-active: var(--color-orange-50);

	--button-secondary-background-color: transparent;
	--button-secondary-text-color: var(--color-orange-700);
	--button-secondary-border-color: var(--color-orange-700);
	--button-secondary-background-color-hover: var(--color-orange-700);
	--button-secondary-text-color-hover: var(--color-orange-50);
	--button-secondary-background-color-active: var(--color-orange-800);
	--button-secondary-text-color-active: var(--color-orange-50);

	--button-tertiary-background-color: transparent;
	--button-tertiary-text-color: var(--color-black);
	--button-tertiary-text-color-hover: var(--color-black);
	--button-tertiary-text-color-active: var(--color-grey-600);
	--button-tertiary-background-hover: var(--color-opacity-brand-primary-008);
	--button-tertiary-background-active: var(--color-opacity-brand-primary-016);
}

/*
    Dark surface
*/
.surface-primary-400,
.surface-theme-primary-400,
[surface=primary-400],
[surface=theme-primary-400] {
	--surface-color-text: var(--color-brand-50);
	--surface-color-icon: var(--color-brand-50);

	--link-color-primary: var(--color-brand-50);
	--link-color-primary-hover: var(--color-brand-50);
	--link-color-primary-active: var(--color-brand-50);

	--link-color-secondary: var(--color-brand-50);
	--link-color-secondary-hover: var(--color-brand-50);
	--link-color-secondary-active: var(--color-brand-50);

	--input-border-color: var(--color-white);
	--input-background-color-checked: var(--color-brand-100);
	--input-border-color-checked: var(--color-brand-100);
	--input-icon-color: var(--color-black);

	--button-primary-background-color: var(--color-brand-200);
	--button-primary-text-color: var(--color-black);
	--button-primary-background-color-hover: var(--color-brand-300);
	--button-primary-text-color-hover: var(--color-black);
	--button-primary-background-color-active: var(--color-brand-400);
	--button-primary-text-color-active: var(--color-black);

	--button-secondary-background-color: transparent;
	--button-secondary-text-color: var(--color-brand-50);
	--button-secondary-border-color: currentColor;
	--button-secondary-background-color-hover: var(--color-brand-200);
	--button-secondary-text-color-hover: var(--color-black);
	--button-secondary-border-color-hover: var(--color-brand-200);
	--button-secondary-background-color-active: var(--color-brand-300);
	--button-secondary-text-color-active: var(--color-black);
	--button-secondary-border-color-active: var(--color-brand-300);

	--button-tertiary-background-color: transparent;
	--button-tertiary-text-color: var(--color-brand-50);
	--button-tertiary-text-color-hover: var(--color-brand-50);
	--button-tertiary-text-color-active: var(--color-brand-50);
	--button-tertiary-background-hover: var(--color-opacity-brand-secondary-016);
	--button-tertiary-background-active: var(--color-opacity-brand-secondary-024);

	--avatar-background: var(--color-brand-100);
	--avatar-text: var(--color-black);

	--color-opacity-brand-primary-008: rgba(255, 235, 225, 0.08);
	--color-opacity-brand-primary-016: rgba(255, 235, 225, 0.16);
	--color-opacity-brand-primary-024: rgba(255, 235, 225, 0.24);
}

/*
    Print
*/

@media print {
	[surface] {
		--link-color-primary: var(--color-black);
		--link-color-secondary: var(--color-black);

		--color-illustration-theme-100: var(--color-purple-100);
		--color-illustration-theme-200: var(--color-purple-300);
		--color-illustration-theme-300: var(--color-purple-500);
		--color-illustration-theme-400: var(--color-purple-700);

		--text-color-primary: var(--color-black);
		--text-color-secondary:	var(--color-black);
		--text-color-tertiary: var(--color-black);

		--input-border-color: var(--color-black);
		--input-background-color-checked: var(--color-orange-700);
		--input-border-color-checked: var(--color-orange-700);
		--input-icon-color: var(--color-orange-100);

		--border-color-primary: var(--color-grey-300);
		--border-color-secondary: var(--color-grey-300);
		--border-color-brand: var(--color-grey-300);
		--border-radius-button: 10rem;
		--border-width: 4px;

		--button-primary-background-color: var(--color-grey-200);
		--button-primary-text-color: var(--color-black);

		--button-secondary-background-color: var(--color-grey-200);
		--button-secondary-text-color: var(--color-black);

		--button-tertiary-background-color: transparent;
		--button-tertiary-text-color: var(--color-black);

		--surface-color-background: none;
		--surface-color-text: var(--color-black);
		--surface-color-icon: var(--color-black);

		background: var(--surface-color-background);
		color: var(--surface-color-text);
	}
}