/*!
 * Themes/Colors
 */

/* Background */

.bg-background {
	--x-sys-overlay-multiplier: var(--x-sys-color-background-overlay-multiplier);

	background-color: rgb(var(--x-sys-color-background)) !important;
	color: rgb(var(--x-sys-color-on-background)) !important;
}

.text-background {
	caret-color: rgb(var(--x-sys-color-background)) !important;
	color: rgb(var(--x-sys-color-background)) !important;
}

.text-on-background {
	caret-color: rgb(var(--x-sys-color-on-background)) !important;
	color: rgb(var(--x-sys-color-on-background)) !important;
}

.border-background {
	--x-sys-color-outline: var(--x-sys-color-background) !important;
}

/* Surface */

.bg-surface {
	--x-sys-overlay-multiplier: var(--x-sys-color-surface-overlay-multiplier);

	background-color: rgb(var(--x-sys-color-surface)) !important;
	color: rgb(var(--x-sys-color-on-surface)) !important;
}

.text-surface {
	caret-color: rgb(var(--x-sys-color-surface)) !important;
	color: rgb(var(--x-sys-color-surface)) !important;
}

.text-on-surface {
	caret-color: rgb(var(--x-sys-color-on-surface)) !important;
	color: rgb(var(--x-sys-color-on-surface)) !important;
}

.border-surface {
	--x-sys-color-outline: var(--x-sys-color-surface) !important;
}

/* Surface container */

.bg-surface-variant {
	--x-sys-overlay-multiplier: var(--x-sys-color-surface-variant-overlay-multiplier);

	background-color: rgb(var(--x-sys-color-surface-variant)) !important;
	color: rgb(var(--x-sys-color-on-surface-variant)) !important;
}

.text-surface-variant {
	caret-color: rgb(var(--x-sys-color-surface-variant)) !important;
	color: rgb(var(--x-sys-color-surface-variant)) !important;
}

.text-on-surface-variant {
	caret-color: rgb(var(--x-sys-color-on-surface-variant)) !important;
	color: rgb(var(--x-sys-color-on-surface-variant)) !important;
}

.border-surface-variant {
	--x-sys-color-outline: var(--x-sys-color-surface-variant) !important;
}

/* Surface container low */

.bg-surface-container-low {
	--x-sys-overlay-multiplier: var(--x-sys-color-surface-container-low-overlay-multiplier);

	background-color: rgb(var(--x-sys-color-surface-container-low)) !important;
	color: rgb(var(--x-sys-color-on-surface-container-low)) !important;
}

.text-surface-container-low {
	caret-color: rgb(var(--x-sys-color-surface-container-low)) !important;
	color: rgb(var(--x-sys-color-surface-container-low)) !important;
}

.text-on-surface-container-low {
	caret-color: rgb(var(--x-sys-color-on-surface-container-low)) !important;
	color: rgb(var(--x-sys-color-on-surface-container-low)) !important;
}

.border-surface-container-low {
	--x-sys-color-outline: var(--x-sys-color-surface-container-low) !important;
}

/* Inverse surface */

.bg-inverse-surface {
	--x-sys-overlay-multiplier: var(--x-sys-color-inverse-surface-overlay-multiplier);

	background-color: rgb(var(--x-sys-color-inverse-surface)) !important;
	color: rgb(var(--x-sys-color-on-inverse-surface)) !important;
}

.text-inverse-surface {
	caret-color: rgb(var(--x-sys-color-inverse-surface)) !important;
	color: rgb(var(--x-sys-color-inverse-surface)) !important;
}

.text-on-inverse-surface {
	caret-color: rgb(var(--x-sys-color-on-inverse-surface)) !important;
	color: rgb(var(--x-sys-color-on-inverse-surface)) !important;
}

.border-inverse-surface {
	--x-sys-color-outline: var(--x-sys-color-inverse-surface) !important;
}

/* Primary */

.bg-primary {
	--x-sys-overlay-multiplier: var(--x-sys-color-primary-overlay-multiplier);

	background-color: rgb(var(--x-sys-color-primary)) !important;
	color: rgb(var(--x-sys-color-on-primary)) !important;
}

.text-primary {
	caret-color: rgb(var(--x-sys-color-primary)) !important;
	color: rgb(var(--x-sys-color-primary)) !important;
}

.text-on-primary {
	caret-color: rgb(var(--x-sys-color-on-primary)) !important;
	color: rgb(var(--x-sys-color-on-primary)) !important;
}

.border-primary {
	--x-sys-color-outline: var(--x-sys-color-primary) !important;
}

/* Secondary container */

.bg-secondary-container {
	--x-sys-overlay-multiplier: var(--x-sys-color-secondary-container-overlay-multiplier);

	background-color: rgb(var(--x-sys-color-secondary-container)) !important;
	color: rgb(var(--x-sys-color-on-secondary-container)) !important;
}

.text-secondary-container {
	caret-color: rgb(var(--x-sys-color-secondary-container)) !important;
	color: rgb(var(--x-sys-color-secondary-container)) !important;
}

.text-on-secondary-container {
	caret-color: rgb(var(--x-sys-color-on-secondary-container)) !important;
	color: rgb(var(--x-sys-color-on-secondary-container)) !important;
}

.border-secondary-container {
	--x-sys-color-outline: var(--x-sys-color-secondary-container) !important;
}

/* Tertiary container */

.bg-tertiary-container {
	--x-sys-overlay-multiplier: var(--x-sys-color-secondary-container-overlay-multiplier);

	background-color: rgb(var(--x-sys-color-tertiary-container)) !important;
	color: rgb(var(--x-sys-color-on-tertiary-container)) !important;
}

.text-tertiary-container {
	caret-color: rgb(var(--x-sys-color-tertiary-container)) !important;
	color: rgb(var(--x-sys-color-tertiary-container)) !important;
}

.text-on-tertiary-container {
	caret-color: rgb(var(--x-sys-color-on-tertiary-container)) !important;
	color: rgb(var(--x-sys-color-on-tertiary-container)) !important;
}

.border-tertiary-container {
	--x-sys-color-outline: var(--x-sys-color-tertiary-container) !important;
}

/* Error */

.bg-error {
	--x-sys-overlay-multiplier: var(--x-sys-color-error-overlay-multiplier);

	background-color: rgb(var(--x-sys-color-error)) !important;
	color: rgb(var(--x-sys-color-on-error)) !important;
}

.text-error {
	caret-color: rgb(var(--x-sys-color-error)) !important;
	color: rgb(var(--x-sys-color-error)) !important;
}

.text-on-error {
	caret-color: rgb(var(--x-sys-color-on-error)) !important;
	color: rgb(var(--x-sys-color-on-error)) !important;
}

.border-error {
	--x-sys-color-outline: var(--x-sys-color-error) !important;
}

/* Succes */

.bg-success {
	--x-sys-overlay-multiplier: var(--x-sys-color-success-overlay-multiplier);

	background-color: rgb(var(--x-sys-color-success)) !important;
	color: rgb(var(--x-sys-color-on-success)) !important;
}

.text-success {
	caret-color: rgb(var(--x-sys-color-success)) !important;
	color: rgb(var(--x-sys-color-success)) !important;
}

.text-on-success {
	caret-color: rgb(var(--x-sys-color-on-success)) !important;
	color: rgb(var(--x-sys-color-on-success)) !important;
}

.border-success {
	--x-sys-color-outline: var(--x-sys-color-success) !important;
}