.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)
  );
}
