/* Variants for adaptive components like input, select, notification, ... */
/* Palette colors */
/* Note: In general you don't need this file. Use this only if you really know what you do! */
/* Palette for additional colors */
/* Note: In general you don't need this file. Use this only if you really know what you do! */
[data-color=neutral-contrast-high],
.db-neutral-contrast-high, [data-color=neutral-contrast-high-interactive],
.db-neutral-contrast-high-interactive {
  --db-current-color-border: var(
  	--db-neutral-contrast-high-enabled
  );
  background-color: var(--db-neutral-contrast-high-enabled);
  color: var(--db-neutral-on-contrast-enabled);
}
[data-color=neutral-contrast-high]::before,
.db-neutral-contrast-high::before, [data-color=neutral-contrast-high-interactive]::before,
.db-neutral-contrast-high-interactive::before, [data-color=neutral-contrast-high]::after,
.db-neutral-contrast-high::after, [data-color=neutral-contrast-high-interactive]::after,
.db-neutral-contrast-high-interactive::after {
  --db-icon-color: $on;
}

[data-color=neutral-contrast-high-interactive],
.db-neutral-contrast-high-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=neutral-contrast-high-interactive]:is(:hover, :focus),
.db-neutral-contrast-high-interactive:is(:hover, :focus) {
  background: var(--db-neutral-contrast-high-hover);
}
[data-color=neutral-contrast-high-interactive]:active,
.db-neutral-contrast-high-interactive:active {
  background: var(--db-neutral-contrast-high-pressed);
}

[data-color=neutral-contrast-low],
.db-neutral-contrast-low, [data-color=neutral-contrast-low-interactive],
.db-neutral-contrast-low-interactive {
  --db-current-color-border: var(
  	--db-neutral-contrast-low-enabled
  );
  background-color: var(--db-neutral-contrast-low-enabled);
  color: var(--db-neutral-on-contrast-enabled);
}
[data-color=neutral-contrast-low]::before,
.db-neutral-contrast-low::before, [data-color=neutral-contrast-low-interactive]::before,
.db-neutral-contrast-low-interactive::before, [data-color=neutral-contrast-low]::after,
.db-neutral-contrast-low::after, [data-color=neutral-contrast-low-interactive]::after,
.db-neutral-contrast-low-interactive::after {
  --db-icon-color: $on;
}

[data-color=neutral-contrast-low-interactive],
.db-neutral-contrast-low-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=neutral-contrast-low-interactive]:is(:hover, :focus),
.db-neutral-contrast-low-interactive:is(:hover, :focus) {
  background: var(--db-neutral-contrast-low-hover);
}
[data-color=neutral-contrast-low-interactive]:active,
.db-neutral-contrast-low-interactive:active {
  background: var(--db-neutral-contrast-low-pressed);
}

[data-container-color=neutral],
.db-container-color-neutral, [data-color=neutral-bg-transparent-semi],
.db-neutral-bg-transparent-semi, [data-color=neutral-bg-transparent-full],
.db-neutral-bg-transparent-full, [data-color=neutral-bg-lvl-3],
.db-neutral-bg-lvl-3, [data-color=neutral-bg-lvl-2],
.db-neutral-bg-lvl-2, [data-color=neutral-bg-lvl-1],
.db-neutral-bg-lvl-1 {
  /* used for transparent backgrounds */
  --db-current-color-bg-transparent-full-enabled: var(
  	--db-neutral-bg-transparent-full-enabled
  );
  --db-current-color-bg-transparent-semi-enabled: var(
  	--db-neutral-bg-transparent-semi-enabled
  );
  --db-current-color-bg-transparent-hover: var(
  	--db-neutral-bg-transparent-hover
  );
  --db-current-color-bg-transparent-pressed: var(
  	--db-neutral-bg-transparent-pressed
  );
  /* used for backgrounds */
  --db-current-color-bg-lvl-1-enabled: var(
  	--db-neutral-bg-lvl-1-enabled
  );
  --db-current-color-bg-lvl-2-enabled: var(
  	--db-neutral-bg-lvl-2-enabled
  );
  --db-current-color-bg-lvl-3-enabled: var(
  	--db-neutral-bg-lvl-3-enabled
  );
  /* used for icons and borders */
  --db-current-color-contrast-low-enabled: var(
  	--db-neutral-contrast-low-enabled
  );
  --db-current-color-contrast-low-hover: var(
  	--db-neutral-contrast-low-hover
  );
  --db-current-color-contrast-low-pressed: var(
  	--db-neutral-contrast-low-pressed
  );
  --db-current-color-border: var(--db-neutral-border);
  /* used for adaptive tags (interactive) */
  --db-current-color-bg-lvl-1-hover: var(--db-neutral-bg-lvl-1-hover);
  --db-current-color-bg-lvl-1-pressed: var(
  	--db-neutral-bg-lvl-1-pressed
  );
  --db-current-color-bg-lvl-2-hover: var(--db-neutral-bg-lvl-2-hover);
  --db-current-color-bg-lvl-2-pressed: var(
  	--db-neutral-bg-lvl-2-pressed
  );
  --db-current-color-bg-lvl-3-hover: var(--db-neutral-bg-lvl-3-hover);
  --db-current-color-bg-lvl-3-pressed: var(
  	--db-neutral-bg-lvl-3-pressed
  );
  /* used for adaptive tags (strong & interactive) */
  --db-current-color-on-contrast-enabled: var(
  	--db-neutral-on-contrast-enabled
  );
  --db-current-color-contrast-high-enabled: var(
  	--db-neutral-contrast-high-enabled
  );
  --db-current-color-contrast-high-hover: var(
  	--db-neutral-contrast-high-hover
  );
  --db-current-color-contrast-high-pressed: var(
  	--db-neutral-contrast-high-pressed
  );
  /* on-colors */
  --db-current-color-on-bg-enabled: var(--db-neutral-on-bg-enabled);
  --db-current-color-on-bg-hover: var(--db-neutral-on-bg-hover);
  --db-current-color-on-bg-pressed: var(--db-neutral-on-bg-pressed);
  /* weak colors */
  --db-current-color-on-bg-weak-enabled: var(
  	--db-neutral-on-bg-weak-enabled
  );
  --db-current-color-on-bg-weak-hover: var(
  	--db-neutral-on-bg-weak-hover
  );
  --db-current-color-on-bg-weak-pressed: var(
  	--db-neutral-on-bg-weak-pressed
  );
}

[data-color=neutral-bg-lvl-1],
.db-neutral-bg-lvl-1 {
  background-color: var(--db-neutral-bg-lvl-1-enabled);
  color: var(--db-neutral-on-bg-enabled);
}
[data-color=neutral-bg-lvl-1]::before,
.db-neutral-bg-lvl-1::before, [data-color=neutral-bg-lvl-1]::after,
.db-neutral-bg-lvl-1::after {
  --db-icon-color: $on;
}

[data-color=neutral-bg-lvl-2],
.db-neutral-bg-lvl-2 {
  background-color: var(--db-neutral-bg-lvl-2-enabled);
  color: var(--db-neutral-on-bg-enabled);
}
[data-color=neutral-bg-lvl-2]::before,
.db-neutral-bg-lvl-2::before, [data-color=neutral-bg-lvl-2]::after,
.db-neutral-bg-lvl-2::after {
  --db-icon-color: $on;
}

[data-color=neutral-bg-lvl-3],
.db-neutral-bg-lvl-3 {
  background-color: var(--db-neutral-bg-lvl-3-enabled);
  color: var(--db-neutral-on-bg-enabled);
}
[data-color=neutral-bg-lvl-3]::before,
.db-neutral-bg-lvl-3::before, [data-color=neutral-bg-lvl-3]::after,
.db-neutral-bg-lvl-3::after {
  --db-icon-color: $on;
}

[data-color=neutral-bg-transparent-full],
.db-neutral-bg-transparent-full {
  background-color: var(--db-neutral-bg-transparent-full-enabled);
  color: var(--db-neutral-on-bg-enabled);
}
[data-color=neutral-bg-transparent-full]::before,
.db-neutral-bg-transparent-full::before, [data-color=neutral-bg-transparent-full]::after,
.db-neutral-bg-transparent-full::after {
  --db-icon-color: $on;
}

[data-color=neutral-bg-transparent-semi],
.db-neutral-bg-transparent-semi {
  background-color: var(--db-neutral-bg-transparent-semi-enabled);
  color: var(--db-neutral-on-bg-enabled);
}
[data-color=neutral-bg-transparent-semi]::before,
.db-neutral-bg-transparent-semi::before, [data-color=neutral-bg-transparent-semi]::after,
.db-neutral-bg-transparent-semi::after {
  --db-icon-color: $on;
}

[data-color=brand-contrast-high],
.db-brand-contrast-high, [data-color=brand-contrast-high-interactive],
.db-brand-contrast-high-interactive {
  --db-current-color-border: var(
  	--db-brand-contrast-high-enabled
  );
  background-color: var(--db-brand-contrast-high-enabled);
  color: var(--db-brand-on-contrast-enabled);
}
[data-color=brand-contrast-high]::before,
.db-brand-contrast-high::before, [data-color=brand-contrast-high-interactive]::before,
.db-brand-contrast-high-interactive::before, [data-color=brand-contrast-high]::after,
.db-brand-contrast-high::after, [data-color=brand-contrast-high-interactive]::after,
.db-brand-contrast-high-interactive::after {
  --db-icon-color: $on;
}

[data-color=brand-contrast-high-interactive],
.db-brand-contrast-high-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=brand-contrast-high-interactive]:is(:hover, :focus),
.db-brand-contrast-high-interactive:is(:hover, :focus) {
  background: var(--db-brand-contrast-high-hover);
}
[data-color=brand-contrast-high-interactive]:active,
.db-brand-contrast-high-interactive:active {
  background: var(--db-brand-contrast-high-pressed);
}

[data-color=brand-contrast-low],
.db-brand-contrast-low, [data-color=brand-contrast-low-interactive],
.db-brand-contrast-low-interactive {
  --db-current-color-border: var(
  	--db-brand-contrast-low-enabled
  );
  background-color: var(--db-brand-contrast-low-enabled);
  color: var(--db-brand-on-contrast-enabled);
}
[data-color=brand-contrast-low]::before,
.db-brand-contrast-low::before, [data-color=brand-contrast-low-interactive]::before,
.db-brand-contrast-low-interactive::before, [data-color=brand-contrast-low]::after,
.db-brand-contrast-low::after, [data-color=brand-contrast-low-interactive]::after,
.db-brand-contrast-low-interactive::after {
  --db-icon-color: $on;
}

[data-color=brand-contrast-low-interactive],
.db-brand-contrast-low-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=brand-contrast-low-interactive]:is(:hover, :focus),
.db-brand-contrast-low-interactive:is(:hover, :focus) {
  background: var(--db-brand-contrast-low-hover);
}
[data-color=brand-contrast-low-interactive]:active,
.db-brand-contrast-low-interactive:active {
  background: var(--db-brand-contrast-low-pressed);
}

[data-container-color=brand],
.db-container-color-brand, [data-color=brand-bg-transparent-semi],
.db-brand-bg-transparent-semi, [data-color=brand-bg-transparent-full],
.db-brand-bg-transparent-full, [data-color=brand-bg-lvl-3],
.db-brand-bg-lvl-3, [data-color=brand-bg-lvl-2],
.db-brand-bg-lvl-2, [data-color=brand-bg-lvl-1],
.db-brand-bg-lvl-1 {
  /* used for transparent backgrounds */
  --db-current-color-bg-transparent-full-enabled: var(
  	--db-brand-bg-transparent-full-enabled
  );
  --db-current-color-bg-transparent-semi-enabled: var(
  	--db-brand-bg-transparent-semi-enabled
  );
  --db-current-color-bg-transparent-hover: var(
  	--db-brand-bg-transparent-hover
  );
  --db-current-color-bg-transparent-pressed: var(
  	--db-brand-bg-transparent-pressed
  );
  /* used for backgrounds */
  --db-current-color-bg-lvl-1-enabled: var(
  	--db-brand-bg-lvl-1-enabled
  );
  --db-current-color-bg-lvl-2-enabled: var(
  	--db-brand-bg-lvl-2-enabled
  );
  --db-current-color-bg-lvl-3-enabled: var(
  	--db-brand-bg-lvl-3-enabled
  );
  /* used for icons and borders */
  --db-current-color-contrast-low-enabled: var(
  	--db-brand-contrast-low-enabled
  );
  --db-current-color-contrast-low-hover: var(
  	--db-brand-contrast-low-hover
  );
  --db-current-color-contrast-low-pressed: var(
  	--db-brand-contrast-low-pressed
  );
  --db-current-color-border: var(--db-brand-border);
  /* used for adaptive tags (interactive) */
  --db-current-color-bg-lvl-1-hover: var(--db-brand-bg-lvl-1-hover);
  --db-current-color-bg-lvl-1-pressed: var(
  	--db-brand-bg-lvl-1-pressed
  );
  --db-current-color-bg-lvl-2-hover: var(--db-brand-bg-lvl-2-hover);
  --db-current-color-bg-lvl-2-pressed: var(
  	--db-brand-bg-lvl-2-pressed
  );
  --db-current-color-bg-lvl-3-hover: var(--db-brand-bg-lvl-3-hover);
  --db-current-color-bg-lvl-3-pressed: var(
  	--db-brand-bg-lvl-3-pressed
  );
  /* used for adaptive tags (strong & interactive) */
  --db-current-color-on-contrast-enabled: var(
  	--db-brand-on-contrast-enabled
  );
  --db-current-color-contrast-high-enabled: var(
  	--db-brand-contrast-high-enabled
  );
  --db-current-color-contrast-high-hover: var(
  	--db-brand-contrast-high-hover
  );
  --db-current-color-contrast-high-pressed: var(
  	--db-brand-contrast-high-pressed
  );
  /* on-colors */
  --db-current-color-on-bg-enabled: var(--db-brand-on-bg-enabled);
  --db-current-color-on-bg-hover: var(--db-brand-on-bg-hover);
  --db-current-color-on-bg-pressed: var(--db-brand-on-bg-pressed);
  /* weak colors */
  --db-current-color-on-bg-weak-enabled: var(
  	--db-brand-on-bg-weak-enabled
  );
  --db-current-color-on-bg-weak-hover: var(
  	--db-brand-on-bg-weak-hover
  );
  --db-current-color-on-bg-weak-pressed: var(
  	--db-brand-on-bg-weak-pressed
  );
}

[data-color=brand-bg-lvl-1],
.db-brand-bg-lvl-1 {
  background-color: var(--db-brand-bg-lvl-1-enabled);
  color: var(--db-brand-on-bg-enabled);
}
[data-color=brand-bg-lvl-1]::before,
.db-brand-bg-lvl-1::before, [data-color=brand-bg-lvl-1]::after,
.db-brand-bg-lvl-1::after {
  --db-icon-color: $on;
}

[data-color=brand-bg-lvl-2],
.db-brand-bg-lvl-2 {
  background-color: var(--db-brand-bg-lvl-2-enabled);
  color: var(--db-brand-on-bg-enabled);
}
[data-color=brand-bg-lvl-2]::before,
.db-brand-bg-lvl-2::before, [data-color=brand-bg-lvl-2]::after,
.db-brand-bg-lvl-2::after {
  --db-icon-color: $on;
}

[data-color=brand-bg-lvl-3],
.db-brand-bg-lvl-3 {
  background-color: var(--db-brand-bg-lvl-3-enabled);
  color: var(--db-brand-on-bg-enabled);
}
[data-color=brand-bg-lvl-3]::before,
.db-brand-bg-lvl-3::before, [data-color=brand-bg-lvl-3]::after,
.db-brand-bg-lvl-3::after {
  --db-icon-color: $on;
}

[data-color=brand-bg-transparent-full],
.db-brand-bg-transparent-full {
  background-color: var(--db-brand-bg-transparent-full-enabled);
  color: var(--db-brand-on-bg-enabled);
}
[data-color=brand-bg-transparent-full]::before,
.db-brand-bg-transparent-full::before, [data-color=brand-bg-transparent-full]::after,
.db-brand-bg-transparent-full::after {
  --db-icon-color: $on;
}

[data-color=brand-bg-transparent-semi],
.db-brand-bg-transparent-semi {
  background-color: var(--db-brand-bg-transparent-semi-enabled);
  color: var(--db-brand-on-bg-enabled);
}
[data-color=brand-bg-transparent-semi]::before,
.db-brand-bg-transparent-semi::before, [data-color=brand-bg-transparent-semi]::after,
.db-brand-bg-transparent-semi::after {
  --db-icon-color: $on;
}

[data-color=critical-contrast-high],
.db-critical-contrast-high, [data-color=critical-contrast-high-interactive],
.db-critical-contrast-high-interactive {
  --db-current-color-border: var(
  	--db-critical-contrast-high-enabled
  );
  background-color: var(--db-critical-contrast-high-enabled);
  color: var(--db-critical-on-contrast-enabled);
}
[data-color=critical-contrast-high]::before,
.db-critical-contrast-high::before, [data-color=critical-contrast-high-interactive]::before,
.db-critical-contrast-high-interactive::before, [data-color=critical-contrast-high]::after,
.db-critical-contrast-high::after, [data-color=critical-contrast-high-interactive]::after,
.db-critical-contrast-high-interactive::after {
  --db-icon-color: $on;
}

[data-color=critical-contrast-high-interactive],
.db-critical-contrast-high-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=critical-contrast-high-interactive]:is(:hover, :focus),
.db-critical-contrast-high-interactive:is(:hover, :focus) {
  background: var(--db-critical-contrast-high-hover);
}
[data-color=critical-contrast-high-interactive]:active,
.db-critical-contrast-high-interactive:active {
  background: var(--db-critical-contrast-high-pressed);
}

[data-color=critical-contrast-low],
.db-critical-contrast-low, [data-color=critical-contrast-low-interactive],
.db-critical-contrast-low-interactive {
  --db-current-color-border: var(
  	--db-critical-contrast-low-enabled
  );
  background-color: var(--db-critical-contrast-low-enabled);
  color: var(--db-critical-on-contrast-enabled);
}
[data-color=critical-contrast-low]::before,
.db-critical-contrast-low::before, [data-color=critical-contrast-low-interactive]::before,
.db-critical-contrast-low-interactive::before, [data-color=critical-contrast-low]::after,
.db-critical-contrast-low::after, [data-color=critical-contrast-low-interactive]::after,
.db-critical-contrast-low-interactive::after {
  --db-icon-color: $on;
}

[data-color=critical-contrast-low-interactive],
.db-critical-contrast-low-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=critical-contrast-low-interactive]:is(:hover, :focus),
.db-critical-contrast-low-interactive:is(:hover, :focus) {
  background: var(--db-critical-contrast-low-hover);
}
[data-color=critical-contrast-low-interactive]:active,
.db-critical-contrast-low-interactive:active {
  background: var(--db-critical-contrast-low-pressed);
}

[data-container-color=critical],
.db-container-color-critical, [data-color=critical-bg-transparent-semi],
.db-critical-bg-transparent-semi, [data-color=critical-bg-transparent-full],
.db-critical-bg-transparent-full, [data-color=critical-bg-lvl-3],
.db-critical-bg-lvl-3, [data-color=critical-bg-lvl-2],
.db-critical-bg-lvl-2, [data-color=critical-bg-lvl-1],
.db-critical-bg-lvl-1 {
  /* used for transparent backgrounds */
  --db-current-color-bg-transparent-full-enabled: var(
  	--db-critical-bg-transparent-full-enabled
  );
  --db-current-color-bg-transparent-semi-enabled: var(
  	--db-critical-bg-transparent-semi-enabled
  );
  --db-current-color-bg-transparent-hover: var(
  	--db-critical-bg-transparent-hover
  );
  --db-current-color-bg-transparent-pressed: var(
  	--db-critical-bg-transparent-pressed
  );
  /* used for backgrounds */
  --db-current-color-bg-lvl-1-enabled: var(
  	--db-critical-bg-lvl-1-enabled
  );
  --db-current-color-bg-lvl-2-enabled: var(
  	--db-critical-bg-lvl-2-enabled
  );
  --db-current-color-bg-lvl-3-enabled: var(
  	--db-critical-bg-lvl-3-enabled
  );
  /* used for icons and borders */
  --db-current-color-contrast-low-enabled: var(
  	--db-critical-contrast-low-enabled
  );
  --db-current-color-contrast-low-hover: var(
  	--db-critical-contrast-low-hover
  );
  --db-current-color-contrast-low-pressed: var(
  	--db-critical-contrast-low-pressed
  );
  --db-current-color-border: var(--db-critical-border);
  /* used for adaptive tags (interactive) */
  --db-current-color-bg-lvl-1-hover: var(--db-critical-bg-lvl-1-hover);
  --db-current-color-bg-lvl-1-pressed: var(
  	--db-critical-bg-lvl-1-pressed
  );
  --db-current-color-bg-lvl-2-hover: var(--db-critical-bg-lvl-2-hover);
  --db-current-color-bg-lvl-2-pressed: var(
  	--db-critical-bg-lvl-2-pressed
  );
  --db-current-color-bg-lvl-3-hover: var(--db-critical-bg-lvl-3-hover);
  --db-current-color-bg-lvl-3-pressed: var(
  	--db-critical-bg-lvl-3-pressed
  );
  /* used for adaptive tags (strong & interactive) */
  --db-current-color-on-contrast-enabled: var(
  	--db-critical-on-contrast-enabled
  );
  --db-current-color-contrast-high-enabled: var(
  	--db-critical-contrast-high-enabled
  );
  --db-current-color-contrast-high-hover: var(
  	--db-critical-contrast-high-hover
  );
  --db-current-color-contrast-high-pressed: var(
  	--db-critical-contrast-high-pressed
  );
  /* on-colors */
  --db-current-color-on-bg-enabled: var(--db-critical-on-bg-enabled);
  --db-current-color-on-bg-hover: var(--db-critical-on-bg-hover);
  --db-current-color-on-bg-pressed: var(--db-critical-on-bg-pressed);
  /* weak colors */
  --db-current-color-on-bg-weak-enabled: var(
  	--db-critical-on-bg-weak-enabled
  );
  --db-current-color-on-bg-weak-hover: var(
  	--db-critical-on-bg-weak-hover
  );
  --db-current-color-on-bg-weak-pressed: var(
  	--db-critical-on-bg-weak-pressed
  );
}

[data-color=critical-bg-lvl-1],
.db-critical-bg-lvl-1 {
  background-color: var(--db-critical-bg-lvl-1-enabled);
  color: var(--db-critical-on-bg-enabled);
}
[data-color=critical-bg-lvl-1]::before,
.db-critical-bg-lvl-1::before, [data-color=critical-bg-lvl-1]::after,
.db-critical-bg-lvl-1::after {
  --db-icon-color: $on;
}

[data-color=critical-bg-lvl-2],
.db-critical-bg-lvl-2 {
  background-color: var(--db-critical-bg-lvl-2-enabled);
  color: var(--db-critical-on-bg-enabled);
}
[data-color=critical-bg-lvl-2]::before,
.db-critical-bg-lvl-2::before, [data-color=critical-bg-lvl-2]::after,
.db-critical-bg-lvl-2::after {
  --db-icon-color: $on;
}

[data-color=critical-bg-lvl-3],
.db-critical-bg-lvl-3 {
  background-color: var(--db-critical-bg-lvl-3-enabled);
  color: var(--db-critical-on-bg-enabled);
}
[data-color=critical-bg-lvl-3]::before,
.db-critical-bg-lvl-3::before, [data-color=critical-bg-lvl-3]::after,
.db-critical-bg-lvl-3::after {
  --db-icon-color: $on;
}

[data-color=critical-bg-transparent-full],
.db-critical-bg-transparent-full {
  background-color: var(--db-critical-bg-transparent-full-enabled);
  color: var(--db-critical-on-bg-enabled);
}
[data-color=critical-bg-transparent-full]::before,
.db-critical-bg-transparent-full::before, [data-color=critical-bg-transparent-full]::after,
.db-critical-bg-transparent-full::after {
  --db-icon-color: $on;
}

[data-color=critical-bg-transparent-semi],
.db-critical-bg-transparent-semi {
  background-color: var(--db-critical-bg-transparent-semi-enabled);
  color: var(--db-critical-on-bg-enabled);
}
[data-color=critical-bg-transparent-semi]::before,
.db-critical-bg-transparent-semi::before, [data-color=critical-bg-transparent-semi]::after,
.db-critical-bg-transparent-semi::after {
  --db-icon-color: $on;
}

[data-color=successful-contrast-high],
.db-successful-contrast-high, [data-color=successful-contrast-high-interactive],
.db-successful-contrast-high-interactive {
  --db-current-color-border: var(
  	--db-successful-contrast-high-enabled
  );
  background-color: var(--db-successful-contrast-high-enabled);
  color: var(--db-successful-on-contrast-enabled);
}
[data-color=successful-contrast-high]::before,
.db-successful-contrast-high::before, [data-color=successful-contrast-high-interactive]::before,
.db-successful-contrast-high-interactive::before, [data-color=successful-contrast-high]::after,
.db-successful-contrast-high::after, [data-color=successful-contrast-high-interactive]::after,
.db-successful-contrast-high-interactive::after {
  --db-icon-color: $on;
}

[data-color=successful-contrast-high-interactive],
.db-successful-contrast-high-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=successful-contrast-high-interactive]:is(:hover, :focus),
.db-successful-contrast-high-interactive:is(:hover, :focus) {
  background: var(--db-successful-contrast-high-hover);
}
[data-color=successful-contrast-high-interactive]:active,
.db-successful-contrast-high-interactive:active {
  background: var(--db-successful-contrast-high-pressed);
}

[data-color=successful-contrast-low],
.db-successful-contrast-low, [data-color=successful-contrast-low-interactive],
.db-successful-contrast-low-interactive {
  --db-current-color-border: var(
  	--db-successful-contrast-low-enabled
  );
  background-color: var(--db-successful-contrast-low-enabled);
  color: var(--db-successful-on-contrast-enabled);
}
[data-color=successful-contrast-low]::before,
.db-successful-contrast-low::before, [data-color=successful-contrast-low-interactive]::before,
.db-successful-contrast-low-interactive::before, [data-color=successful-contrast-low]::after,
.db-successful-contrast-low::after, [data-color=successful-contrast-low-interactive]::after,
.db-successful-contrast-low-interactive::after {
  --db-icon-color: $on;
}

[data-color=successful-contrast-low-interactive],
.db-successful-contrast-low-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=successful-contrast-low-interactive]:is(:hover, :focus),
.db-successful-contrast-low-interactive:is(:hover, :focus) {
  background: var(--db-successful-contrast-low-hover);
}
[data-color=successful-contrast-low-interactive]:active,
.db-successful-contrast-low-interactive:active {
  background: var(--db-successful-contrast-low-pressed);
}

[data-container-color=successful],
.db-container-color-successful, [data-color=successful-bg-transparent-semi],
.db-successful-bg-transparent-semi, [data-color=successful-bg-transparent-full],
.db-successful-bg-transparent-full, [data-color=successful-bg-lvl-3],
.db-successful-bg-lvl-3, [data-color=successful-bg-lvl-2],
.db-successful-bg-lvl-2, [data-color=successful-bg-lvl-1],
.db-successful-bg-lvl-1 {
  /* used for transparent backgrounds */
  --db-current-color-bg-transparent-full-enabled: var(
  	--db-successful-bg-transparent-full-enabled
  );
  --db-current-color-bg-transparent-semi-enabled: var(
  	--db-successful-bg-transparent-semi-enabled
  );
  --db-current-color-bg-transparent-hover: var(
  	--db-successful-bg-transparent-hover
  );
  --db-current-color-bg-transparent-pressed: var(
  	--db-successful-bg-transparent-pressed
  );
  /* used for backgrounds */
  --db-current-color-bg-lvl-1-enabled: var(
  	--db-successful-bg-lvl-1-enabled
  );
  --db-current-color-bg-lvl-2-enabled: var(
  	--db-successful-bg-lvl-2-enabled
  );
  --db-current-color-bg-lvl-3-enabled: var(
  	--db-successful-bg-lvl-3-enabled
  );
  /* used for icons and borders */
  --db-current-color-contrast-low-enabled: var(
  	--db-successful-contrast-low-enabled
  );
  --db-current-color-contrast-low-hover: var(
  	--db-successful-contrast-low-hover
  );
  --db-current-color-contrast-low-pressed: var(
  	--db-successful-contrast-low-pressed
  );
  --db-current-color-border: var(--db-successful-border);
  /* used for adaptive tags (interactive) */
  --db-current-color-bg-lvl-1-hover: var(--db-successful-bg-lvl-1-hover);
  --db-current-color-bg-lvl-1-pressed: var(
  	--db-successful-bg-lvl-1-pressed
  );
  --db-current-color-bg-lvl-2-hover: var(--db-successful-bg-lvl-2-hover);
  --db-current-color-bg-lvl-2-pressed: var(
  	--db-successful-bg-lvl-2-pressed
  );
  --db-current-color-bg-lvl-3-hover: var(--db-successful-bg-lvl-3-hover);
  --db-current-color-bg-lvl-3-pressed: var(
  	--db-successful-bg-lvl-3-pressed
  );
  /* used for adaptive tags (strong & interactive) */
  --db-current-color-on-contrast-enabled: var(
  	--db-successful-on-contrast-enabled
  );
  --db-current-color-contrast-high-enabled: var(
  	--db-successful-contrast-high-enabled
  );
  --db-current-color-contrast-high-hover: var(
  	--db-successful-contrast-high-hover
  );
  --db-current-color-contrast-high-pressed: var(
  	--db-successful-contrast-high-pressed
  );
  /* on-colors */
  --db-current-color-on-bg-enabled: var(--db-successful-on-bg-enabled);
  --db-current-color-on-bg-hover: var(--db-successful-on-bg-hover);
  --db-current-color-on-bg-pressed: var(--db-successful-on-bg-pressed);
  /* weak colors */
  --db-current-color-on-bg-weak-enabled: var(
  	--db-successful-on-bg-weak-enabled
  );
  --db-current-color-on-bg-weak-hover: var(
  	--db-successful-on-bg-weak-hover
  );
  --db-current-color-on-bg-weak-pressed: var(
  	--db-successful-on-bg-weak-pressed
  );
}

[data-color=successful-bg-lvl-1],
.db-successful-bg-lvl-1 {
  background-color: var(--db-successful-bg-lvl-1-enabled);
  color: var(--db-successful-on-bg-enabled);
}
[data-color=successful-bg-lvl-1]::before,
.db-successful-bg-lvl-1::before, [data-color=successful-bg-lvl-1]::after,
.db-successful-bg-lvl-1::after {
  --db-icon-color: $on;
}

[data-color=successful-bg-lvl-2],
.db-successful-bg-lvl-2 {
  background-color: var(--db-successful-bg-lvl-2-enabled);
  color: var(--db-successful-on-bg-enabled);
}
[data-color=successful-bg-lvl-2]::before,
.db-successful-bg-lvl-2::before, [data-color=successful-bg-lvl-2]::after,
.db-successful-bg-lvl-2::after {
  --db-icon-color: $on;
}

[data-color=successful-bg-lvl-3],
.db-successful-bg-lvl-3 {
  background-color: var(--db-successful-bg-lvl-3-enabled);
  color: var(--db-successful-on-bg-enabled);
}
[data-color=successful-bg-lvl-3]::before,
.db-successful-bg-lvl-3::before, [data-color=successful-bg-lvl-3]::after,
.db-successful-bg-lvl-3::after {
  --db-icon-color: $on;
}

[data-color=successful-bg-transparent-full],
.db-successful-bg-transparent-full {
  background-color: var(--db-successful-bg-transparent-full-enabled);
  color: var(--db-successful-on-bg-enabled);
}
[data-color=successful-bg-transparent-full]::before,
.db-successful-bg-transparent-full::before, [data-color=successful-bg-transparent-full]::after,
.db-successful-bg-transparent-full::after {
  --db-icon-color: $on;
}

[data-color=successful-bg-transparent-semi],
.db-successful-bg-transparent-semi {
  background-color: var(--db-successful-bg-transparent-semi-enabled);
  color: var(--db-successful-on-bg-enabled);
}
[data-color=successful-bg-transparent-semi]::before,
.db-successful-bg-transparent-semi::before, [data-color=successful-bg-transparent-semi]::after,
.db-successful-bg-transparent-semi::after {
  --db-icon-color: $on;
}

[data-color=warning-contrast-high],
.db-warning-contrast-high, [data-color=warning-contrast-high-interactive],
.db-warning-contrast-high-interactive {
  --db-current-color-border: var(
  	--db-warning-contrast-high-enabled
  );
  background-color: var(--db-warning-contrast-high-enabled);
  color: var(--db-warning-on-contrast-enabled);
}
[data-color=warning-contrast-high]::before,
.db-warning-contrast-high::before, [data-color=warning-contrast-high-interactive]::before,
.db-warning-contrast-high-interactive::before, [data-color=warning-contrast-high]::after,
.db-warning-contrast-high::after, [data-color=warning-contrast-high-interactive]::after,
.db-warning-contrast-high-interactive::after {
  --db-icon-color: $on;
}

[data-color=warning-contrast-high-interactive],
.db-warning-contrast-high-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=warning-contrast-high-interactive]:is(:hover, :focus),
.db-warning-contrast-high-interactive:is(:hover, :focus) {
  background: var(--db-warning-contrast-high-hover);
}
[data-color=warning-contrast-high-interactive]:active,
.db-warning-contrast-high-interactive:active {
  background: var(--db-warning-contrast-high-pressed);
}

[data-color=warning-contrast-low],
.db-warning-contrast-low, [data-color=warning-contrast-low-interactive],
.db-warning-contrast-low-interactive {
  --db-current-color-border: var(
  	--db-warning-contrast-low-enabled
  );
  background-color: var(--db-warning-contrast-low-enabled);
  color: var(--db-warning-on-contrast-enabled);
}
[data-color=warning-contrast-low]::before,
.db-warning-contrast-low::before, [data-color=warning-contrast-low-interactive]::before,
.db-warning-contrast-low-interactive::before, [data-color=warning-contrast-low]::after,
.db-warning-contrast-low::after, [data-color=warning-contrast-low-interactive]::after,
.db-warning-contrast-low-interactive::after {
  --db-icon-color: $on;
}

[data-color=warning-contrast-low-interactive],
.db-warning-contrast-low-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=warning-contrast-low-interactive]:is(:hover, :focus),
.db-warning-contrast-low-interactive:is(:hover, :focus) {
  background: var(--db-warning-contrast-low-hover);
}
[data-color=warning-contrast-low-interactive]:active,
.db-warning-contrast-low-interactive:active {
  background: var(--db-warning-contrast-low-pressed);
}

[data-container-color=warning],
.db-container-color-warning, [data-color=warning-bg-transparent-semi],
.db-warning-bg-transparent-semi, [data-color=warning-bg-transparent-full],
.db-warning-bg-transparent-full, [data-color=warning-bg-lvl-3],
.db-warning-bg-lvl-3, [data-color=warning-bg-lvl-2],
.db-warning-bg-lvl-2, [data-color=warning-bg-lvl-1],
.db-warning-bg-lvl-1 {
  /* used for transparent backgrounds */
  --db-current-color-bg-transparent-full-enabled: var(
  	--db-warning-bg-transparent-full-enabled
  );
  --db-current-color-bg-transparent-semi-enabled: var(
  	--db-warning-bg-transparent-semi-enabled
  );
  --db-current-color-bg-transparent-hover: var(
  	--db-warning-bg-transparent-hover
  );
  --db-current-color-bg-transparent-pressed: var(
  	--db-warning-bg-transparent-pressed
  );
  /* used for backgrounds */
  --db-current-color-bg-lvl-1-enabled: var(
  	--db-warning-bg-lvl-1-enabled
  );
  --db-current-color-bg-lvl-2-enabled: var(
  	--db-warning-bg-lvl-2-enabled
  );
  --db-current-color-bg-lvl-3-enabled: var(
  	--db-warning-bg-lvl-3-enabled
  );
  /* used for icons and borders */
  --db-current-color-contrast-low-enabled: var(
  	--db-warning-contrast-low-enabled
  );
  --db-current-color-contrast-low-hover: var(
  	--db-warning-contrast-low-hover
  );
  --db-current-color-contrast-low-pressed: var(
  	--db-warning-contrast-low-pressed
  );
  --db-current-color-border: var(--db-warning-border);
  /* used for adaptive tags (interactive) */
  --db-current-color-bg-lvl-1-hover: var(--db-warning-bg-lvl-1-hover);
  --db-current-color-bg-lvl-1-pressed: var(
  	--db-warning-bg-lvl-1-pressed
  );
  --db-current-color-bg-lvl-2-hover: var(--db-warning-bg-lvl-2-hover);
  --db-current-color-bg-lvl-2-pressed: var(
  	--db-warning-bg-lvl-2-pressed
  );
  --db-current-color-bg-lvl-3-hover: var(--db-warning-bg-lvl-3-hover);
  --db-current-color-bg-lvl-3-pressed: var(
  	--db-warning-bg-lvl-3-pressed
  );
  /* used for adaptive tags (strong & interactive) */
  --db-current-color-on-contrast-enabled: var(
  	--db-warning-on-contrast-enabled
  );
  --db-current-color-contrast-high-enabled: var(
  	--db-warning-contrast-high-enabled
  );
  --db-current-color-contrast-high-hover: var(
  	--db-warning-contrast-high-hover
  );
  --db-current-color-contrast-high-pressed: var(
  	--db-warning-contrast-high-pressed
  );
  /* on-colors */
  --db-current-color-on-bg-enabled: var(--db-warning-on-bg-enabled);
  --db-current-color-on-bg-hover: var(--db-warning-on-bg-hover);
  --db-current-color-on-bg-pressed: var(--db-warning-on-bg-pressed);
  /* weak colors */
  --db-current-color-on-bg-weak-enabled: var(
  	--db-warning-on-bg-weak-enabled
  );
  --db-current-color-on-bg-weak-hover: var(
  	--db-warning-on-bg-weak-hover
  );
  --db-current-color-on-bg-weak-pressed: var(
  	--db-warning-on-bg-weak-pressed
  );
}

[data-color=warning-bg-lvl-1],
.db-warning-bg-lvl-1 {
  background-color: var(--db-warning-bg-lvl-1-enabled);
  color: var(--db-warning-on-bg-enabled);
}
[data-color=warning-bg-lvl-1]::before,
.db-warning-bg-lvl-1::before, [data-color=warning-bg-lvl-1]::after,
.db-warning-bg-lvl-1::after {
  --db-icon-color: $on;
}

[data-color=warning-bg-lvl-2],
.db-warning-bg-lvl-2 {
  background-color: var(--db-warning-bg-lvl-2-enabled);
  color: var(--db-warning-on-bg-enabled);
}
[data-color=warning-bg-lvl-2]::before,
.db-warning-bg-lvl-2::before, [data-color=warning-bg-lvl-2]::after,
.db-warning-bg-lvl-2::after {
  --db-icon-color: $on;
}

[data-color=warning-bg-lvl-3],
.db-warning-bg-lvl-3 {
  background-color: var(--db-warning-bg-lvl-3-enabled);
  color: var(--db-warning-on-bg-enabled);
}
[data-color=warning-bg-lvl-3]::before,
.db-warning-bg-lvl-3::before, [data-color=warning-bg-lvl-3]::after,
.db-warning-bg-lvl-3::after {
  --db-icon-color: $on;
}

[data-color=warning-bg-transparent-full],
.db-warning-bg-transparent-full {
  background-color: var(--db-warning-bg-transparent-full-enabled);
  color: var(--db-warning-on-bg-enabled);
}
[data-color=warning-bg-transparent-full]::before,
.db-warning-bg-transparent-full::before, [data-color=warning-bg-transparent-full]::after,
.db-warning-bg-transparent-full::after {
  --db-icon-color: $on;
}

[data-color=warning-bg-transparent-semi],
.db-warning-bg-transparent-semi {
  background-color: var(--db-warning-bg-transparent-semi-enabled);
  color: var(--db-warning-on-bg-enabled);
}
[data-color=warning-bg-transparent-semi]::before,
.db-warning-bg-transparent-semi::before, [data-color=warning-bg-transparent-semi]::after,
.db-warning-bg-transparent-semi::after {
  --db-icon-color: $on;
}

[data-color=informational-contrast-high],
.db-informational-contrast-high, [data-color=informational-contrast-high-interactive],
.db-informational-contrast-high-interactive {
  --db-current-color-border: var(
  	--db-informational-contrast-high-enabled
  );
  background-color: var(--db-informational-contrast-high-enabled);
  color: var(--db-informational-on-contrast-enabled);
}
[data-color=informational-contrast-high]::before,
.db-informational-contrast-high::before, [data-color=informational-contrast-high-interactive]::before,
.db-informational-contrast-high-interactive::before, [data-color=informational-contrast-high]::after,
.db-informational-contrast-high::after, [data-color=informational-contrast-high-interactive]::after,
.db-informational-contrast-high-interactive::after {
  --db-icon-color: $on;
}

[data-color=informational-contrast-high-interactive],
.db-informational-contrast-high-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=informational-contrast-high-interactive]:is(:hover, :focus),
.db-informational-contrast-high-interactive:is(:hover, :focus) {
  background: var(--db-informational-contrast-high-hover);
}
[data-color=informational-contrast-high-interactive]:active,
.db-informational-contrast-high-interactive:active {
  background: var(--db-informational-contrast-high-pressed);
}

[data-color=informational-contrast-low],
.db-informational-contrast-low, [data-color=informational-contrast-low-interactive],
.db-informational-contrast-low-interactive {
  --db-current-color-border: var(
  	--db-informational-contrast-low-enabled
  );
  background-color: var(--db-informational-contrast-low-enabled);
  color: var(--db-informational-on-contrast-enabled);
}
[data-color=informational-contrast-low]::before,
.db-informational-contrast-low::before, [data-color=informational-contrast-low-interactive]::before,
.db-informational-contrast-low-interactive::before, [data-color=informational-contrast-low]::after,
.db-informational-contrast-low::after, [data-color=informational-contrast-low-interactive]::after,
.db-informational-contrast-low-interactive::after {
  --db-icon-color: $on;
}

[data-color=informational-contrast-low-interactive],
.db-informational-contrast-low-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=informational-contrast-low-interactive]:is(:hover, :focus),
.db-informational-contrast-low-interactive:is(:hover, :focus) {
  background: var(--db-informational-contrast-low-hover);
}
[data-color=informational-contrast-low-interactive]:active,
.db-informational-contrast-low-interactive:active {
  background: var(--db-informational-contrast-low-pressed);
}

[data-container-color=informational],
.db-container-color-informational, [data-color=informational-bg-transparent-semi],
.db-informational-bg-transparent-semi, [data-color=informational-bg-transparent-full],
.db-informational-bg-transparent-full, [data-color=informational-bg-lvl-3],
.db-informational-bg-lvl-3, [data-color=informational-bg-lvl-2],
.db-informational-bg-lvl-2, [data-color=informational-bg-lvl-1],
.db-informational-bg-lvl-1 {
  /* used for transparent backgrounds */
  --db-current-color-bg-transparent-full-enabled: var(
  	--db-informational-bg-transparent-full-enabled
  );
  --db-current-color-bg-transparent-semi-enabled: var(
  	--db-informational-bg-transparent-semi-enabled
  );
  --db-current-color-bg-transparent-hover: var(
  	--db-informational-bg-transparent-hover
  );
  --db-current-color-bg-transparent-pressed: var(
  	--db-informational-bg-transparent-pressed
  );
  /* used for backgrounds */
  --db-current-color-bg-lvl-1-enabled: var(
  	--db-informational-bg-lvl-1-enabled
  );
  --db-current-color-bg-lvl-2-enabled: var(
  	--db-informational-bg-lvl-2-enabled
  );
  --db-current-color-bg-lvl-3-enabled: var(
  	--db-informational-bg-lvl-3-enabled
  );
  /* used for icons and borders */
  --db-current-color-contrast-low-enabled: var(
  	--db-informational-contrast-low-enabled
  );
  --db-current-color-contrast-low-hover: var(
  	--db-informational-contrast-low-hover
  );
  --db-current-color-contrast-low-pressed: var(
  	--db-informational-contrast-low-pressed
  );
  --db-current-color-border: var(--db-informational-border);
  /* used for adaptive tags (interactive) */
  --db-current-color-bg-lvl-1-hover: var(--db-informational-bg-lvl-1-hover);
  --db-current-color-bg-lvl-1-pressed: var(
  	--db-informational-bg-lvl-1-pressed
  );
  --db-current-color-bg-lvl-2-hover: var(--db-informational-bg-lvl-2-hover);
  --db-current-color-bg-lvl-2-pressed: var(
  	--db-informational-bg-lvl-2-pressed
  );
  --db-current-color-bg-lvl-3-hover: var(--db-informational-bg-lvl-3-hover);
  --db-current-color-bg-lvl-3-pressed: var(
  	--db-informational-bg-lvl-3-pressed
  );
  /* used for adaptive tags (strong & interactive) */
  --db-current-color-on-contrast-enabled: var(
  	--db-informational-on-contrast-enabled
  );
  --db-current-color-contrast-high-enabled: var(
  	--db-informational-contrast-high-enabled
  );
  --db-current-color-contrast-high-hover: var(
  	--db-informational-contrast-high-hover
  );
  --db-current-color-contrast-high-pressed: var(
  	--db-informational-contrast-high-pressed
  );
  /* on-colors */
  --db-current-color-on-bg-enabled: var(--db-informational-on-bg-enabled);
  --db-current-color-on-bg-hover: var(--db-informational-on-bg-hover);
  --db-current-color-on-bg-pressed: var(--db-informational-on-bg-pressed);
  /* weak colors */
  --db-current-color-on-bg-weak-enabled: var(
  	--db-informational-on-bg-weak-enabled
  );
  --db-current-color-on-bg-weak-hover: var(
  	--db-informational-on-bg-weak-hover
  );
  --db-current-color-on-bg-weak-pressed: var(
  	--db-informational-on-bg-weak-pressed
  );
}

[data-color=informational-bg-lvl-1],
.db-informational-bg-lvl-1 {
  background-color: var(--db-informational-bg-lvl-1-enabled);
  color: var(--db-informational-on-bg-enabled);
}
[data-color=informational-bg-lvl-1]::before,
.db-informational-bg-lvl-1::before, [data-color=informational-bg-lvl-1]::after,
.db-informational-bg-lvl-1::after {
  --db-icon-color: $on;
}

[data-color=informational-bg-lvl-2],
.db-informational-bg-lvl-2 {
  background-color: var(--db-informational-bg-lvl-2-enabled);
  color: var(--db-informational-on-bg-enabled);
}
[data-color=informational-bg-lvl-2]::before,
.db-informational-bg-lvl-2::before, [data-color=informational-bg-lvl-2]::after,
.db-informational-bg-lvl-2::after {
  --db-icon-color: $on;
}

[data-color=informational-bg-lvl-3],
.db-informational-bg-lvl-3 {
  background-color: var(--db-informational-bg-lvl-3-enabled);
  color: var(--db-informational-on-bg-enabled);
}
[data-color=informational-bg-lvl-3]::before,
.db-informational-bg-lvl-3::before, [data-color=informational-bg-lvl-3]::after,
.db-informational-bg-lvl-3::after {
  --db-icon-color: $on;
}

[data-color=informational-bg-transparent-full],
.db-informational-bg-transparent-full {
  background-color: var(--db-informational-bg-transparent-full-enabled);
  color: var(--db-informational-on-bg-enabled);
}
[data-color=informational-bg-transparent-full]::before,
.db-informational-bg-transparent-full::before, [data-color=informational-bg-transparent-full]::after,
.db-informational-bg-transparent-full::after {
  --db-icon-color: $on;
}

[data-color=informational-bg-transparent-semi],
.db-informational-bg-transparent-semi {
  background-color: var(--db-informational-bg-transparent-semi-enabled);
  color: var(--db-informational-on-bg-enabled);
}
[data-color=informational-bg-transparent-semi]::before,
.db-informational-bg-transparent-semi::before, [data-color=informational-bg-transparent-semi]::after,
.db-informational-bg-transparent-semi::after {
  --db-icon-color: $on;
}

[data-color=yellow-contrast-high],
.db-yellow-contrast-high, [data-color=yellow-contrast-high-interactive],
.db-yellow-contrast-high-interactive {
  --db-current-color-border: var(
  	--db-yellow-contrast-high-enabled
  );
  background-color: var(--db-yellow-contrast-high-enabled);
  color: var(--db-yellow-on-contrast-enabled);
}
[data-color=yellow-contrast-high]::before,
.db-yellow-contrast-high::before, [data-color=yellow-contrast-high-interactive]::before,
.db-yellow-contrast-high-interactive::before, [data-color=yellow-contrast-high]::after,
.db-yellow-contrast-high::after, [data-color=yellow-contrast-high-interactive]::after,
.db-yellow-contrast-high-interactive::after {
  --db-icon-color: $on;
}

[data-color=yellow-contrast-high-interactive],
.db-yellow-contrast-high-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=yellow-contrast-high-interactive]:is(:hover, :focus),
.db-yellow-contrast-high-interactive:is(:hover, :focus) {
  background: var(--db-yellow-contrast-high-hover);
}
[data-color=yellow-contrast-high-interactive]:active,
.db-yellow-contrast-high-interactive:active {
  background: var(--db-yellow-contrast-high-pressed);
}

[data-color=yellow-contrast-low],
.db-yellow-contrast-low, [data-color=yellow-contrast-low-interactive],
.db-yellow-contrast-low-interactive {
  --db-current-color-border: var(
  	--db-yellow-contrast-low-enabled
  );
  background-color: var(--db-yellow-contrast-low-enabled);
  color: var(--db-yellow-on-contrast-enabled);
}
[data-color=yellow-contrast-low]::before,
.db-yellow-contrast-low::before, [data-color=yellow-contrast-low-interactive]::before,
.db-yellow-contrast-low-interactive::before, [data-color=yellow-contrast-low]::after,
.db-yellow-contrast-low::after, [data-color=yellow-contrast-low-interactive]::after,
.db-yellow-contrast-low-interactive::after {
  --db-icon-color: $on;
}

[data-color=yellow-contrast-low-interactive],
.db-yellow-contrast-low-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=yellow-contrast-low-interactive]:is(:hover, :focus),
.db-yellow-contrast-low-interactive:is(:hover, :focus) {
  background: var(--db-yellow-contrast-low-hover);
}
[data-color=yellow-contrast-low-interactive]:active,
.db-yellow-contrast-low-interactive:active {
  background: var(--db-yellow-contrast-low-pressed);
}

[data-container-color=yellow],
.db-container-color-yellow, [data-color=yellow-bg-transparent-semi],
.db-yellow-bg-transparent-semi, [data-color=yellow-bg-transparent-full],
.db-yellow-bg-transparent-full, [data-color=yellow-bg-lvl-3],
.db-yellow-bg-lvl-3, [data-color=yellow-bg-lvl-2],
.db-yellow-bg-lvl-2, [data-color=yellow-bg-lvl-1],
.db-yellow-bg-lvl-1 {
  /* used for transparent backgrounds */
  --db-current-color-bg-transparent-full-enabled: var(
  	--db-yellow-bg-transparent-full-enabled
  );
  --db-current-color-bg-transparent-semi-enabled: var(
  	--db-yellow-bg-transparent-semi-enabled
  );
  --db-current-color-bg-transparent-hover: var(
  	--db-yellow-bg-transparent-hover
  );
  --db-current-color-bg-transparent-pressed: var(
  	--db-yellow-bg-transparent-pressed
  );
  /* used for backgrounds */
  --db-current-color-bg-lvl-1-enabled: var(
  	--db-yellow-bg-lvl-1-enabled
  );
  --db-current-color-bg-lvl-2-enabled: var(
  	--db-yellow-bg-lvl-2-enabled
  );
  --db-current-color-bg-lvl-3-enabled: var(
  	--db-yellow-bg-lvl-3-enabled
  );
  /* used for icons and borders */
  --db-current-color-contrast-low-enabled: var(
  	--db-yellow-contrast-low-enabled
  );
  --db-current-color-contrast-low-hover: var(
  	--db-yellow-contrast-low-hover
  );
  --db-current-color-contrast-low-pressed: var(
  	--db-yellow-contrast-low-pressed
  );
  --db-current-color-border: var(--db-yellow-border);
  /* used for adaptive tags (interactive) */
  --db-current-color-bg-lvl-1-hover: var(--db-yellow-bg-lvl-1-hover);
  --db-current-color-bg-lvl-1-pressed: var(
  	--db-yellow-bg-lvl-1-pressed
  );
  --db-current-color-bg-lvl-2-hover: var(--db-yellow-bg-lvl-2-hover);
  --db-current-color-bg-lvl-2-pressed: var(
  	--db-yellow-bg-lvl-2-pressed
  );
  --db-current-color-bg-lvl-3-hover: var(--db-yellow-bg-lvl-3-hover);
  --db-current-color-bg-lvl-3-pressed: var(
  	--db-yellow-bg-lvl-3-pressed
  );
  /* used for adaptive tags (strong & interactive) */
  --db-current-color-on-contrast-enabled: var(
  	--db-yellow-on-contrast-enabled
  );
  --db-current-color-contrast-high-enabled: var(
  	--db-yellow-contrast-high-enabled
  );
  --db-current-color-contrast-high-hover: var(
  	--db-yellow-contrast-high-hover
  );
  --db-current-color-contrast-high-pressed: var(
  	--db-yellow-contrast-high-pressed
  );
  /* on-colors */
  --db-current-color-on-bg-enabled: var(--db-yellow-on-bg-enabled);
  --db-current-color-on-bg-hover: var(--db-yellow-on-bg-hover);
  --db-current-color-on-bg-pressed: var(--db-yellow-on-bg-pressed);
  /* weak colors */
  --db-current-color-on-bg-weak-enabled: var(
  	--db-yellow-on-bg-weak-enabled
  );
  --db-current-color-on-bg-weak-hover: var(
  	--db-yellow-on-bg-weak-hover
  );
  --db-current-color-on-bg-weak-pressed: var(
  	--db-yellow-on-bg-weak-pressed
  );
}

[data-color=yellow-bg-lvl-1],
.db-yellow-bg-lvl-1 {
  background-color: var(--db-yellow-bg-lvl-1-enabled);
  color: var(--db-yellow-on-bg-enabled);
}
[data-color=yellow-bg-lvl-1]::before,
.db-yellow-bg-lvl-1::before, [data-color=yellow-bg-lvl-1]::after,
.db-yellow-bg-lvl-1::after {
  --db-icon-color: $on;
}

[data-color=yellow-bg-lvl-2],
.db-yellow-bg-lvl-2 {
  background-color: var(--db-yellow-bg-lvl-2-enabled);
  color: var(--db-yellow-on-bg-enabled);
}
[data-color=yellow-bg-lvl-2]::before,
.db-yellow-bg-lvl-2::before, [data-color=yellow-bg-lvl-2]::after,
.db-yellow-bg-lvl-2::after {
  --db-icon-color: $on;
}

[data-color=yellow-bg-lvl-3],
.db-yellow-bg-lvl-3 {
  background-color: var(--db-yellow-bg-lvl-3-enabled);
  color: var(--db-yellow-on-bg-enabled);
}
[data-color=yellow-bg-lvl-3]::before,
.db-yellow-bg-lvl-3::before, [data-color=yellow-bg-lvl-3]::after,
.db-yellow-bg-lvl-3::after {
  --db-icon-color: $on;
}

[data-color=yellow-bg-transparent-full],
.db-yellow-bg-transparent-full {
  background-color: var(--db-yellow-bg-transparent-full-enabled);
  color: var(--db-yellow-on-bg-enabled);
}
[data-color=yellow-bg-transparent-full]::before,
.db-yellow-bg-transparent-full::before, [data-color=yellow-bg-transparent-full]::after,
.db-yellow-bg-transparent-full::after {
  --db-icon-color: $on;
}

[data-color=yellow-bg-transparent-semi],
.db-yellow-bg-transparent-semi {
  background-color: var(--db-yellow-bg-transparent-semi-enabled);
  color: var(--db-yellow-on-bg-enabled);
}
[data-color=yellow-bg-transparent-semi]::before,
.db-yellow-bg-transparent-semi::before, [data-color=yellow-bg-transparent-semi]::after,
.db-yellow-bg-transparent-semi::after {
  --db-icon-color: $on;
}

[data-color=orange-contrast-high],
.db-orange-contrast-high, [data-color=orange-contrast-high-interactive],
.db-orange-contrast-high-interactive {
  --db-current-color-border: var(
  	--db-orange-contrast-high-enabled
  );
  background-color: var(--db-orange-contrast-high-enabled);
  color: var(--db-orange-on-contrast-enabled);
}
[data-color=orange-contrast-high]::before,
.db-orange-contrast-high::before, [data-color=orange-contrast-high-interactive]::before,
.db-orange-contrast-high-interactive::before, [data-color=orange-contrast-high]::after,
.db-orange-contrast-high::after, [data-color=orange-contrast-high-interactive]::after,
.db-orange-contrast-high-interactive::after {
  --db-icon-color: $on;
}

[data-color=orange-contrast-high-interactive],
.db-orange-contrast-high-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=orange-contrast-high-interactive]:is(:hover, :focus),
.db-orange-contrast-high-interactive:is(:hover, :focus) {
  background: var(--db-orange-contrast-high-hover);
}
[data-color=orange-contrast-high-interactive]:active,
.db-orange-contrast-high-interactive:active {
  background: var(--db-orange-contrast-high-pressed);
}

[data-color=orange-contrast-low],
.db-orange-contrast-low, [data-color=orange-contrast-low-interactive],
.db-orange-contrast-low-interactive {
  --db-current-color-border: var(
  	--db-orange-contrast-low-enabled
  );
  background-color: var(--db-orange-contrast-low-enabled);
  color: var(--db-orange-on-contrast-enabled);
}
[data-color=orange-contrast-low]::before,
.db-orange-contrast-low::before, [data-color=orange-contrast-low-interactive]::before,
.db-orange-contrast-low-interactive::before, [data-color=orange-contrast-low]::after,
.db-orange-contrast-low::after, [data-color=orange-contrast-low-interactive]::after,
.db-orange-contrast-low-interactive::after {
  --db-icon-color: $on;
}

[data-color=orange-contrast-low-interactive],
.db-orange-contrast-low-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=orange-contrast-low-interactive]:is(:hover, :focus),
.db-orange-contrast-low-interactive:is(:hover, :focus) {
  background: var(--db-orange-contrast-low-hover);
}
[data-color=orange-contrast-low-interactive]:active,
.db-orange-contrast-low-interactive:active {
  background: var(--db-orange-contrast-low-pressed);
}

[data-container-color=orange],
.db-container-color-orange, [data-color=orange-bg-transparent-semi],
.db-orange-bg-transparent-semi, [data-color=orange-bg-transparent-full],
.db-orange-bg-transparent-full, [data-color=orange-bg-lvl-3],
.db-orange-bg-lvl-3, [data-color=orange-bg-lvl-2],
.db-orange-bg-lvl-2, [data-color=orange-bg-lvl-1],
.db-orange-bg-lvl-1 {
  /* used for transparent backgrounds */
  --db-current-color-bg-transparent-full-enabled: var(
  	--db-orange-bg-transparent-full-enabled
  );
  --db-current-color-bg-transparent-semi-enabled: var(
  	--db-orange-bg-transparent-semi-enabled
  );
  --db-current-color-bg-transparent-hover: var(
  	--db-orange-bg-transparent-hover
  );
  --db-current-color-bg-transparent-pressed: var(
  	--db-orange-bg-transparent-pressed
  );
  /* used for backgrounds */
  --db-current-color-bg-lvl-1-enabled: var(
  	--db-orange-bg-lvl-1-enabled
  );
  --db-current-color-bg-lvl-2-enabled: var(
  	--db-orange-bg-lvl-2-enabled
  );
  --db-current-color-bg-lvl-3-enabled: var(
  	--db-orange-bg-lvl-3-enabled
  );
  /* used for icons and borders */
  --db-current-color-contrast-low-enabled: var(
  	--db-orange-contrast-low-enabled
  );
  --db-current-color-contrast-low-hover: var(
  	--db-orange-contrast-low-hover
  );
  --db-current-color-contrast-low-pressed: var(
  	--db-orange-contrast-low-pressed
  );
  --db-current-color-border: var(--db-orange-border);
  /* used for adaptive tags (interactive) */
  --db-current-color-bg-lvl-1-hover: var(--db-orange-bg-lvl-1-hover);
  --db-current-color-bg-lvl-1-pressed: var(
  	--db-orange-bg-lvl-1-pressed
  );
  --db-current-color-bg-lvl-2-hover: var(--db-orange-bg-lvl-2-hover);
  --db-current-color-bg-lvl-2-pressed: var(
  	--db-orange-bg-lvl-2-pressed
  );
  --db-current-color-bg-lvl-3-hover: var(--db-orange-bg-lvl-3-hover);
  --db-current-color-bg-lvl-3-pressed: var(
  	--db-orange-bg-lvl-3-pressed
  );
  /* used for adaptive tags (strong & interactive) */
  --db-current-color-on-contrast-enabled: var(
  	--db-orange-on-contrast-enabled
  );
  --db-current-color-contrast-high-enabled: var(
  	--db-orange-contrast-high-enabled
  );
  --db-current-color-contrast-high-hover: var(
  	--db-orange-contrast-high-hover
  );
  --db-current-color-contrast-high-pressed: var(
  	--db-orange-contrast-high-pressed
  );
  /* on-colors */
  --db-current-color-on-bg-enabled: var(--db-orange-on-bg-enabled);
  --db-current-color-on-bg-hover: var(--db-orange-on-bg-hover);
  --db-current-color-on-bg-pressed: var(--db-orange-on-bg-pressed);
  /* weak colors */
  --db-current-color-on-bg-weak-enabled: var(
  	--db-orange-on-bg-weak-enabled
  );
  --db-current-color-on-bg-weak-hover: var(
  	--db-orange-on-bg-weak-hover
  );
  --db-current-color-on-bg-weak-pressed: var(
  	--db-orange-on-bg-weak-pressed
  );
}

[data-color=orange-bg-lvl-1],
.db-orange-bg-lvl-1 {
  background-color: var(--db-orange-bg-lvl-1-enabled);
  color: var(--db-orange-on-bg-enabled);
}
[data-color=orange-bg-lvl-1]::before,
.db-orange-bg-lvl-1::before, [data-color=orange-bg-lvl-1]::after,
.db-orange-bg-lvl-1::after {
  --db-icon-color: $on;
}

[data-color=orange-bg-lvl-2],
.db-orange-bg-lvl-2 {
  background-color: var(--db-orange-bg-lvl-2-enabled);
  color: var(--db-orange-on-bg-enabled);
}
[data-color=orange-bg-lvl-2]::before,
.db-orange-bg-lvl-2::before, [data-color=orange-bg-lvl-2]::after,
.db-orange-bg-lvl-2::after {
  --db-icon-color: $on;
}

[data-color=orange-bg-lvl-3],
.db-orange-bg-lvl-3 {
  background-color: var(--db-orange-bg-lvl-3-enabled);
  color: var(--db-orange-on-bg-enabled);
}
[data-color=orange-bg-lvl-3]::before,
.db-orange-bg-lvl-3::before, [data-color=orange-bg-lvl-3]::after,
.db-orange-bg-lvl-3::after {
  --db-icon-color: $on;
}

[data-color=orange-bg-transparent-full],
.db-orange-bg-transparent-full {
  background-color: var(--db-orange-bg-transparent-full-enabled);
  color: var(--db-orange-on-bg-enabled);
}
[data-color=orange-bg-transparent-full]::before,
.db-orange-bg-transparent-full::before, [data-color=orange-bg-transparent-full]::after,
.db-orange-bg-transparent-full::after {
  --db-icon-color: $on;
}

[data-color=orange-bg-transparent-semi],
.db-orange-bg-transparent-semi {
  background-color: var(--db-orange-bg-transparent-semi-enabled);
  color: var(--db-orange-on-bg-enabled);
}
[data-color=orange-bg-transparent-semi]::before,
.db-orange-bg-transparent-semi::before, [data-color=orange-bg-transparent-semi]::after,
.db-orange-bg-transparent-semi::after {
  --db-icon-color: $on;
}

[data-color=red-contrast-high],
.db-red-contrast-high, [data-color=red-contrast-high-interactive],
.db-red-contrast-high-interactive {
  --db-current-color-border: var(
  	--db-red-contrast-high-enabled
  );
  background-color: var(--db-red-contrast-high-enabled);
  color: var(--db-red-on-contrast-enabled);
}
[data-color=red-contrast-high]::before,
.db-red-contrast-high::before, [data-color=red-contrast-high-interactive]::before,
.db-red-contrast-high-interactive::before, [data-color=red-contrast-high]::after,
.db-red-contrast-high::after, [data-color=red-contrast-high-interactive]::after,
.db-red-contrast-high-interactive::after {
  --db-icon-color: $on;
}

[data-color=red-contrast-high-interactive],
.db-red-contrast-high-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=red-contrast-high-interactive]:is(:hover, :focus),
.db-red-contrast-high-interactive:is(:hover, :focus) {
  background: var(--db-red-contrast-high-hover);
}
[data-color=red-contrast-high-interactive]:active,
.db-red-contrast-high-interactive:active {
  background: var(--db-red-contrast-high-pressed);
}

[data-color=red-contrast-low],
.db-red-contrast-low, [data-color=red-contrast-low-interactive],
.db-red-contrast-low-interactive {
  --db-current-color-border: var(
  	--db-red-contrast-low-enabled
  );
  background-color: var(--db-red-contrast-low-enabled);
  color: var(--db-red-on-contrast-enabled);
}
[data-color=red-contrast-low]::before,
.db-red-contrast-low::before, [data-color=red-contrast-low-interactive]::before,
.db-red-contrast-low-interactive::before, [data-color=red-contrast-low]::after,
.db-red-contrast-low::after, [data-color=red-contrast-low-interactive]::after,
.db-red-contrast-low-interactive::after {
  --db-icon-color: $on;
}

[data-color=red-contrast-low-interactive],
.db-red-contrast-low-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=red-contrast-low-interactive]:is(:hover, :focus),
.db-red-contrast-low-interactive:is(:hover, :focus) {
  background: var(--db-red-contrast-low-hover);
}
[data-color=red-contrast-low-interactive]:active,
.db-red-contrast-low-interactive:active {
  background: var(--db-red-contrast-low-pressed);
}

[data-container-color=red],
.db-container-color-red, [data-color=red-bg-transparent-semi],
.db-red-bg-transparent-semi, [data-color=red-bg-transparent-full],
.db-red-bg-transparent-full, [data-color=red-bg-lvl-3],
.db-red-bg-lvl-3, [data-color=red-bg-lvl-2],
.db-red-bg-lvl-2, [data-color=red-bg-lvl-1],
.db-red-bg-lvl-1 {
  /* used for transparent backgrounds */
  --db-current-color-bg-transparent-full-enabled: var(
  	--db-red-bg-transparent-full-enabled
  );
  --db-current-color-bg-transparent-semi-enabled: var(
  	--db-red-bg-transparent-semi-enabled
  );
  --db-current-color-bg-transparent-hover: var(
  	--db-red-bg-transparent-hover
  );
  --db-current-color-bg-transparent-pressed: var(
  	--db-red-bg-transparent-pressed
  );
  /* used for backgrounds */
  --db-current-color-bg-lvl-1-enabled: var(
  	--db-red-bg-lvl-1-enabled
  );
  --db-current-color-bg-lvl-2-enabled: var(
  	--db-red-bg-lvl-2-enabled
  );
  --db-current-color-bg-lvl-3-enabled: var(
  	--db-red-bg-lvl-3-enabled
  );
  /* used for icons and borders */
  --db-current-color-contrast-low-enabled: var(
  	--db-red-contrast-low-enabled
  );
  --db-current-color-contrast-low-hover: var(
  	--db-red-contrast-low-hover
  );
  --db-current-color-contrast-low-pressed: var(
  	--db-red-contrast-low-pressed
  );
  --db-current-color-border: var(--db-red-border);
  /* used for adaptive tags (interactive) */
  --db-current-color-bg-lvl-1-hover: var(--db-red-bg-lvl-1-hover);
  --db-current-color-bg-lvl-1-pressed: var(
  	--db-red-bg-lvl-1-pressed
  );
  --db-current-color-bg-lvl-2-hover: var(--db-red-bg-lvl-2-hover);
  --db-current-color-bg-lvl-2-pressed: var(
  	--db-red-bg-lvl-2-pressed
  );
  --db-current-color-bg-lvl-3-hover: var(--db-red-bg-lvl-3-hover);
  --db-current-color-bg-lvl-3-pressed: var(
  	--db-red-bg-lvl-3-pressed
  );
  /* used for adaptive tags (strong & interactive) */
  --db-current-color-on-contrast-enabled: var(
  	--db-red-on-contrast-enabled
  );
  --db-current-color-contrast-high-enabled: var(
  	--db-red-contrast-high-enabled
  );
  --db-current-color-contrast-high-hover: var(
  	--db-red-contrast-high-hover
  );
  --db-current-color-contrast-high-pressed: var(
  	--db-red-contrast-high-pressed
  );
  /* on-colors */
  --db-current-color-on-bg-enabled: var(--db-red-on-bg-enabled);
  --db-current-color-on-bg-hover: var(--db-red-on-bg-hover);
  --db-current-color-on-bg-pressed: var(--db-red-on-bg-pressed);
  /* weak colors */
  --db-current-color-on-bg-weak-enabled: var(
  	--db-red-on-bg-weak-enabled
  );
  --db-current-color-on-bg-weak-hover: var(
  	--db-red-on-bg-weak-hover
  );
  --db-current-color-on-bg-weak-pressed: var(
  	--db-red-on-bg-weak-pressed
  );
}

[data-color=red-bg-lvl-1],
.db-red-bg-lvl-1 {
  background-color: var(--db-red-bg-lvl-1-enabled);
  color: var(--db-red-on-bg-enabled);
}
[data-color=red-bg-lvl-1]::before,
.db-red-bg-lvl-1::before, [data-color=red-bg-lvl-1]::after,
.db-red-bg-lvl-1::after {
  --db-icon-color: $on;
}

[data-color=red-bg-lvl-2],
.db-red-bg-lvl-2 {
  background-color: var(--db-red-bg-lvl-2-enabled);
  color: var(--db-red-on-bg-enabled);
}
[data-color=red-bg-lvl-2]::before,
.db-red-bg-lvl-2::before, [data-color=red-bg-lvl-2]::after,
.db-red-bg-lvl-2::after {
  --db-icon-color: $on;
}

[data-color=red-bg-lvl-3],
.db-red-bg-lvl-3 {
  background-color: var(--db-red-bg-lvl-3-enabled);
  color: var(--db-red-on-bg-enabled);
}
[data-color=red-bg-lvl-3]::before,
.db-red-bg-lvl-3::before, [data-color=red-bg-lvl-3]::after,
.db-red-bg-lvl-3::after {
  --db-icon-color: $on;
}

[data-color=red-bg-transparent-full],
.db-red-bg-transparent-full {
  background-color: var(--db-red-bg-transparent-full-enabled);
  color: var(--db-red-on-bg-enabled);
}
[data-color=red-bg-transparent-full]::before,
.db-red-bg-transparent-full::before, [data-color=red-bg-transparent-full]::after,
.db-red-bg-transparent-full::after {
  --db-icon-color: $on;
}

[data-color=red-bg-transparent-semi],
.db-red-bg-transparent-semi {
  background-color: var(--db-red-bg-transparent-semi-enabled);
  color: var(--db-red-on-bg-enabled);
}
[data-color=red-bg-transparent-semi]::before,
.db-red-bg-transparent-semi::before, [data-color=red-bg-transparent-semi]::after,
.db-red-bg-transparent-semi::after {
  --db-icon-color: $on;
}

[data-color=pink-contrast-high],
.db-pink-contrast-high, [data-color=pink-contrast-high-interactive],
.db-pink-contrast-high-interactive {
  --db-current-color-border: var(
  	--db-pink-contrast-high-enabled
  );
  background-color: var(--db-pink-contrast-high-enabled);
  color: var(--db-pink-on-contrast-enabled);
}
[data-color=pink-contrast-high]::before,
.db-pink-contrast-high::before, [data-color=pink-contrast-high-interactive]::before,
.db-pink-contrast-high-interactive::before, [data-color=pink-contrast-high]::after,
.db-pink-contrast-high::after, [data-color=pink-contrast-high-interactive]::after,
.db-pink-contrast-high-interactive::after {
  --db-icon-color: $on;
}

[data-color=pink-contrast-high-interactive],
.db-pink-contrast-high-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=pink-contrast-high-interactive]:is(:hover, :focus),
.db-pink-contrast-high-interactive:is(:hover, :focus) {
  background: var(--db-pink-contrast-high-hover);
}
[data-color=pink-contrast-high-interactive]:active,
.db-pink-contrast-high-interactive:active {
  background: var(--db-pink-contrast-high-pressed);
}

[data-color=pink-contrast-low],
.db-pink-contrast-low, [data-color=pink-contrast-low-interactive],
.db-pink-contrast-low-interactive {
  --db-current-color-border: var(
  	--db-pink-contrast-low-enabled
  );
  background-color: var(--db-pink-contrast-low-enabled);
  color: var(--db-pink-on-contrast-enabled);
}
[data-color=pink-contrast-low]::before,
.db-pink-contrast-low::before, [data-color=pink-contrast-low-interactive]::before,
.db-pink-contrast-low-interactive::before, [data-color=pink-contrast-low]::after,
.db-pink-contrast-low::after, [data-color=pink-contrast-low-interactive]::after,
.db-pink-contrast-low-interactive::after {
  --db-icon-color: $on;
}

[data-color=pink-contrast-low-interactive],
.db-pink-contrast-low-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=pink-contrast-low-interactive]:is(:hover, :focus),
.db-pink-contrast-low-interactive:is(:hover, :focus) {
  background: var(--db-pink-contrast-low-hover);
}
[data-color=pink-contrast-low-interactive]:active,
.db-pink-contrast-low-interactive:active {
  background: var(--db-pink-contrast-low-pressed);
}

[data-container-color=pink],
.db-container-color-pink, [data-color=pink-bg-transparent-semi],
.db-pink-bg-transparent-semi, [data-color=pink-bg-transparent-full],
.db-pink-bg-transparent-full, [data-color=pink-bg-lvl-3],
.db-pink-bg-lvl-3, [data-color=pink-bg-lvl-2],
.db-pink-bg-lvl-2, [data-color=pink-bg-lvl-1],
.db-pink-bg-lvl-1 {
  /* used for transparent backgrounds */
  --db-current-color-bg-transparent-full-enabled: var(
  	--db-pink-bg-transparent-full-enabled
  );
  --db-current-color-bg-transparent-semi-enabled: var(
  	--db-pink-bg-transparent-semi-enabled
  );
  --db-current-color-bg-transparent-hover: var(
  	--db-pink-bg-transparent-hover
  );
  --db-current-color-bg-transparent-pressed: var(
  	--db-pink-bg-transparent-pressed
  );
  /* used for backgrounds */
  --db-current-color-bg-lvl-1-enabled: var(
  	--db-pink-bg-lvl-1-enabled
  );
  --db-current-color-bg-lvl-2-enabled: var(
  	--db-pink-bg-lvl-2-enabled
  );
  --db-current-color-bg-lvl-3-enabled: var(
  	--db-pink-bg-lvl-3-enabled
  );
  /* used for icons and borders */
  --db-current-color-contrast-low-enabled: var(
  	--db-pink-contrast-low-enabled
  );
  --db-current-color-contrast-low-hover: var(
  	--db-pink-contrast-low-hover
  );
  --db-current-color-contrast-low-pressed: var(
  	--db-pink-contrast-low-pressed
  );
  --db-current-color-border: var(--db-pink-border);
  /* used for adaptive tags (interactive) */
  --db-current-color-bg-lvl-1-hover: var(--db-pink-bg-lvl-1-hover);
  --db-current-color-bg-lvl-1-pressed: var(
  	--db-pink-bg-lvl-1-pressed
  );
  --db-current-color-bg-lvl-2-hover: var(--db-pink-bg-lvl-2-hover);
  --db-current-color-bg-lvl-2-pressed: var(
  	--db-pink-bg-lvl-2-pressed
  );
  --db-current-color-bg-lvl-3-hover: var(--db-pink-bg-lvl-3-hover);
  --db-current-color-bg-lvl-3-pressed: var(
  	--db-pink-bg-lvl-3-pressed
  );
  /* used for adaptive tags (strong & interactive) */
  --db-current-color-on-contrast-enabled: var(
  	--db-pink-on-contrast-enabled
  );
  --db-current-color-contrast-high-enabled: var(
  	--db-pink-contrast-high-enabled
  );
  --db-current-color-contrast-high-hover: var(
  	--db-pink-contrast-high-hover
  );
  --db-current-color-contrast-high-pressed: var(
  	--db-pink-contrast-high-pressed
  );
  /* on-colors */
  --db-current-color-on-bg-enabled: var(--db-pink-on-bg-enabled);
  --db-current-color-on-bg-hover: var(--db-pink-on-bg-hover);
  --db-current-color-on-bg-pressed: var(--db-pink-on-bg-pressed);
  /* weak colors */
  --db-current-color-on-bg-weak-enabled: var(
  	--db-pink-on-bg-weak-enabled
  );
  --db-current-color-on-bg-weak-hover: var(
  	--db-pink-on-bg-weak-hover
  );
  --db-current-color-on-bg-weak-pressed: var(
  	--db-pink-on-bg-weak-pressed
  );
}

[data-color=pink-bg-lvl-1],
.db-pink-bg-lvl-1 {
  background-color: var(--db-pink-bg-lvl-1-enabled);
  color: var(--db-pink-on-bg-enabled);
}
[data-color=pink-bg-lvl-1]::before,
.db-pink-bg-lvl-1::before, [data-color=pink-bg-lvl-1]::after,
.db-pink-bg-lvl-1::after {
  --db-icon-color: $on;
}

[data-color=pink-bg-lvl-2],
.db-pink-bg-lvl-2 {
  background-color: var(--db-pink-bg-lvl-2-enabled);
  color: var(--db-pink-on-bg-enabled);
}
[data-color=pink-bg-lvl-2]::before,
.db-pink-bg-lvl-2::before, [data-color=pink-bg-lvl-2]::after,
.db-pink-bg-lvl-2::after {
  --db-icon-color: $on;
}

[data-color=pink-bg-lvl-3],
.db-pink-bg-lvl-3 {
  background-color: var(--db-pink-bg-lvl-3-enabled);
  color: var(--db-pink-on-bg-enabled);
}
[data-color=pink-bg-lvl-3]::before,
.db-pink-bg-lvl-3::before, [data-color=pink-bg-lvl-3]::after,
.db-pink-bg-lvl-3::after {
  --db-icon-color: $on;
}

[data-color=pink-bg-transparent-full],
.db-pink-bg-transparent-full {
  background-color: var(--db-pink-bg-transparent-full-enabled);
  color: var(--db-pink-on-bg-enabled);
}
[data-color=pink-bg-transparent-full]::before,
.db-pink-bg-transparent-full::before, [data-color=pink-bg-transparent-full]::after,
.db-pink-bg-transparent-full::after {
  --db-icon-color: $on;
}

[data-color=pink-bg-transparent-semi],
.db-pink-bg-transparent-semi {
  background-color: var(--db-pink-bg-transparent-semi-enabled);
  color: var(--db-pink-on-bg-enabled);
}
[data-color=pink-bg-transparent-semi]::before,
.db-pink-bg-transparent-semi::before, [data-color=pink-bg-transparent-semi]::after,
.db-pink-bg-transparent-semi::after {
  --db-icon-color: $on;
}

[data-color=violet-contrast-high],
.db-violet-contrast-high, [data-color=violet-contrast-high-interactive],
.db-violet-contrast-high-interactive {
  --db-current-color-border: var(
  	--db-violet-contrast-high-enabled
  );
  background-color: var(--db-violet-contrast-high-enabled);
  color: var(--db-violet-on-contrast-enabled);
}
[data-color=violet-contrast-high]::before,
.db-violet-contrast-high::before, [data-color=violet-contrast-high-interactive]::before,
.db-violet-contrast-high-interactive::before, [data-color=violet-contrast-high]::after,
.db-violet-contrast-high::after, [data-color=violet-contrast-high-interactive]::after,
.db-violet-contrast-high-interactive::after {
  --db-icon-color: $on;
}

[data-color=violet-contrast-high-interactive],
.db-violet-contrast-high-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=violet-contrast-high-interactive]:is(:hover, :focus),
.db-violet-contrast-high-interactive:is(:hover, :focus) {
  background: var(--db-violet-contrast-high-hover);
}
[data-color=violet-contrast-high-interactive]:active,
.db-violet-contrast-high-interactive:active {
  background: var(--db-violet-contrast-high-pressed);
}

[data-color=violet-contrast-low],
.db-violet-contrast-low, [data-color=violet-contrast-low-interactive],
.db-violet-contrast-low-interactive {
  --db-current-color-border: var(
  	--db-violet-contrast-low-enabled
  );
  background-color: var(--db-violet-contrast-low-enabled);
  color: var(--db-violet-on-contrast-enabled);
}
[data-color=violet-contrast-low]::before,
.db-violet-contrast-low::before, [data-color=violet-contrast-low-interactive]::before,
.db-violet-contrast-low-interactive::before, [data-color=violet-contrast-low]::after,
.db-violet-contrast-low::after, [data-color=violet-contrast-low-interactive]::after,
.db-violet-contrast-low-interactive::after {
  --db-icon-color: $on;
}

[data-color=violet-contrast-low-interactive],
.db-violet-contrast-low-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=violet-contrast-low-interactive]:is(:hover, :focus),
.db-violet-contrast-low-interactive:is(:hover, :focus) {
  background: var(--db-violet-contrast-low-hover);
}
[data-color=violet-contrast-low-interactive]:active,
.db-violet-contrast-low-interactive:active {
  background: var(--db-violet-contrast-low-pressed);
}

[data-container-color=violet],
.db-container-color-violet, [data-color=violet-bg-transparent-semi],
.db-violet-bg-transparent-semi, [data-color=violet-bg-transparent-full],
.db-violet-bg-transparent-full, [data-color=violet-bg-lvl-3],
.db-violet-bg-lvl-3, [data-color=violet-bg-lvl-2],
.db-violet-bg-lvl-2, [data-color=violet-bg-lvl-1],
.db-violet-bg-lvl-1 {
  /* used for transparent backgrounds */
  --db-current-color-bg-transparent-full-enabled: var(
  	--db-violet-bg-transparent-full-enabled
  );
  --db-current-color-bg-transparent-semi-enabled: var(
  	--db-violet-bg-transparent-semi-enabled
  );
  --db-current-color-bg-transparent-hover: var(
  	--db-violet-bg-transparent-hover
  );
  --db-current-color-bg-transparent-pressed: var(
  	--db-violet-bg-transparent-pressed
  );
  /* used for backgrounds */
  --db-current-color-bg-lvl-1-enabled: var(
  	--db-violet-bg-lvl-1-enabled
  );
  --db-current-color-bg-lvl-2-enabled: var(
  	--db-violet-bg-lvl-2-enabled
  );
  --db-current-color-bg-lvl-3-enabled: var(
  	--db-violet-bg-lvl-3-enabled
  );
  /* used for icons and borders */
  --db-current-color-contrast-low-enabled: var(
  	--db-violet-contrast-low-enabled
  );
  --db-current-color-contrast-low-hover: var(
  	--db-violet-contrast-low-hover
  );
  --db-current-color-contrast-low-pressed: var(
  	--db-violet-contrast-low-pressed
  );
  --db-current-color-border: var(--db-violet-border);
  /* used for adaptive tags (interactive) */
  --db-current-color-bg-lvl-1-hover: var(--db-violet-bg-lvl-1-hover);
  --db-current-color-bg-lvl-1-pressed: var(
  	--db-violet-bg-lvl-1-pressed
  );
  --db-current-color-bg-lvl-2-hover: var(--db-violet-bg-lvl-2-hover);
  --db-current-color-bg-lvl-2-pressed: var(
  	--db-violet-bg-lvl-2-pressed
  );
  --db-current-color-bg-lvl-3-hover: var(--db-violet-bg-lvl-3-hover);
  --db-current-color-bg-lvl-3-pressed: var(
  	--db-violet-bg-lvl-3-pressed
  );
  /* used for adaptive tags (strong & interactive) */
  --db-current-color-on-contrast-enabled: var(
  	--db-violet-on-contrast-enabled
  );
  --db-current-color-contrast-high-enabled: var(
  	--db-violet-contrast-high-enabled
  );
  --db-current-color-contrast-high-hover: var(
  	--db-violet-contrast-high-hover
  );
  --db-current-color-contrast-high-pressed: var(
  	--db-violet-contrast-high-pressed
  );
  /* on-colors */
  --db-current-color-on-bg-enabled: var(--db-violet-on-bg-enabled);
  --db-current-color-on-bg-hover: var(--db-violet-on-bg-hover);
  --db-current-color-on-bg-pressed: var(--db-violet-on-bg-pressed);
  /* weak colors */
  --db-current-color-on-bg-weak-enabled: var(
  	--db-violet-on-bg-weak-enabled
  );
  --db-current-color-on-bg-weak-hover: var(
  	--db-violet-on-bg-weak-hover
  );
  --db-current-color-on-bg-weak-pressed: var(
  	--db-violet-on-bg-weak-pressed
  );
}

[data-color=violet-bg-lvl-1],
.db-violet-bg-lvl-1 {
  background-color: var(--db-violet-bg-lvl-1-enabled);
  color: var(--db-violet-on-bg-enabled);
}
[data-color=violet-bg-lvl-1]::before,
.db-violet-bg-lvl-1::before, [data-color=violet-bg-lvl-1]::after,
.db-violet-bg-lvl-1::after {
  --db-icon-color: $on;
}

[data-color=violet-bg-lvl-2],
.db-violet-bg-lvl-2 {
  background-color: var(--db-violet-bg-lvl-2-enabled);
  color: var(--db-violet-on-bg-enabled);
}
[data-color=violet-bg-lvl-2]::before,
.db-violet-bg-lvl-2::before, [data-color=violet-bg-lvl-2]::after,
.db-violet-bg-lvl-2::after {
  --db-icon-color: $on;
}

[data-color=violet-bg-lvl-3],
.db-violet-bg-lvl-3 {
  background-color: var(--db-violet-bg-lvl-3-enabled);
  color: var(--db-violet-on-bg-enabled);
}
[data-color=violet-bg-lvl-3]::before,
.db-violet-bg-lvl-3::before, [data-color=violet-bg-lvl-3]::after,
.db-violet-bg-lvl-3::after {
  --db-icon-color: $on;
}

[data-color=violet-bg-transparent-full],
.db-violet-bg-transparent-full {
  background-color: var(--db-violet-bg-transparent-full-enabled);
  color: var(--db-violet-on-bg-enabled);
}
[data-color=violet-bg-transparent-full]::before,
.db-violet-bg-transparent-full::before, [data-color=violet-bg-transparent-full]::after,
.db-violet-bg-transparent-full::after {
  --db-icon-color: $on;
}

[data-color=violet-bg-transparent-semi],
.db-violet-bg-transparent-semi {
  background-color: var(--db-violet-bg-transparent-semi-enabled);
  color: var(--db-violet-on-bg-enabled);
}
[data-color=violet-bg-transparent-semi]::before,
.db-violet-bg-transparent-semi::before, [data-color=violet-bg-transparent-semi]::after,
.db-violet-bg-transparent-semi::after {
  --db-icon-color: $on;
}

[data-color=blue-contrast-high],
.db-blue-contrast-high, [data-color=blue-contrast-high-interactive],
.db-blue-contrast-high-interactive {
  --db-current-color-border: var(
  	--db-blue-contrast-high-enabled
  );
  background-color: var(--db-blue-contrast-high-enabled);
  color: var(--db-blue-on-contrast-enabled);
}
[data-color=blue-contrast-high]::before,
.db-blue-contrast-high::before, [data-color=blue-contrast-high-interactive]::before,
.db-blue-contrast-high-interactive::before, [data-color=blue-contrast-high]::after,
.db-blue-contrast-high::after, [data-color=blue-contrast-high-interactive]::after,
.db-blue-contrast-high-interactive::after {
  --db-icon-color: $on;
}

[data-color=blue-contrast-high-interactive],
.db-blue-contrast-high-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=blue-contrast-high-interactive]:is(:hover, :focus),
.db-blue-contrast-high-interactive:is(:hover, :focus) {
  background: var(--db-blue-contrast-high-hover);
}
[data-color=blue-contrast-high-interactive]:active,
.db-blue-contrast-high-interactive:active {
  background: var(--db-blue-contrast-high-pressed);
}

[data-color=blue-contrast-low],
.db-blue-contrast-low, [data-color=blue-contrast-low-interactive],
.db-blue-contrast-low-interactive {
  --db-current-color-border: var(
  	--db-blue-contrast-low-enabled
  );
  background-color: var(--db-blue-contrast-low-enabled);
  color: var(--db-blue-on-contrast-enabled);
}
[data-color=blue-contrast-low]::before,
.db-blue-contrast-low::before, [data-color=blue-contrast-low-interactive]::before,
.db-blue-contrast-low-interactive::before, [data-color=blue-contrast-low]::after,
.db-blue-contrast-low::after, [data-color=blue-contrast-low-interactive]::after,
.db-blue-contrast-low-interactive::after {
  --db-icon-color: $on;
}

[data-color=blue-contrast-low-interactive],
.db-blue-contrast-low-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=blue-contrast-low-interactive]:is(:hover, :focus),
.db-blue-contrast-low-interactive:is(:hover, :focus) {
  background: var(--db-blue-contrast-low-hover);
}
[data-color=blue-contrast-low-interactive]:active,
.db-blue-contrast-low-interactive:active {
  background: var(--db-blue-contrast-low-pressed);
}

[data-container-color=blue],
.db-container-color-blue, [data-color=blue-bg-transparent-semi],
.db-blue-bg-transparent-semi, [data-color=blue-bg-transparent-full],
.db-blue-bg-transparent-full, [data-color=blue-bg-lvl-3],
.db-blue-bg-lvl-3, [data-color=blue-bg-lvl-2],
.db-blue-bg-lvl-2, [data-color=blue-bg-lvl-1],
.db-blue-bg-lvl-1 {
  /* used for transparent backgrounds */
  --db-current-color-bg-transparent-full-enabled: var(
  	--db-blue-bg-transparent-full-enabled
  );
  --db-current-color-bg-transparent-semi-enabled: var(
  	--db-blue-bg-transparent-semi-enabled
  );
  --db-current-color-bg-transparent-hover: var(
  	--db-blue-bg-transparent-hover
  );
  --db-current-color-bg-transparent-pressed: var(
  	--db-blue-bg-transparent-pressed
  );
  /* used for backgrounds */
  --db-current-color-bg-lvl-1-enabled: var(
  	--db-blue-bg-lvl-1-enabled
  );
  --db-current-color-bg-lvl-2-enabled: var(
  	--db-blue-bg-lvl-2-enabled
  );
  --db-current-color-bg-lvl-3-enabled: var(
  	--db-blue-bg-lvl-3-enabled
  );
  /* used for icons and borders */
  --db-current-color-contrast-low-enabled: var(
  	--db-blue-contrast-low-enabled
  );
  --db-current-color-contrast-low-hover: var(
  	--db-blue-contrast-low-hover
  );
  --db-current-color-contrast-low-pressed: var(
  	--db-blue-contrast-low-pressed
  );
  --db-current-color-border: var(--db-blue-border);
  /* used for adaptive tags (interactive) */
  --db-current-color-bg-lvl-1-hover: var(--db-blue-bg-lvl-1-hover);
  --db-current-color-bg-lvl-1-pressed: var(
  	--db-blue-bg-lvl-1-pressed
  );
  --db-current-color-bg-lvl-2-hover: var(--db-blue-bg-lvl-2-hover);
  --db-current-color-bg-lvl-2-pressed: var(
  	--db-blue-bg-lvl-2-pressed
  );
  --db-current-color-bg-lvl-3-hover: var(--db-blue-bg-lvl-3-hover);
  --db-current-color-bg-lvl-3-pressed: var(
  	--db-blue-bg-lvl-3-pressed
  );
  /* used for adaptive tags (strong & interactive) */
  --db-current-color-on-contrast-enabled: var(
  	--db-blue-on-contrast-enabled
  );
  --db-current-color-contrast-high-enabled: var(
  	--db-blue-contrast-high-enabled
  );
  --db-current-color-contrast-high-hover: var(
  	--db-blue-contrast-high-hover
  );
  --db-current-color-contrast-high-pressed: var(
  	--db-blue-contrast-high-pressed
  );
  /* on-colors */
  --db-current-color-on-bg-enabled: var(--db-blue-on-bg-enabled);
  --db-current-color-on-bg-hover: var(--db-blue-on-bg-hover);
  --db-current-color-on-bg-pressed: var(--db-blue-on-bg-pressed);
  /* weak colors */
  --db-current-color-on-bg-weak-enabled: var(
  	--db-blue-on-bg-weak-enabled
  );
  --db-current-color-on-bg-weak-hover: var(
  	--db-blue-on-bg-weak-hover
  );
  --db-current-color-on-bg-weak-pressed: var(
  	--db-blue-on-bg-weak-pressed
  );
}

[data-color=blue-bg-lvl-1],
.db-blue-bg-lvl-1 {
  background-color: var(--db-blue-bg-lvl-1-enabled);
  color: var(--db-blue-on-bg-enabled);
}
[data-color=blue-bg-lvl-1]::before,
.db-blue-bg-lvl-1::before, [data-color=blue-bg-lvl-1]::after,
.db-blue-bg-lvl-1::after {
  --db-icon-color: $on;
}

[data-color=blue-bg-lvl-2],
.db-blue-bg-lvl-2 {
  background-color: var(--db-blue-bg-lvl-2-enabled);
  color: var(--db-blue-on-bg-enabled);
}
[data-color=blue-bg-lvl-2]::before,
.db-blue-bg-lvl-2::before, [data-color=blue-bg-lvl-2]::after,
.db-blue-bg-lvl-2::after {
  --db-icon-color: $on;
}

[data-color=blue-bg-lvl-3],
.db-blue-bg-lvl-3 {
  background-color: var(--db-blue-bg-lvl-3-enabled);
  color: var(--db-blue-on-bg-enabled);
}
[data-color=blue-bg-lvl-3]::before,
.db-blue-bg-lvl-3::before, [data-color=blue-bg-lvl-3]::after,
.db-blue-bg-lvl-3::after {
  --db-icon-color: $on;
}

[data-color=blue-bg-transparent-full],
.db-blue-bg-transparent-full {
  background-color: var(--db-blue-bg-transparent-full-enabled);
  color: var(--db-blue-on-bg-enabled);
}
[data-color=blue-bg-transparent-full]::before,
.db-blue-bg-transparent-full::before, [data-color=blue-bg-transparent-full]::after,
.db-blue-bg-transparent-full::after {
  --db-icon-color: $on;
}

[data-color=blue-bg-transparent-semi],
.db-blue-bg-transparent-semi {
  background-color: var(--db-blue-bg-transparent-semi-enabled);
  color: var(--db-blue-on-bg-enabled);
}
[data-color=blue-bg-transparent-semi]::before,
.db-blue-bg-transparent-semi::before, [data-color=blue-bg-transparent-semi]::after,
.db-blue-bg-transparent-semi::after {
  --db-icon-color: $on;
}

[data-color=cyan-contrast-high],
.db-cyan-contrast-high, [data-color=cyan-contrast-high-interactive],
.db-cyan-contrast-high-interactive {
  --db-current-color-border: var(
  	--db-cyan-contrast-high-enabled
  );
  background-color: var(--db-cyan-contrast-high-enabled);
  color: var(--db-cyan-on-contrast-enabled);
}
[data-color=cyan-contrast-high]::before,
.db-cyan-contrast-high::before, [data-color=cyan-contrast-high-interactive]::before,
.db-cyan-contrast-high-interactive::before, [data-color=cyan-contrast-high]::after,
.db-cyan-contrast-high::after, [data-color=cyan-contrast-high-interactive]::after,
.db-cyan-contrast-high-interactive::after {
  --db-icon-color: $on;
}

[data-color=cyan-contrast-high-interactive],
.db-cyan-contrast-high-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=cyan-contrast-high-interactive]:is(:hover, :focus),
.db-cyan-contrast-high-interactive:is(:hover, :focus) {
  background: var(--db-cyan-contrast-high-hover);
}
[data-color=cyan-contrast-high-interactive]:active,
.db-cyan-contrast-high-interactive:active {
  background: var(--db-cyan-contrast-high-pressed);
}

[data-color=cyan-contrast-low],
.db-cyan-contrast-low, [data-color=cyan-contrast-low-interactive],
.db-cyan-contrast-low-interactive {
  --db-current-color-border: var(
  	--db-cyan-contrast-low-enabled
  );
  background-color: var(--db-cyan-contrast-low-enabled);
  color: var(--db-cyan-on-contrast-enabled);
}
[data-color=cyan-contrast-low]::before,
.db-cyan-contrast-low::before, [data-color=cyan-contrast-low-interactive]::before,
.db-cyan-contrast-low-interactive::before, [data-color=cyan-contrast-low]::after,
.db-cyan-contrast-low::after, [data-color=cyan-contrast-low-interactive]::after,
.db-cyan-contrast-low-interactive::after {
  --db-icon-color: $on;
}

[data-color=cyan-contrast-low-interactive],
.db-cyan-contrast-low-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=cyan-contrast-low-interactive]:is(:hover, :focus),
.db-cyan-contrast-low-interactive:is(:hover, :focus) {
  background: var(--db-cyan-contrast-low-hover);
}
[data-color=cyan-contrast-low-interactive]:active,
.db-cyan-contrast-low-interactive:active {
  background: var(--db-cyan-contrast-low-pressed);
}

[data-container-color=cyan],
.db-container-color-cyan, [data-color=cyan-bg-transparent-semi],
.db-cyan-bg-transparent-semi, [data-color=cyan-bg-transparent-full],
.db-cyan-bg-transparent-full, [data-color=cyan-bg-lvl-3],
.db-cyan-bg-lvl-3, [data-color=cyan-bg-lvl-2],
.db-cyan-bg-lvl-2, [data-color=cyan-bg-lvl-1],
.db-cyan-bg-lvl-1 {
  /* used for transparent backgrounds */
  --db-current-color-bg-transparent-full-enabled: var(
  	--db-cyan-bg-transparent-full-enabled
  );
  --db-current-color-bg-transparent-semi-enabled: var(
  	--db-cyan-bg-transparent-semi-enabled
  );
  --db-current-color-bg-transparent-hover: var(
  	--db-cyan-bg-transparent-hover
  );
  --db-current-color-bg-transparent-pressed: var(
  	--db-cyan-bg-transparent-pressed
  );
  /* used for backgrounds */
  --db-current-color-bg-lvl-1-enabled: var(
  	--db-cyan-bg-lvl-1-enabled
  );
  --db-current-color-bg-lvl-2-enabled: var(
  	--db-cyan-bg-lvl-2-enabled
  );
  --db-current-color-bg-lvl-3-enabled: var(
  	--db-cyan-bg-lvl-3-enabled
  );
  /* used for icons and borders */
  --db-current-color-contrast-low-enabled: var(
  	--db-cyan-contrast-low-enabled
  );
  --db-current-color-contrast-low-hover: var(
  	--db-cyan-contrast-low-hover
  );
  --db-current-color-contrast-low-pressed: var(
  	--db-cyan-contrast-low-pressed
  );
  --db-current-color-border: var(--db-cyan-border);
  /* used for adaptive tags (interactive) */
  --db-current-color-bg-lvl-1-hover: var(--db-cyan-bg-lvl-1-hover);
  --db-current-color-bg-lvl-1-pressed: var(
  	--db-cyan-bg-lvl-1-pressed
  );
  --db-current-color-bg-lvl-2-hover: var(--db-cyan-bg-lvl-2-hover);
  --db-current-color-bg-lvl-2-pressed: var(
  	--db-cyan-bg-lvl-2-pressed
  );
  --db-current-color-bg-lvl-3-hover: var(--db-cyan-bg-lvl-3-hover);
  --db-current-color-bg-lvl-3-pressed: var(
  	--db-cyan-bg-lvl-3-pressed
  );
  /* used for adaptive tags (strong & interactive) */
  --db-current-color-on-contrast-enabled: var(
  	--db-cyan-on-contrast-enabled
  );
  --db-current-color-contrast-high-enabled: var(
  	--db-cyan-contrast-high-enabled
  );
  --db-current-color-contrast-high-hover: var(
  	--db-cyan-contrast-high-hover
  );
  --db-current-color-contrast-high-pressed: var(
  	--db-cyan-contrast-high-pressed
  );
  /* on-colors */
  --db-current-color-on-bg-enabled: var(--db-cyan-on-bg-enabled);
  --db-current-color-on-bg-hover: var(--db-cyan-on-bg-hover);
  --db-current-color-on-bg-pressed: var(--db-cyan-on-bg-pressed);
  /* weak colors */
  --db-current-color-on-bg-weak-enabled: var(
  	--db-cyan-on-bg-weak-enabled
  );
  --db-current-color-on-bg-weak-hover: var(
  	--db-cyan-on-bg-weak-hover
  );
  --db-current-color-on-bg-weak-pressed: var(
  	--db-cyan-on-bg-weak-pressed
  );
}

[data-color=cyan-bg-lvl-1],
.db-cyan-bg-lvl-1 {
  background-color: var(--db-cyan-bg-lvl-1-enabled);
  color: var(--db-cyan-on-bg-enabled);
}
[data-color=cyan-bg-lvl-1]::before,
.db-cyan-bg-lvl-1::before, [data-color=cyan-bg-lvl-1]::after,
.db-cyan-bg-lvl-1::after {
  --db-icon-color: $on;
}

[data-color=cyan-bg-lvl-2],
.db-cyan-bg-lvl-2 {
  background-color: var(--db-cyan-bg-lvl-2-enabled);
  color: var(--db-cyan-on-bg-enabled);
}
[data-color=cyan-bg-lvl-2]::before,
.db-cyan-bg-lvl-2::before, [data-color=cyan-bg-lvl-2]::after,
.db-cyan-bg-lvl-2::after {
  --db-icon-color: $on;
}

[data-color=cyan-bg-lvl-3],
.db-cyan-bg-lvl-3 {
  background-color: var(--db-cyan-bg-lvl-3-enabled);
  color: var(--db-cyan-on-bg-enabled);
}
[data-color=cyan-bg-lvl-3]::before,
.db-cyan-bg-lvl-3::before, [data-color=cyan-bg-lvl-3]::after,
.db-cyan-bg-lvl-3::after {
  --db-icon-color: $on;
}

[data-color=cyan-bg-transparent-full],
.db-cyan-bg-transparent-full {
  background-color: var(--db-cyan-bg-transparent-full-enabled);
  color: var(--db-cyan-on-bg-enabled);
}
[data-color=cyan-bg-transparent-full]::before,
.db-cyan-bg-transparent-full::before, [data-color=cyan-bg-transparent-full]::after,
.db-cyan-bg-transparent-full::after {
  --db-icon-color: $on;
}

[data-color=cyan-bg-transparent-semi],
.db-cyan-bg-transparent-semi {
  background-color: var(--db-cyan-bg-transparent-semi-enabled);
  color: var(--db-cyan-on-bg-enabled);
}
[data-color=cyan-bg-transparent-semi]::before,
.db-cyan-bg-transparent-semi::before, [data-color=cyan-bg-transparent-semi]::after,
.db-cyan-bg-transparent-semi::after {
  --db-icon-color: $on;
}

[data-color=turquoise-contrast-high],
.db-turquoise-contrast-high, [data-color=turquoise-contrast-high-interactive],
.db-turquoise-contrast-high-interactive {
  --db-current-color-border: var(
  	--db-turquoise-contrast-high-enabled
  );
  background-color: var(--db-turquoise-contrast-high-enabled);
  color: var(--db-turquoise-on-contrast-enabled);
}
[data-color=turquoise-contrast-high]::before,
.db-turquoise-contrast-high::before, [data-color=turquoise-contrast-high-interactive]::before,
.db-turquoise-contrast-high-interactive::before, [data-color=turquoise-contrast-high]::after,
.db-turquoise-contrast-high::after, [data-color=turquoise-contrast-high-interactive]::after,
.db-turquoise-contrast-high-interactive::after {
  --db-icon-color: $on;
}

[data-color=turquoise-contrast-high-interactive],
.db-turquoise-contrast-high-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=turquoise-contrast-high-interactive]:is(:hover, :focus),
.db-turquoise-contrast-high-interactive:is(:hover, :focus) {
  background: var(--db-turquoise-contrast-high-hover);
}
[data-color=turquoise-contrast-high-interactive]:active,
.db-turquoise-contrast-high-interactive:active {
  background: var(--db-turquoise-contrast-high-pressed);
}

[data-color=turquoise-contrast-low],
.db-turquoise-contrast-low, [data-color=turquoise-contrast-low-interactive],
.db-turquoise-contrast-low-interactive {
  --db-current-color-border: var(
  	--db-turquoise-contrast-low-enabled
  );
  background-color: var(--db-turquoise-contrast-low-enabled);
  color: var(--db-turquoise-on-contrast-enabled);
}
[data-color=turquoise-contrast-low]::before,
.db-turquoise-contrast-low::before, [data-color=turquoise-contrast-low-interactive]::before,
.db-turquoise-contrast-low-interactive::before, [data-color=turquoise-contrast-low]::after,
.db-turquoise-contrast-low::after, [data-color=turquoise-contrast-low-interactive]::after,
.db-turquoise-contrast-low-interactive::after {
  --db-icon-color: $on;
}

[data-color=turquoise-contrast-low-interactive],
.db-turquoise-contrast-low-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=turquoise-contrast-low-interactive]:is(:hover, :focus),
.db-turquoise-contrast-low-interactive:is(:hover, :focus) {
  background: var(--db-turquoise-contrast-low-hover);
}
[data-color=turquoise-contrast-low-interactive]:active,
.db-turquoise-contrast-low-interactive:active {
  background: var(--db-turquoise-contrast-low-pressed);
}

[data-container-color=turquoise],
.db-container-color-turquoise, [data-color=turquoise-bg-transparent-semi],
.db-turquoise-bg-transparent-semi, [data-color=turquoise-bg-transparent-full],
.db-turquoise-bg-transparent-full, [data-color=turquoise-bg-lvl-3],
.db-turquoise-bg-lvl-3, [data-color=turquoise-bg-lvl-2],
.db-turquoise-bg-lvl-2, [data-color=turquoise-bg-lvl-1],
.db-turquoise-bg-lvl-1 {
  /* used for transparent backgrounds */
  --db-current-color-bg-transparent-full-enabled: var(
  	--db-turquoise-bg-transparent-full-enabled
  );
  --db-current-color-bg-transparent-semi-enabled: var(
  	--db-turquoise-bg-transparent-semi-enabled
  );
  --db-current-color-bg-transparent-hover: var(
  	--db-turquoise-bg-transparent-hover
  );
  --db-current-color-bg-transparent-pressed: var(
  	--db-turquoise-bg-transparent-pressed
  );
  /* used for backgrounds */
  --db-current-color-bg-lvl-1-enabled: var(
  	--db-turquoise-bg-lvl-1-enabled
  );
  --db-current-color-bg-lvl-2-enabled: var(
  	--db-turquoise-bg-lvl-2-enabled
  );
  --db-current-color-bg-lvl-3-enabled: var(
  	--db-turquoise-bg-lvl-3-enabled
  );
  /* used for icons and borders */
  --db-current-color-contrast-low-enabled: var(
  	--db-turquoise-contrast-low-enabled
  );
  --db-current-color-contrast-low-hover: var(
  	--db-turquoise-contrast-low-hover
  );
  --db-current-color-contrast-low-pressed: var(
  	--db-turquoise-contrast-low-pressed
  );
  --db-current-color-border: var(--db-turquoise-border);
  /* used for adaptive tags (interactive) */
  --db-current-color-bg-lvl-1-hover: var(--db-turquoise-bg-lvl-1-hover);
  --db-current-color-bg-lvl-1-pressed: var(
  	--db-turquoise-bg-lvl-1-pressed
  );
  --db-current-color-bg-lvl-2-hover: var(--db-turquoise-bg-lvl-2-hover);
  --db-current-color-bg-lvl-2-pressed: var(
  	--db-turquoise-bg-lvl-2-pressed
  );
  --db-current-color-bg-lvl-3-hover: var(--db-turquoise-bg-lvl-3-hover);
  --db-current-color-bg-lvl-3-pressed: var(
  	--db-turquoise-bg-lvl-3-pressed
  );
  /* used for adaptive tags (strong & interactive) */
  --db-current-color-on-contrast-enabled: var(
  	--db-turquoise-on-contrast-enabled
  );
  --db-current-color-contrast-high-enabled: var(
  	--db-turquoise-contrast-high-enabled
  );
  --db-current-color-contrast-high-hover: var(
  	--db-turquoise-contrast-high-hover
  );
  --db-current-color-contrast-high-pressed: var(
  	--db-turquoise-contrast-high-pressed
  );
  /* on-colors */
  --db-current-color-on-bg-enabled: var(--db-turquoise-on-bg-enabled);
  --db-current-color-on-bg-hover: var(--db-turquoise-on-bg-hover);
  --db-current-color-on-bg-pressed: var(--db-turquoise-on-bg-pressed);
  /* weak colors */
  --db-current-color-on-bg-weak-enabled: var(
  	--db-turquoise-on-bg-weak-enabled
  );
  --db-current-color-on-bg-weak-hover: var(
  	--db-turquoise-on-bg-weak-hover
  );
  --db-current-color-on-bg-weak-pressed: var(
  	--db-turquoise-on-bg-weak-pressed
  );
}

[data-color=turquoise-bg-lvl-1],
.db-turquoise-bg-lvl-1 {
  background-color: var(--db-turquoise-bg-lvl-1-enabled);
  color: var(--db-turquoise-on-bg-enabled);
}
[data-color=turquoise-bg-lvl-1]::before,
.db-turquoise-bg-lvl-1::before, [data-color=turquoise-bg-lvl-1]::after,
.db-turquoise-bg-lvl-1::after {
  --db-icon-color: $on;
}

[data-color=turquoise-bg-lvl-2],
.db-turquoise-bg-lvl-2 {
  background-color: var(--db-turquoise-bg-lvl-2-enabled);
  color: var(--db-turquoise-on-bg-enabled);
}
[data-color=turquoise-bg-lvl-2]::before,
.db-turquoise-bg-lvl-2::before, [data-color=turquoise-bg-lvl-2]::after,
.db-turquoise-bg-lvl-2::after {
  --db-icon-color: $on;
}

[data-color=turquoise-bg-lvl-3],
.db-turquoise-bg-lvl-3 {
  background-color: var(--db-turquoise-bg-lvl-3-enabled);
  color: var(--db-turquoise-on-bg-enabled);
}
[data-color=turquoise-bg-lvl-3]::before,
.db-turquoise-bg-lvl-3::before, [data-color=turquoise-bg-lvl-3]::after,
.db-turquoise-bg-lvl-3::after {
  --db-icon-color: $on;
}

[data-color=turquoise-bg-transparent-full],
.db-turquoise-bg-transparent-full {
  background-color: var(--db-turquoise-bg-transparent-full-enabled);
  color: var(--db-turquoise-on-bg-enabled);
}
[data-color=turquoise-bg-transparent-full]::before,
.db-turquoise-bg-transparent-full::before, [data-color=turquoise-bg-transparent-full]::after,
.db-turquoise-bg-transparent-full::after {
  --db-icon-color: $on;
}

[data-color=turquoise-bg-transparent-semi],
.db-turquoise-bg-transparent-semi {
  background-color: var(--db-turquoise-bg-transparent-semi-enabled);
  color: var(--db-turquoise-on-bg-enabled);
}
[data-color=turquoise-bg-transparent-semi]::before,
.db-turquoise-bg-transparent-semi::before, [data-color=turquoise-bg-transparent-semi]::after,
.db-turquoise-bg-transparent-semi::after {
  --db-icon-color: $on;
}

[data-color=green-contrast-high],
.db-green-contrast-high, [data-color=green-contrast-high-interactive],
.db-green-contrast-high-interactive {
  --db-current-color-border: var(
  	--db-green-contrast-high-enabled
  );
  background-color: var(--db-green-contrast-high-enabled);
  color: var(--db-green-on-contrast-enabled);
}
[data-color=green-contrast-high]::before,
.db-green-contrast-high::before, [data-color=green-contrast-high-interactive]::before,
.db-green-contrast-high-interactive::before, [data-color=green-contrast-high]::after,
.db-green-contrast-high::after, [data-color=green-contrast-high-interactive]::after,
.db-green-contrast-high-interactive::after {
  --db-icon-color: $on;
}

[data-color=green-contrast-high-interactive],
.db-green-contrast-high-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=green-contrast-high-interactive]:is(:hover, :focus),
.db-green-contrast-high-interactive:is(:hover, :focus) {
  background: var(--db-green-contrast-high-hover);
}
[data-color=green-contrast-high-interactive]:active,
.db-green-contrast-high-interactive:active {
  background: var(--db-green-contrast-high-pressed);
}

[data-color=green-contrast-low],
.db-green-contrast-low, [data-color=green-contrast-low-interactive],
.db-green-contrast-low-interactive {
  --db-current-color-border: var(
  	--db-green-contrast-low-enabled
  );
  background-color: var(--db-green-contrast-low-enabled);
  color: var(--db-green-on-contrast-enabled);
}
[data-color=green-contrast-low]::before,
.db-green-contrast-low::before, [data-color=green-contrast-low-interactive]::before,
.db-green-contrast-low-interactive::before, [data-color=green-contrast-low]::after,
.db-green-contrast-low::after, [data-color=green-contrast-low-interactive]::after,
.db-green-contrast-low-interactive::after {
  --db-icon-color: $on;
}

[data-color=green-contrast-low-interactive],
.db-green-contrast-low-interactive {
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
  /* stylelint-disable-next-line scss/percent-placeholder-pattern */
}
[data-color=green-contrast-low-interactive]:is(:hover, :focus),
.db-green-contrast-low-interactive:is(:hover, :focus) {
  background: var(--db-green-contrast-low-hover);
}
[data-color=green-contrast-low-interactive]:active,
.db-green-contrast-low-interactive:active {
  background: var(--db-green-contrast-low-pressed);
}

[data-container-color=green],
.db-container-color-green, [data-color=green-bg-transparent-semi],
.db-green-bg-transparent-semi, [data-color=green-bg-transparent-full],
.db-green-bg-transparent-full, [data-color=green-bg-lvl-3],
.db-green-bg-lvl-3, [data-color=green-bg-lvl-2],
.db-green-bg-lvl-2, [data-color=green-bg-lvl-1],
.db-green-bg-lvl-1 {
  /* used for transparent backgrounds */
  --db-current-color-bg-transparent-full-enabled: var(
  	--db-green-bg-transparent-full-enabled
  );
  --db-current-color-bg-transparent-semi-enabled: var(
  	--db-green-bg-transparent-semi-enabled
  );
  --db-current-color-bg-transparent-hover: var(
  	--db-green-bg-transparent-hover
  );
  --db-current-color-bg-transparent-pressed: var(
  	--db-green-bg-transparent-pressed
  );
  /* used for backgrounds */
  --db-current-color-bg-lvl-1-enabled: var(
  	--db-green-bg-lvl-1-enabled
  );
  --db-current-color-bg-lvl-2-enabled: var(
  	--db-green-bg-lvl-2-enabled
  );
  --db-current-color-bg-lvl-3-enabled: var(
  	--db-green-bg-lvl-3-enabled
  );
  /* used for icons and borders */
  --db-current-color-contrast-low-enabled: var(
  	--db-green-contrast-low-enabled
  );
  --db-current-color-contrast-low-hover: var(
  	--db-green-contrast-low-hover
  );
  --db-current-color-contrast-low-pressed: var(
  	--db-green-contrast-low-pressed
  );
  --db-current-color-border: var(--db-green-border);
  /* used for adaptive tags (interactive) */
  --db-current-color-bg-lvl-1-hover: var(--db-green-bg-lvl-1-hover);
  --db-current-color-bg-lvl-1-pressed: var(
  	--db-green-bg-lvl-1-pressed
  );
  --db-current-color-bg-lvl-2-hover: var(--db-green-bg-lvl-2-hover);
  --db-current-color-bg-lvl-2-pressed: var(
  	--db-green-bg-lvl-2-pressed
  );
  --db-current-color-bg-lvl-3-hover: var(--db-green-bg-lvl-3-hover);
  --db-current-color-bg-lvl-3-pressed: var(
  	--db-green-bg-lvl-3-pressed
  );
  /* used for adaptive tags (strong & interactive) */
  --db-current-color-on-contrast-enabled: var(
  	--db-green-on-contrast-enabled
  );
  --db-current-color-contrast-high-enabled: var(
  	--db-green-contrast-high-enabled
  );
  --db-current-color-contrast-high-hover: var(
  	--db-green-contrast-high-hover
  );
  --db-current-color-contrast-high-pressed: var(
  	--db-green-contrast-high-pressed
  );
  /* on-colors */
  --db-current-color-on-bg-enabled: var(--db-green-on-bg-enabled);
  --db-current-color-on-bg-hover: var(--db-green-on-bg-hover);
  --db-current-color-on-bg-pressed: var(--db-green-on-bg-pressed);
  /* weak colors */
  --db-current-color-on-bg-weak-enabled: var(
  	--db-green-on-bg-weak-enabled
  );
  --db-current-color-on-bg-weak-hover: var(
  	--db-green-on-bg-weak-hover
  );
  --db-current-color-on-bg-weak-pressed: var(
  	--db-green-on-bg-weak-pressed
  );
}

[data-color=green-bg-lvl-1],
.db-green-bg-lvl-1 {
  background-color: var(--db-green-bg-lvl-1-enabled);
  color: var(--db-green-on-bg-enabled);
}
[data-color=green-bg-lvl-1]::before,
.db-green-bg-lvl-1::before, [data-color=green-bg-lvl-1]::after,
.db-green-bg-lvl-1::after {
  --db-icon-color: $on;
}

[data-color=green-bg-lvl-2],
.db-green-bg-lvl-2 {
  background-color: var(--db-green-bg-lvl-2-enabled);
  color: var(--db-green-on-bg-enabled);
}
[data-color=green-bg-lvl-2]::before,
.db-green-bg-lvl-2::before, [data-color=green-bg-lvl-2]::after,
.db-green-bg-lvl-2::after {
  --db-icon-color: $on;
}

[data-color=green-bg-lvl-3],
.db-green-bg-lvl-3 {
  background-color: var(--db-green-bg-lvl-3-enabled);
  color: var(--db-green-on-bg-enabled);
}
[data-color=green-bg-lvl-3]::before,
.db-green-bg-lvl-3::before, [data-color=green-bg-lvl-3]::after,
.db-green-bg-lvl-3::after {
  --db-icon-color: $on;
}

[data-color=green-bg-transparent-full],
.db-green-bg-transparent-full {
  background-color: var(--db-green-bg-transparent-full-enabled);
  color: var(--db-green-on-bg-enabled);
}
[data-color=green-bg-transparent-full]::before,
.db-green-bg-transparent-full::before, [data-color=green-bg-transparent-full]::after,
.db-green-bg-transparent-full::after {
  --db-icon-color: $on;
}

[data-color=green-bg-transparent-semi],
.db-green-bg-transparent-semi {
  background-color: var(--db-green-bg-transparent-semi-enabled);
  color: var(--db-green-on-bg-enabled);
}
[data-color=green-bg-transparent-semi]::before,
.db-green-bg-transparent-semi::before, [data-color=green-bg-transparent-semi]::after,
.db-green-bg-transparent-semi::after {
  --db-icon-color: $on;
}

[data-container-color=neutral],
.db-container-color-neutral {
  color: var(--db-current-color-on-bg-enabled);
  background-color: var(--db-current-color-bg-lvl-1-enabled);
}

[data-container-color=brand],
.db-container-color-brand {
  color: var(--db-current-color-on-bg-enabled);
  background-color: var(--db-current-color-bg-lvl-1-enabled);
}

[data-container-color=critical],
.db-container-color-critical {
  color: var(--db-current-color-on-bg-enabled);
  background-color: var(--db-current-color-bg-lvl-1-enabled);
}

[data-container-color=successful],
.db-container-color-successful {
  color: var(--db-current-color-on-bg-enabled);
  background-color: var(--db-current-color-bg-lvl-1-enabled);
}

[data-container-color=warning],
.db-container-color-warning {
  color: var(--db-current-color-on-bg-enabled);
  background-color: var(--db-current-color-bg-lvl-1-enabled);
}

[data-container-color=informational],
.db-container-color-informational {
  color: var(--db-current-color-on-bg-enabled);
  background-color: var(--db-current-color-bg-lvl-1-enabled);
}

[data-container-color=yellow],
.db-container-color-yellow {
  color: var(--db-current-color-on-bg-enabled);
  background-color: var(--db-current-color-bg-lvl-1-enabled);
}

[data-container-color=orange],
.db-container-color-orange {
  color: var(--db-current-color-on-bg-enabled);
  background-color: var(--db-current-color-bg-lvl-1-enabled);
}

[data-container-color=red],
.db-container-color-red {
  color: var(--db-current-color-on-bg-enabled);
  background-color: var(--db-current-color-bg-lvl-1-enabled);
}

[data-container-color=pink],
.db-container-color-pink {
  color: var(--db-current-color-on-bg-enabled);
  background-color: var(--db-current-color-bg-lvl-1-enabled);
}

[data-container-color=violet],
.db-container-color-violet {
  color: var(--db-current-color-on-bg-enabled);
  background-color: var(--db-current-color-bg-lvl-1-enabled);
}

[data-container-color=blue],
.db-container-color-blue {
  color: var(--db-current-color-on-bg-enabled);
  background-color: var(--db-current-color-bg-lvl-1-enabled);
}

[data-container-color=cyan],
.db-container-color-cyan {
  color: var(--db-current-color-on-bg-enabled);
  background-color: var(--db-current-color-bg-lvl-1-enabled);
}

[data-container-color=turquoise],
.db-container-color-turquoise {
  color: var(--db-current-color-on-bg-enabled);
  background-color: var(--db-current-color-bg-lvl-1-enabled);
}

[data-container-color=green],
.db-container-color-green {
  color: var(--db-current-color-on-bg-enabled);
  background-color: var(--db-current-color-bg-lvl-1-enabled);
}

[data-bg-color=lvl-1],
.db-bg-color-lvl-1 {
  background-color: var(--db-current-color-bg-lvl-1-enabled);
}

[data-bg-color=lvl-2],
.db-bg-color-lvl-2 {
  background-color: var(--db-current-color-bg-lvl-2-enabled);
}

[data-bg-color=lvl-3],
.db-bg-color-lvl-3 {
  background-color: var(--db-current-color-bg-lvl-3-enabled);
}

[data-bg-color=transparent-full],
.db-bg-color-transparent-full {
  background-color: var(--db-current-color-bg-transparent-full-enabled);
}

[data-bg-color=transparent-semi],
.db-bg-color-transparent-semi {
  background-color: var(--db-current-color-bg-transparent-semi-enabled);
}

[data-on-bg-color=default],
.db-on-bg-color-default {
  color: var(--db-current-color-on-bg-enabled);
}

[data-on-bg-color=weak],
.db-on-bg-color-weak {
  color: var(--db-current-color-on-bg-weak-enabled);
}

[data-on-bg-color=contrast],
.db-on-bg-color-contrast {
  color: var(--db-current-color-contrast-high-enabled);
}

[data-on-bg-color=contrast-weak],
.db-on-bg-color-contrast-weak {
  color: var(--db-current-color-contrast-low-enabled);
}

[data-on-bg-color=border],
.db-on-bg-color-border {
  color: var(--db-current-color-border);
}
