.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 */
