/* Palette colors */
/* Variants for adaptive components like input, select, alert, ... */
.db-bg-base-transparent-full, .db-bg-base-transparent-semi, .db-bg-base {
  /* used for transparent backgrounds */
  --db-current-bg-transparent-full: var(
  	--db-base-bg-transparent-full
  );
  --db-current-bg-transparent-semi: var(
  	--db-base-bg-transparent-semi
  );
  --db-current-bg-transparent-hover: var(
  	--db-base-bg-transparent-hover
  );
  --db-current-bg-transparent-pressed: var(
  	--db-base-bg-transparent-pressed
  );
  /* used for text */
  --db-current-color: var(--db-base-on-bg);
  /* used for checkbox:checked */
  --db-current-color-hover: var(--db-base-on-bg-hover);
  --db-current-color-pressed: var(--db-base-on-bg-pressed);
  /* used as normal backgrounds */
  --db-current-bg-color: var(--db-base-bg);
  /* used for icons and borders */
  --db-current-contrast-low-color: var(--db-base-contrast-low);
  --db-current-border-color: var(--db-base-border);
}

.db-bg-base {
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
.db-bg-base-transparent-full {
  background-color: var(--db-current-bg-transparent-full);
}
.db-bg-base-transparent-semi {
  background-color: var(--db-current-bg-transparent-semi);
}
[data-emphasis=weak].db-bg-base {
  /* used for text */
  --db-current-color: var(--db-base-on-bg-weak);
  /* used for checkbox:checked */
  --db-current-color-hover: var(--db-base-on-bg-weak-hover);
  --db-current-color-pressed: var(
  	--db-base-on-bg-weak-pressed
  );
  color: var(--db-current-color);
}
.db-bg-base-strong {
  --db-current-color: var(--db-base-on-bg);
  --db-current-bg-color: var(--db-base-bg-strong);
  --db-current-border-color: var(--db-base-border);
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
.db-bg-neutral-transparent-full, .db-bg-neutral-transparent-semi, .db-bg-neutral {
  /* used for transparent backgrounds */
  --db-current-bg-transparent-full: var(
  	--db-neutral-bg-transparent-full
  );
  --db-current-bg-transparent-semi: var(
  	--db-neutral-bg-transparent-semi
  );
  --db-current-bg-transparent-hover: var(
  	--db-neutral-bg-transparent-hover
  );
  --db-current-bg-transparent-pressed: var(
  	--db-neutral-bg-transparent-pressed
  );
  /* used for text */
  --db-current-color: var(--db-neutral-on-bg);
  /* used for checkbox:checked */
  --db-current-color-hover: var(--db-neutral-on-bg-hover);
  --db-current-color-pressed: var(--db-neutral-on-bg-pressed);
  /* used as normal backgrounds */
  --db-current-bg-color: var(--db-neutral-bg-weak);
  /* used for icons and borders */
  --db-current-contrast-low-color: var(--db-neutral-contrast-low);
  --db-current-border-color: var(--db-neutral-border);
}

.db-bg-neutral {
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
.db-bg-neutral-transparent-full {
  background-color: var(--db-current-bg-transparent-full);
}
.db-bg-neutral-transparent-semi {
  background-color: var(--db-current-bg-transparent-semi);
}
[data-emphasis=weak].db-bg-neutral {
  /* used for text */
  --db-current-color: var(--db-neutral-on-bg-weak);
  /* used for checkbox:checked */
  --db-current-color-hover: var(--db-neutral-on-bg-weak-hover);
  --db-current-color-pressed: var(
  	--db-neutral-on-bg-weak-pressed
  );
  color: var(--db-current-color);
}
.db-bg-neutral-strong {
  --db-current-color: var(--db-neutral-on-bg);
  --db-current-bg-color: var(--db-neutral-bg-strong);
  --db-current-border-color: var(--db-neutral-border);
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
.db-bg-brand-transparent-full, .db-bg-brand-transparent-semi, .db-bg-brand {
  /* used for transparent backgrounds */
  --db-current-bg-transparent-full: var(
  	--db-brand-bg-transparent-full
  );
  --db-current-bg-transparent-semi: var(
  	--db-brand-bg-transparent-semi
  );
  --db-current-bg-transparent-hover: var(
  	--db-brand-bg-transparent-hover
  );
  --db-current-bg-transparent-pressed: var(
  	--db-brand-bg-transparent-pressed
  );
  /* used for text */
  --db-current-color: var(--db-brand-on-bg);
  /* used for checkbox:checked */
  --db-current-color-hover: var(--db-brand-on-bg-hover);
  --db-current-color-pressed: var(--db-brand-on-bg-pressed);
  /* used as normal backgrounds */
  --db-current-bg-color: var(--db-brand-bg-weak);
  /* used for icons and borders */
  --db-current-contrast-low-color: var(--db-brand-contrast-low);
  --db-current-border-color: var(--db-brand-border);
}

.db-bg-brand {
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
.db-bg-brand-transparent-full {
  background-color: var(--db-current-bg-transparent-full);
}
.db-bg-brand-transparent-semi {
  background-color: var(--db-current-bg-transparent-semi);
}
[data-emphasis=weak].db-bg-brand {
  /* used for text */
  --db-current-color: var(--db-brand-on-bg-weak);
  /* used for checkbox:checked */
  --db-current-color-hover: var(--db-brand-on-bg-weak-hover);
  --db-current-color-pressed: var(
  	--db-brand-on-bg-weak-pressed
  );
  color: var(--db-current-color);
}
.db-bg-brand-strong {
  --db-current-color: var(--db-brand-on-bg);
  --db-current-bg-color: var(--db-brand-bg-strong);
  --db-current-border-color: var(--db-brand-border);
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
.db-bg-critical-transparent-full, .db-bg-critical-transparent-semi, .db-bg-critical {
  /* used for transparent backgrounds */
  --db-current-bg-transparent-full: var(
  	--db-critical-bg-transparent-full
  );
  --db-current-bg-transparent-semi: var(
  	--db-critical-bg-transparent-semi
  );
  --db-current-bg-transparent-hover: var(
  	--db-critical-bg-transparent-hover
  );
  --db-current-bg-transparent-pressed: var(
  	--db-critical-bg-transparent-pressed
  );
  /* used for text */
  --db-current-color: var(--db-critical-on-bg);
  /* used for checkbox:checked */
  --db-current-color-hover: var(--db-critical-on-bg-hover);
  --db-current-color-pressed: var(--db-critical-on-bg-pressed);
  /* used as normal backgrounds */
  --db-current-bg-color: var(--db-critical-bg-weak);
  /* used for icons and borders */
  --db-current-contrast-low-color: var(--db-critical-contrast-low);
  --db-current-border-color: var(--db-critical-border);
}

.db-bg-critical {
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
.db-bg-critical-transparent-full {
  background-color: var(--db-current-bg-transparent-full);
}
.db-bg-critical-transparent-semi {
  background-color: var(--db-current-bg-transparent-semi);
}
[data-emphasis=weak].db-bg-critical {
  /* used for text */
  --db-current-color: var(--db-critical-on-bg-weak);
  /* used for checkbox:checked */
  --db-current-color-hover: var(--db-critical-on-bg-weak-hover);
  --db-current-color-pressed: var(
  	--db-critical-on-bg-weak-pressed
  );
  color: var(--db-current-color);
}
.db-bg-critical-strong {
  --db-current-color: var(--db-critical-on-bg);
  --db-current-bg-color: var(--db-critical-bg-strong);
  --db-current-border-color: var(--db-critical-border);
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
.db-bg-successful-transparent-full, .db-bg-successful-transparent-semi, .db-bg-successful {
  /* used for transparent backgrounds */
  --db-current-bg-transparent-full: var(
  	--db-successful-bg-transparent-full
  );
  --db-current-bg-transparent-semi: var(
  	--db-successful-bg-transparent-semi
  );
  --db-current-bg-transparent-hover: var(
  	--db-successful-bg-transparent-hover
  );
  --db-current-bg-transparent-pressed: var(
  	--db-successful-bg-transparent-pressed
  );
  /* used for text */
  --db-current-color: var(--db-successful-on-bg);
  /* used for checkbox:checked */
  --db-current-color-hover: var(--db-successful-on-bg-hover);
  --db-current-color-pressed: var(--db-successful-on-bg-pressed);
  /* used as normal backgrounds */
  --db-current-bg-color: var(--db-successful-bg-weak);
  /* used for icons and borders */
  --db-current-contrast-low-color: var(--db-successful-contrast-low);
  --db-current-border-color: var(--db-successful-border);
}

.db-bg-successful {
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
.db-bg-successful-transparent-full {
  background-color: var(--db-current-bg-transparent-full);
}
.db-bg-successful-transparent-semi {
  background-color: var(--db-current-bg-transparent-semi);
}
[data-emphasis=weak].db-bg-successful {
  /* used for text */
  --db-current-color: var(--db-successful-on-bg-weak);
  /* used for checkbox:checked */
  --db-current-color-hover: var(--db-successful-on-bg-weak-hover);
  --db-current-color-pressed: var(
  	--db-successful-on-bg-weak-pressed
  );
  color: var(--db-current-color);
}
.db-bg-successful-strong {
  --db-current-color: var(--db-successful-on-bg);
  --db-current-bg-color: var(--db-successful-bg-strong);
  --db-current-border-color: var(--db-successful-border);
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
.db-bg-warning-transparent-full, .db-bg-warning-transparent-semi, .db-bg-warning {
  /* used for transparent backgrounds */
  --db-current-bg-transparent-full: var(
  	--db-warning-bg-transparent-full
  );
  --db-current-bg-transparent-semi: var(
  	--db-warning-bg-transparent-semi
  );
  --db-current-bg-transparent-hover: var(
  	--db-warning-bg-transparent-hover
  );
  --db-current-bg-transparent-pressed: var(
  	--db-warning-bg-transparent-pressed
  );
  /* used for text */
  --db-current-color: var(--db-warning-on-bg);
  /* used for checkbox:checked */
  --db-current-color-hover: var(--db-warning-on-bg-hover);
  --db-current-color-pressed: var(--db-warning-on-bg-pressed);
  /* used as normal backgrounds */
  --db-current-bg-color: var(--db-warning-bg-weak);
  /* used for icons and borders */
  --db-current-contrast-low-color: var(--db-warning-contrast-low);
  --db-current-border-color: var(--db-warning-border);
}

.db-bg-warning {
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
.db-bg-warning-transparent-full {
  background-color: var(--db-current-bg-transparent-full);
}
.db-bg-warning-transparent-semi {
  background-color: var(--db-current-bg-transparent-semi);
}
[data-emphasis=weak].db-bg-warning {
  /* used for text */
  --db-current-color: var(--db-warning-on-bg-weak);
  /* used for checkbox:checked */
  --db-current-color-hover: var(--db-warning-on-bg-weak-hover);
  --db-current-color-pressed: var(
  	--db-warning-on-bg-weak-pressed
  );
  color: var(--db-current-color);
}
.db-bg-warning-strong {
  --db-current-color: var(--db-warning-on-bg);
  --db-current-bg-color: var(--db-warning-bg-strong);
  --db-current-border-color: var(--db-warning-border);
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
.db-bg-informational-transparent-full, .db-bg-informational-transparent-semi, .db-bg-informational {
  /* used for transparent backgrounds */
  --db-current-bg-transparent-full: var(
  	--db-informational-bg-transparent-full
  );
  --db-current-bg-transparent-semi: var(
  	--db-informational-bg-transparent-semi
  );
  --db-current-bg-transparent-hover: var(
  	--db-informational-bg-transparent-hover
  );
  --db-current-bg-transparent-pressed: var(
  	--db-informational-bg-transparent-pressed
  );
  /* used for text */
  --db-current-color: var(--db-informational-on-bg);
  /* used for checkbox:checked */
  --db-current-color-hover: var(--db-informational-on-bg-hover);
  --db-current-color-pressed: var(--db-informational-on-bg-pressed);
  /* used as normal backgrounds */
  --db-current-bg-color: var(--db-informational-bg-weak);
  /* used for icons and borders */
  --db-current-contrast-low-color: var(--db-informational-contrast-low);
  --db-current-border-color: var(--db-informational-border);
}

.db-bg-informational {
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
.db-bg-informational-transparent-full {
  background-color: var(--db-current-bg-transparent-full);
}
.db-bg-informational-transparent-semi {
  background-color: var(--db-current-bg-transparent-semi);
}
[data-emphasis=weak].db-bg-informational {
  /* used for text */
  --db-current-color: var(--db-informational-on-bg-weak);
  /* used for checkbox:checked */
  --db-current-color-hover: var(--db-informational-on-bg-weak-hover);
  --db-current-color-pressed: var(
  	--db-informational-on-bg-weak-pressed
  );
  color: var(--db-current-color);
}
.db-bg-informational-strong {
  --db-current-color: var(--db-informational-on-bg);
  --db-current-bg-color: var(--db-informational-bg-strong);
  --db-current-border-color: var(--db-informational-border);
  background-color: var(--db-current-bg-color);
  color: var(--db-current-color);
}
