.root {
	--example-background: var(--mdc-theme-surface);

	/* variables taken from @material/theme/dist/mdc.theme.css */
	--mdc-theme-primary: #bb86fc;
	--mdc-theme-secondary: #03dac6;
	--mdc-theme-background: #121212;
	--mdc-theme-surface: #121212;
	--mdc-theme-error: #cf6679;
	--mdc-theme-on-primary: #000;
	--mdc-theme-on-secondary: #000;
	--mdc-theme-on-surface: rgba(255, 255, 255, 0.09);
	--mdc-theme-on-surface-hover: rgba(255, 255, 255, 0.13);
	--mdc-theme-on-error: #000;
	--mdc-theme-text-primary-on-background: rgba(0, 0, 0, 0.87);
	--mdc-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54);
	--mdc-theme-text-hint-on-background: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-icon-on-background: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
	--mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);
	--mdc-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);
	--mdc-theme-text-primary-on-dark: white;
	--mdc-theme-text-secondary-on-dark: rgba(255, 255, 255, 0.7);
	--mdc-theme-text-hint-on-dark: rgba(255, 255, 255, 0.5);
	--mdc-theme-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
	--mdc-theme-text-icon-on-dark: rgba(255, 255, 255, 0.5);

	--mdc-text-color: var(--mdc-theme-text-primary-on-dark);
	--mdc-secondary-text-color: var(--mdc-theme-text-secondary-on-dark);
	--mdc-disabled-text-color: var(--mdc-theme-text-disabled-on-dark);
	--mdc-raised-surface-background: #424242;

	/* supplementary colours */
	--mdc-theme-info: #2196f3;
	--mdc-theme-alert: #ff5722;
	--mdc-theme-success: #4caf50;
	--mdc-theme-gold: #ffb400;

	/* layout */
	--mdc-theme-grid-base: 8px;
	--mdc-theme-border-radius: 4px;

	/* elevations */
	--mdc-theme-elevation-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
		0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
	--mdc-theme-elevation-2: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
		0 3px 14px 2px rgba(0, 0, 0, 0.12);

	/* font details */
	--mdc-theme-font-family: Roboto, sans-serif;
	--mdc-theme-font-size-small: 0.875rem;

	/* borders */
	--mdc-border-color: rgba(255, 255, 255, 0.8);
	--mdc-solid-border-color: #cccccc;
	--mdc-border-color-hover: rgba(255, 255, 255);
	--mdc-solid-border-color-hover: rgba(255, 255, 255);
	--mdc-border-width: 1px;

	/* avatar sizes */
	--mdc-avatar-size-small: 24px;
	--mdc-avatar-size-medium: 40px;
	--mdc-avatar-size-large: 56px;

	/* ripple */
	--mdc-ripple-color: hsla(0, 0%, 100%, 0.87);

	/* Text Input */
	--mdc-text-input-background: var(--mdc-theme-on-surface);

	/* Checkbox */
	--mdc-checkbox-background-enabled: transparent;
	--mdc-checkbox-background-checked: var(--mdc-theme-secondary);
	--mdc-checkbox-check: var(--mdc-theme-surface);

	/* Extras */
	--mdc-theme-background-active: #f1f1f1;
	--mdc-theme-background-selected: #e1e1e1;

	--mdc-theme-heading-font-weight: 500;
	--mdc-theme-separator: #e0e0e0;

	--mdc-font-size-xs: 12px;
	--mdc-font-size-small: 14px;
	--mdc-font-size-medium: 16px;
	--mdc-font-size-large: 22px;
	--mdc-font-size-xl: 24px;
	--mdc-font-size-xxl: 26px;

	--mdc-font-weight-light: 300;
	--mdc-font-weight-normal: normal;
	--mdc-font-weight-heavy: 700;

	--mdc-disabled-color: var(--mdc-theme-text-hint-on-dark);

	--mdc-tab-background: var(--mdc-raised-surface-background);
	--mdc-tab-content-background: var(--mdc-tab-background);
	--mdc-tab-button-background: var(--mdc-tab-background);
	--mdc-tab-button-text-color: var(--mdc-secondary-text-color);
	--mdc-tab-button-active-text-color: var(--mdc-theme-primary);
	--mdc-tab-button-disabled-text-color: var(--mdc-disabled-text-color);

	--mdc-tooltip-background: #6d6d6d;
	--mdc-chip-background: #6d6d6d;
	--mdc-chip-color: var(--mdc-text-color);
	--mdc-chip-background-hover: #8d8d8d;
	--mdc-snackbar-background: var(--mdc-raised-surface-background);

	--loader-size-small: 24px;
	--loader-size-medium: 36px;
	--loader-size-large: 48px;

	--mdc-list-item-selected-background: var(--mdc-theme-on-surface-hover);
	--mdc-list-item-selected-color: var(--mdc-text-color);
	--mdc-list-item-disabled-background: inherit;
	--mdc-list-item-disabled-color: var(--mdc-text-color);
	--mdc-list-item-active-background: var(--mdc-theme-on-surface);
	--mdc-list-item-active-color: var(--mdc-text-color);
	--mdc-list-item-hover-background: var(--mdc-theme-on-surface);
	--mdc-list-item-hover-color: var(--mdc-text-color);

	--mdc-vstack-padding-small: var(--mdc-theme-grid-base);
	--mdc-vstack-padding-medium: calc(var(--mdc-theme-grid-base) * 1.5);
	--mdc-vstack-padding-large: calc(var(--mdc-theme-grid-base) * 2);
	--mdc-vstack-spacing-small: var(--mdc-theme-grid-base);
	--mdc-vstack-spacing-medium: calc(var(--mdc-theme-grid-base) * 1.5);
	--mdc-vstack-spacing-large: calc(var(--mdc-theme-grid-base) * 2);

	--mdc-hstack-padding-small: var(--mdc-theme-grid-base);
	--mdc-hstack-padding-medium: calc(var(--mdc-theme-grid-base) * 1.5);
	--mdc-hstack-padding-large: calc(var(--mdc-theme-grid-base) * 2);
	--mdc-hstack-spacing-small: var(--mdc-theme-grid-base);
	--mdc-hstack-spacing-medium: calc(var(--mdc-theme-grid-base) * 1.5);
	--mdc-hstack-spacing-large: calc(var(--mdc-theme-grid-base) * 2);

	--mdc-button-primary: var(--mdc-theme-primary);
	--mdc-button-text-on-primary: var(--mdc-theme-on-primary);
}
