.db-bg-base-transparent-full, .db-bg-base-transparent-semi, .db-bg-base, .db-bg-base-interactive {
  --db-current-base-color: var(--db-base-text-enabled);
  --db-current-color: var(--db-base-on-bg-enabled);
  --db-current-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-base-bg-enabled)
  );
  --db-current-element-color: var(--db-base-element-enabled);
  --db-current-border-color: var(--db-base-border-enabled);
  --db-current-border-weak-color: var(
  	--db-base-border-weak-enabled
  );
  --db-focus-box-shadow-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-base-bg-enabled)
  );
}

.db-bg-base, .db-bg-base-interactive {
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
.db-bg-base-transparent-full, .db-bg-base-transparent-semi {
  color: var(--db-base-on-bg-enabled);
  background-color: color-mix(in srgb, transparent var(--db-bg-transparent, 100%), var(--db-current-base-color));
}
.db-bg-base-transparent-semi {
  background-color: color-mix(in srgb, transparent var(--db-bg-transparent, 92%), var(--db-current-base-color));
}
.db-bg-base-interactive:enabled:hover {
  --db-bg-transparent: 84%;
}
.db-bg-base-interactive:enabled:active {
  --db-bg-transparent: 68%;
}
[data-emphasis=weak].db-bg-base, [data-emphasis=weak].db-bg-base-interactive {
  --db-current-color: var(--db-base-on-bg-weak-enabled);
  color: var(--db-current-color);
}
.db-bg-base-strong {
  --db-current-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-base-bg-strong-enabled)
  );
}

.db-bg-neutral-transparent-full, .db-bg-neutral-transparent-semi, .db-bg-neutral, .db-bg-neutral-interactive {
  --db-current-base-color: var(--db-neutral-text-enabled);
  --db-current-color: var(--db-neutral-on-bg-enabled);
  --db-current-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-neutral-bg-enabled)
  );
  --db-current-element-color: var(--db-neutral-element-enabled);
  --db-current-border-color: var(--db-neutral-border-enabled);
  --db-current-border-weak-color: var(
  	--db-neutral-border-weak-enabled
  );
  --db-focus-box-shadow-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-neutral-bg-enabled)
  );
}

.db-bg-neutral, .db-bg-neutral-interactive {
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
.db-bg-neutral-transparent-full, .db-bg-neutral-transparent-semi {
  color: var(--db-neutral-on-bg-enabled);
  background-color: color-mix(in srgb, transparent var(--db-bg-transparent, 100%), var(--db-current-base-color));
}
.db-bg-neutral-transparent-semi {
  background-color: color-mix(in srgb, transparent var(--db-bg-transparent, 92%), var(--db-current-base-color));
}
.db-bg-neutral-interactive:enabled:hover {
  --db-bg-transparent: 84%;
}
.db-bg-neutral-interactive:enabled:active {
  --db-bg-transparent: 68%;
}
[data-emphasis=weak].db-bg-neutral, [data-emphasis=weak].db-bg-neutral-interactive {
  --db-current-color: var(--db-neutral-on-bg-weak-enabled);
  color: var(--db-current-color);
}
.db-bg-neutral-strong {
  --db-current-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-neutral-bg-strong-enabled)
  );
}

.db-bg-brand-transparent-full, .db-bg-brand-transparent-semi, .db-bg-brand, .db-bg-brand-interactive {
  --db-current-base-color: var(--db-brand-text-enabled);
  --db-current-color: var(--db-brand-on-bg-enabled);
  --db-current-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-brand-bg-enabled)
  );
  --db-current-element-color: var(--db-brand-element-enabled);
  --db-current-border-color: var(--db-brand-border-enabled);
  --db-current-border-weak-color: var(
  	--db-brand-border-weak-enabled
  );
  --db-focus-box-shadow-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-brand-bg-enabled)
  );
}

.db-bg-brand, .db-bg-brand-interactive {
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
.db-bg-brand-transparent-full, .db-bg-brand-transparent-semi {
  color: var(--db-brand-on-bg-enabled);
  background-color: color-mix(in srgb, transparent var(--db-bg-transparent, 100%), var(--db-current-base-color));
}
.db-bg-brand-transparent-semi {
  background-color: color-mix(in srgb, transparent var(--db-bg-transparent, 92%), var(--db-current-base-color));
}
.db-bg-brand-interactive:enabled:hover {
  --db-bg-transparent: 84%;
}
.db-bg-brand-interactive:enabled:active {
  --db-bg-transparent: 68%;
}
[data-emphasis=weak].db-bg-brand, [data-emphasis=weak].db-bg-brand-interactive {
  --db-current-color: var(--db-brand-on-bg-weak-enabled);
  color: var(--db-current-color);
}
.db-bg-brand-strong {
  --db-current-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-brand-bg-strong-enabled)
  );
}

.db-bg-critical-transparent-full, .db-bg-critical-transparent-semi, .db-bg-critical, .db-bg-critical-interactive {
  --db-current-base-color: var(--db-critical-text-enabled);
  --db-current-color: var(--db-critical-on-bg-enabled);
  --db-current-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-critical-bg-enabled)
  );
  --db-current-element-color: var(--db-critical-element-enabled);
  --db-current-border-color: var(--db-critical-border-enabled);
  --db-current-border-weak-color: var(
  	--db-critical-border-weak-enabled
  );
  --db-focus-box-shadow-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-critical-bg-enabled)
  );
}

.db-bg-critical, .db-bg-critical-interactive {
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
.db-bg-critical-transparent-full, .db-bg-critical-transparent-semi {
  color: var(--db-critical-on-bg-enabled);
  background-color: color-mix(in srgb, transparent var(--db-bg-transparent, 100%), var(--db-current-base-color));
}
.db-bg-critical-transparent-semi {
  background-color: color-mix(in srgb, transparent var(--db-bg-transparent, 92%), var(--db-current-base-color));
}
.db-bg-critical-interactive:enabled:hover {
  --db-bg-transparent: 84%;
}
.db-bg-critical-interactive:enabled:active {
  --db-bg-transparent: 68%;
}
[data-emphasis=weak].db-bg-critical, [data-emphasis=weak].db-bg-critical-interactive {
  --db-current-color: var(--db-critical-on-bg-weak-enabled);
  color: var(--db-current-color);
}
.db-bg-critical-strong {
  --db-current-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-critical-bg-strong-enabled)
  );
}

.db-bg-successful-transparent-full, .db-bg-successful-transparent-semi, .db-bg-successful, .db-bg-successful-interactive {
  --db-current-base-color: var(--db-successful-text-enabled);
  --db-current-color: var(--db-successful-on-bg-enabled);
  --db-current-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-successful-bg-enabled)
  );
  --db-current-element-color: var(--db-successful-element-enabled);
  --db-current-border-color: var(--db-successful-border-enabled);
  --db-current-border-weak-color: var(
  	--db-successful-border-weak-enabled
  );
  --db-focus-box-shadow-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-successful-bg-enabled)
  );
}

.db-bg-successful, .db-bg-successful-interactive {
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
.db-bg-successful-transparent-full, .db-bg-successful-transparent-semi {
  color: var(--db-successful-on-bg-enabled);
  background-color: color-mix(in srgb, transparent var(--db-bg-transparent, 100%), var(--db-current-base-color));
}
.db-bg-successful-transparent-semi {
  background-color: color-mix(in srgb, transparent var(--db-bg-transparent, 92%), var(--db-current-base-color));
}
.db-bg-successful-interactive:enabled:hover {
  --db-bg-transparent: 84%;
}
.db-bg-successful-interactive:enabled:active {
  --db-bg-transparent: 68%;
}
[data-emphasis=weak].db-bg-successful, [data-emphasis=weak].db-bg-successful-interactive {
  --db-current-color: var(--db-successful-on-bg-weak-enabled);
  color: var(--db-current-color);
}
.db-bg-successful-strong {
  --db-current-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-successful-bg-strong-enabled)
  );
}

.db-bg-warning-transparent-full, .db-bg-warning-transparent-semi, .db-bg-warning, .db-bg-warning-interactive {
  --db-current-base-color: var(--db-warning-text-enabled);
  --db-current-color: var(--db-warning-on-bg-enabled);
  --db-current-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-warning-bg-enabled)
  );
  --db-current-element-color: var(--db-warning-element-enabled);
  --db-current-border-color: var(--db-warning-border-enabled);
  --db-current-border-weak-color: var(
  	--db-warning-border-weak-enabled
  );
  --db-focus-box-shadow-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-warning-bg-enabled)
  );
}

.db-bg-warning, .db-bg-warning-interactive {
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
.db-bg-warning-transparent-full, .db-bg-warning-transparent-semi {
  color: var(--db-warning-on-bg-enabled);
  background-color: color-mix(in srgb, transparent var(--db-bg-transparent, 100%), var(--db-current-base-color));
}
.db-bg-warning-transparent-semi {
  background-color: color-mix(in srgb, transparent var(--db-bg-transparent, 92%), var(--db-current-base-color));
}
.db-bg-warning-interactive:enabled:hover {
  --db-bg-transparent: 84%;
}
.db-bg-warning-interactive:enabled:active {
  --db-bg-transparent: 68%;
}
[data-emphasis=weak].db-bg-warning, [data-emphasis=weak].db-bg-warning-interactive {
  --db-current-color: var(--db-warning-on-bg-weak-enabled);
  color: var(--db-current-color);
}
.db-bg-warning-strong {
  --db-current-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-warning-bg-strong-enabled)
  );
}

.db-bg-informational-transparent-full, .db-bg-informational-transparent-semi, .db-bg-informational, .db-bg-informational-interactive {
  --db-current-base-color: var(--db-informational-text-enabled);
  --db-current-color: var(--db-informational-on-bg-enabled);
  --db-current-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-informational-bg-enabled)
  );
  --db-current-element-color: var(--db-informational-element-enabled);
  --db-current-border-color: var(--db-informational-border-enabled);
  --db-current-border-weak-color: var(
  	--db-informational-border-weak-enabled
  );
  --db-focus-box-shadow-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-informational-bg-enabled)
  );
}

.db-bg-informational, .db-bg-informational-interactive {
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
.db-bg-informational-transparent-full, .db-bg-informational-transparent-semi {
  color: var(--db-informational-on-bg-enabled);
  background-color: color-mix(in srgb, transparent var(--db-bg-transparent, 100%), var(--db-current-base-color));
}
.db-bg-informational-transparent-semi {
  background-color: color-mix(in srgb, transparent var(--db-bg-transparent, 92%), var(--db-current-base-color));
}
.db-bg-informational-interactive:enabled:hover {
  --db-bg-transparent: 84%;
}
.db-bg-informational-interactive:enabled:active {
  --db-bg-transparent: 68%;
}
[data-emphasis=weak].db-bg-informational, [data-emphasis=weak].db-bg-informational-interactive {
  --db-current-color: var(--db-informational-on-bg-weak-enabled);
  color: var(--db-current-color);
}
.db-bg-informational-strong {
  --db-current-bg-color: color-mix(
  	in srgb,
  	transparent var(--db-bg-transparent, 0%),
  	var(--db-informational-bg-strong-enabled)
  );
}

/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height*/
/* Use fixed spacings for all kind of distances (margin, padding, ...) */
/* The primary use-case for responsive spacings are
paddings/gaps in an application e.g. the <main> should have a responsive padding. */
/* Elevation */
/* Opacity */
/* Border */
/* Transitions */
