/* 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=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-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);
}
