/**
	Generates 3 types of placeholders, e.g:
	- %db-component-variables-md
	- %db-font-size-md
	- %db-overwrite-font-size-md
 */
.db-density-expressive,
[data-density=expressive] {
  line-height: var(--db-type-body-line-height-md);
  font-size: var(--db-type-body-font-size-md);
}

.db-density-expressive,
[data-density=expressive] {
  /* Those variables are only for components to calculate heights and change icons */
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
  --db-base-line-height: var(--db-type-body-line-height-md);
  --db-base-font-size: var(--db-type-body-font-size-md);
  line-height: var(--db-type-body-line-height-md);
  font-size: var(--db-type-body-font-size-md);
}

/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
/* Use fixed spacings for all kind of distances (margin, padding, ...) */
/* The primary use-case for responsive spacings are
paddings/gaps in an application e.g. the <main> should have a responsive padding. */
/* Elevation */
/* Border */
/* Transitions */
/* Variants for adaptive components like input, select, notification, ... */
.db-density-expressive,
[data-density=expressive] {
  --db-sizing-3xs: var(--db-sizing-expressive-3xs);
  --db-sizing-2xs: var(--db-sizing-expressive-2xs);
  --db-sizing-xs: var(--db-sizing-expressive-xs);
  --db-sizing-sm: var(--db-sizing-expressive-sm);
  --db-sizing-md: var(--db-sizing-expressive-md);
  --db-sizing-lg: var(--db-sizing-expressive-lg);
  --db-sizing-xl: var(--db-sizing-expressive-xl);
  --db-sizing-2xl: var(--db-sizing-expressive-2xl);
  --db-sizing-3xl: var(--db-sizing-expressive-3xl);
  --db-spacing-fixed-3xs: var(--db-spacing-fixed-expressive-3xs);
  --db-spacing-fixed-2xs: var(--db-spacing-fixed-expressive-2xs);
  --db-spacing-fixed-xs: var(--db-spacing-fixed-expressive-xs);
  --db-spacing-fixed-sm: var(--db-spacing-fixed-expressive-sm);
  --db-spacing-fixed-md: var(--db-spacing-fixed-expressive-md);
  --db-spacing-fixed-lg: var(--db-spacing-fixed-expressive-lg);
  --db-spacing-fixed-xl: var(--db-spacing-fixed-expressive-xl);
  --db-spacing-fixed-2xl: var(--db-spacing-fixed-expressive-2xl);
  --db-spacing-fixed-3xl: var(--db-spacing-fixed-expressive-3xl);
  --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-mobile-3xs);
  --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-mobile-2xs);
  --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-mobile-xs);
  --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-mobile-sm);
  --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-mobile-md);
  --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-mobile-lg);
  --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-mobile-xl);
  --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-mobile-2xl);
  --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-mobile-3xl);
  /* stylelint-disable at-rule-empty-line-before */
  /* stylelint-enable at-rule-empty-line-before */
  /* stylelint-disable-next-line media-query-no-invalid */
  /* stylelint-disable-next-line at-rule-empty-line-before */
  /* stylelint-disable at-rule-empty-line-before */
  /* stylelint-enable at-rule-empty-line-before */
  /* stylelint-disable-next-line media-query-no-invalid */
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
@media screen and (min-width: 45em) {
  .db-density-expressive:not([data-force-mobile]),
  [data-density=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-density-expressive,
  [data-force-mobile=false][data-density=expressive] {
    --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-tablet-3xs);
    --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-tablet-2xs);
    --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-tablet-xs);
    --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-tablet-sm);
    --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-tablet-md);
    --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-tablet-lg);
    --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-tablet-xl);
    --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-tablet-2xl);
    --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-tablet-3xl);
  }
}
@media screen and (min-width: 64em) {
  .db-density-expressive:not([data-force-mobile]),
  [data-density=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-density-expressive,
  [data-force-mobile=false][data-density=expressive] {
    --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-desktop-3xs);
    --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-desktop-2xs);
    --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-desktop-xs);
    --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-desktop-sm);
    --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-desktop-md);
    --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-desktop-lg);
    --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-desktop-xl);
    --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-desktop-2xl);
    --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-desktop-3xl);
  }
}

.db-density-expressive,
[data-density=expressive] {
  --db-type-headline-font-size-3xs: var(--db-typography-expressive-mobile-headline-3xs-font-size);
  --db-type-headline-line-height-3xs: var(--db-typography-expressive-mobile-headline-3xs-line-height);
  --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-headline-3xs);
  --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-headline-3xs);
  --db-type-headline-font-size-2xs: var(--db-typography-expressive-mobile-headline-2xs-font-size);
  --db-type-headline-line-height-2xs: var(--db-typography-expressive-mobile-headline-2xs-line-height);
  --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-headline-2xs);
  --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-headline-2xs);
  --db-type-headline-font-size-xs: var(--db-typography-expressive-mobile-headline-xs-font-size);
  --db-type-headline-line-height-xs: var(--db-typography-expressive-mobile-headline-xs-line-height);
  --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-headline-xs);
  --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-headline-xs);
  --db-type-headline-font-size-sm: var(--db-typography-expressive-mobile-headline-sm-font-size);
  --db-type-headline-line-height-sm: var(--db-typography-expressive-mobile-headline-sm-line-height);
  --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-headline-sm);
  --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-headline-sm);
  --db-type-headline-font-size-md: var(--db-typography-expressive-mobile-headline-md-font-size);
  --db-type-headline-line-height-md: var(--db-typography-expressive-mobile-headline-md-line-height);
  --db-base-headline-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-headline-md);
  --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-headline-md);
  --db-type-headline-font-size-lg: var(--db-typography-expressive-mobile-headline-lg-font-size);
  --db-type-headline-line-height-lg: var(--db-typography-expressive-mobile-headline-lg-line-height);
  --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-headline-lg);
  --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-headline-lg);
  --db-type-headline-font-size-xl: var(--db-typography-expressive-mobile-headline-xl-font-size);
  --db-type-headline-line-height-xl: var(--db-typography-expressive-mobile-headline-xl-line-height);
  --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-headline-xl);
  --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-headline-xl);
  --db-type-headline-font-size-2xl: var(--db-typography-expressive-mobile-headline-2xl-font-size);
  --db-type-headline-line-height-2xl: var(--db-typography-expressive-mobile-headline-2xl-line-height);
  --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-expressive-mobile-headline-2xl);
  --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-mobile-headline-2xl);
  --db-type-headline-font-size-3xl: var(--db-typography-expressive-mobile-headline-3xl-font-size);
  --db-type-headline-line-height-3xl: var(--db-typography-expressive-mobile-headline-3xl-line-height);
  --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-expressive-mobile-headline-3xl);
  --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-headline-3xl);
  /* stylelint-disable at-rule-empty-line-before */
  /* stylelint-enable at-rule-empty-line-before */
  /* stylelint-disable-next-line media-query-no-invalid */
  /* stylelint-disable-next-line at-rule-empty-line-before */
  /* stylelint-disable at-rule-empty-line-before */
  /* stylelint-enable at-rule-empty-line-before */
  /* stylelint-disable-next-line media-query-no-invalid */
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
@media screen and (min-width: 45em) {
  .db-density-expressive:not([data-force-mobile]),
  [data-density=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-density-expressive,
  [data-force-mobile=false][data-density=expressive] {
    --db-type-headline-font-size-3xs: var(--db-typography-expressive-tablet-headline-3xs-font-size);
    --db-type-headline-line-height-3xs: var(--db-typography-expressive-tablet-headline-3xs-line-height);
    --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-expressive-tablet-headline-3xs);
    --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-tablet-headline-3xs);
    --db-type-headline-font-size-2xs: var(--db-typography-expressive-tablet-headline-2xs-font-size);
    --db-type-headline-line-height-2xs: var(--db-typography-expressive-tablet-headline-2xs-line-height);
    --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-expressive-tablet-headline-2xs);
    --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-tablet-headline-2xs);
    --db-type-headline-font-size-xs: var(--db-typography-expressive-tablet-headline-xs-font-size);
    --db-type-headline-line-height-xs: var(--db-typography-expressive-tablet-headline-xs-line-height);
    --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-expressive-tablet-headline-xs);
    --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-expressive-tablet-headline-xs);
    --db-type-headline-font-size-sm: var(--db-typography-expressive-tablet-headline-sm-font-size);
    --db-type-headline-line-height-sm: var(--db-typography-expressive-tablet-headline-sm-line-height);
    --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-expressive-tablet-headline-sm);
    --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-expressive-tablet-headline-sm);
    --db-type-headline-font-size-md: var(--db-typography-expressive-tablet-headline-md-font-size);
    --db-type-headline-line-height-md: var(--db-typography-expressive-tablet-headline-md-line-height);
    --db-base-headline-icon-weight-md: var(--db-base-icon-weight-expressive-tablet-headline-md);
    --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-expressive-tablet-headline-md);
    --db-type-headline-font-size-lg: var(--db-typography-expressive-tablet-headline-lg-font-size);
    --db-type-headline-line-height-lg: var(--db-typography-expressive-tablet-headline-lg-line-height);
    --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-expressive-tablet-headline-lg);
    --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-expressive-tablet-headline-lg);
    --db-type-headline-font-size-xl: var(--db-typography-expressive-tablet-headline-xl-font-size);
    --db-type-headline-line-height-xl: var(--db-typography-expressive-tablet-headline-xl-line-height);
    --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-expressive-tablet-headline-xl);
    --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-expressive-tablet-headline-xl);
    --db-type-headline-font-size-2xl: var(--db-typography-expressive-tablet-headline-2xl-font-size);
    --db-type-headline-line-height-2xl: var(--db-typography-expressive-tablet-headline-2xl-line-height);
    --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-expressive-tablet-headline-2xl);
    --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-tablet-headline-2xl);
    --db-type-headline-font-size-3xl: var(--db-typography-expressive-tablet-headline-3xl-font-size);
    --db-type-headline-line-height-3xl: var(--db-typography-expressive-tablet-headline-3xl-line-height);
    --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-expressive-tablet-headline-3xl);
    --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-tablet-headline-3xl);
  }
}
@media screen and (min-width: 64em) {
  .db-density-expressive:not([data-force-mobile]),
  [data-density=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-density-expressive,
  [data-force-mobile=false][data-density=expressive] {
    --db-type-headline-font-size-3xs: var(--db-typography-expressive-desktop-headline-3xs-font-size);
    --db-type-headline-line-height-3xs: var(--db-typography-expressive-desktop-headline-3xs-line-height);
    --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-expressive-desktop-headline-3xs);
    --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-desktop-headline-3xs);
    --db-type-headline-font-size-2xs: var(--db-typography-expressive-desktop-headline-2xs-font-size);
    --db-type-headline-line-height-2xs: var(--db-typography-expressive-desktop-headline-2xs-line-height);
    --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-expressive-desktop-headline-2xs);
    --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-desktop-headline-2xs);
    --db-type-headline-font-size-xs: var(--db-typography-expressive-desktop-headline-xs-font-size);
    --db-type-headline-line-height-xs: var(--db-typography-expressive-desktop-headline-xs-line-height);
    --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-expressive-desktop-headline-xs);
    --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-expressive-desktop-headline-xs);
    --db-type-headline-font-size-sm: var(--db-typography-expressive-desktop-headline-sm-font-size);
    --db-type-headline-line-height-sm: var(--db-typography-expressive-desktop-headline-sm-line-height);
    --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-expressive-desktop-headline-sm);
    --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-expressive-desktop-headline-sm);
    --db-type-headline-font-size-md: var(--db-typography-expressive-desktop-headline-md-font-size);
    --db-type-headline-line-height-md: var(--db-typography-expressive-desktop-headline-md-line-height);
    --db-base-headline-icon-weight-md: var(--db-base-icon-weight-expressive-desktop-headline-md);
    --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-expressive-desktop-headline-md);
    --db-type-headline-font-size-lg: var(--db-typography-expressive-desktop-headline-lg-font-size);
    --db-type-headline-line-height-lg: var(--db-typography-expressive-desktop-headline-lg-line-height);
    --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-expressive-desktop-headline-lg);
    --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-expressive-desktop-headline-lg);
    --db-type-headline-font-size-xl: var(--db-typography-expressive-desktop-headline-xl-font-size);
    --db-type-headline-line-height-xl: var(--db-typography-expressive-desktop-headline-xl-line-height);
    --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-expressive-desktop-headline-xl);
    --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-expressive-desktop-headline-xl);
    --db-type-headline-font-size-2xl: var(--db-typography-expressive-desktop-headline-2xl-font-size);
    --db-type-headline-line-height-2xl: var(--db-typography-expressive-desktop-headline-2xl-line-height);
    --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-expressive-desktop-headline-2xl);
    --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-desktop-headline-2xl);
    --db-type-headline-font-size-3xl: var(--db-typography-expressive-desktop-headline-3xl-font-size);
    --db-type-headline-line-height-3xl: var(--db-typography-expressive-desktop-headline-3xl-line-height);
    --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-expressive-desktop-headline-3xl);
    --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-desktop-headline-3xl);
  }
}

.db-density-expressive,
[data-density=expressive] {
  --db-type-body-font-size-3xs: var(--db-typography-expressive-mobile-body-3xs-font-size);
  --db-type-body-line-height-3xs: var(--db-typography-expressive-mobile-body-3xs-line-height);
  --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-body-3xs);
  --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-body-3xs);
  --db-type-body-font-size-2xs: var(--db-typography-expressive-mobile-body-2xs-font-size);
  --db-type-body-line-height-2xs: var(--db-typography-expressive-mobile-body-2xs-line-height);
  --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-body-2xs);
  --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-body-2xs);
  --db-type-body-font-size-xs: var(--db-typography-expressive-mobile-body-xs-font-size);
  --db-type-body-line-height-xs: var(--db-typography-expressive-mobile-body-xs-line-height);
  --db-base-body-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-body-xs);
  --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-body-xs);
  --db-type-body-font-size-sm: var(--db-typography-expressive-mobile-body-sm-font-size);
  --db-type-body-line-height-sm: var(--db-typography-expressive-mobile-body-sm-line-height);
  --db-base-body-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-body-sm);
  --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-body-sm);
  --db-type-body-font-size-md: var(--db-typography-expressive-mobile-body-md-font-size);
  --db-type-body-line-height-md: var(--db-typography-expressive-mobile-body-md-line-height);
  --db-base-body-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-body-md);
  --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-body-md);
  --db-type-body-font-size-lg: var(--db-typography-expressive-mobile-body-lg-font-size);
  --db-type-body-line-height-lg: var(--db-typography-expressive-mobile-body-lg-line-height);
  --db-base-body-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-body-lg);
  --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-body-lg);
  --db-type-body-font-size-xl: var(--db-typography-expressive-mobile-body-xl-font-size);
  --db-type-body-line-height-xl: var(--db-typography-expressive-mobile-body-xl-line-height);
  --db-base-body-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-body-xl);
  --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-body-xl);
  --db-type-body-font-size-2xl: var(--db-typography-expressive-mobile-body-2xl-font-size);
  --db-type-body-line-height-2xl: var(--db-typography-expressive-mobile-body-2xl-line-height);
  --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-expressive-mobile-body-2xl);
  --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-mobile-body-2xl);
  --db-type-body-font-size-3xl: var(--db-typography-expressive-mobile-body-3xl-font-size);
  --db-type-body-line-height-3xl: var(--db-typography-expressive-mobile-body-3xl-line-height);
  --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-expressive-mobile-body-3xl);
  --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-body-3xl);
  /* stylelint-disable at-rule-empty-line-before */
  /* stylelint-enable at-rule-empty-line-before */
  /* stylelint-disable-next-line media-query-no-invalid */
  /* stylelint-disable-next-line at-rule-empty-line-before */
  /* stylelint-disable at-rule-empty-line-before */
  /* stylelint-enable at-rule-empty-line-before */
  /* stylelint-disable-next-line media-query-no-invalid */
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
@media screen and (min-width: 45em) {
  .db-density-expressive:not([data-force-mobile]),
  [data-density=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-density-expressive,
  [data-force-mobile=false][data-density=expressive] {
    --db-type-body-font-size-3xs: var(--db-typography-expressive-tablet-body-3xs-font-size);
    --db-type-body-line-height-3xs: var(--db-typography-expressive-tablet-body-3xs-line-height);
    --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-body-3xs);
    --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-body-3xs);
    --db-type-body-font-size-2xs: var(--db-typography-expressive-tablet-body-2xs-font-size);
    --db-type-body-line-height-2xs: var(--db-typography-expressive-tablet-body-2xs-line-height);
    --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-body-2xs);
    --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-body-2xs);
    --db-type-body-font-size-xs: var(--db-typography-expressive-tablet-body-xs-font-size);
    --db-type-body-line-height-xs: var(--db-typography-expressive-tablet-body-xs-line-height);
    --db-base-body-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-body-xs);
    --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-body-xs);
    --db-type-body-font-size-sm: var(--db-typography-expressive-tablet-body-sm-font-size);
    --db-type-body-line-height-sm: var(--db-typography-expressive-tablet-body-sm-line-height);
    --db-base-body-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-body-sm);
    --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-body-sm);
    --db-type-body-font-size-md: var(--db-typography-expressive-tablet-body-md-font-size);
    --db-type-body-line-height-md: var(--db-typography-expressive-tablet-body-md-line-height);
    --db-base-body-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-body-md);
    --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-body-md);
    --db-type-body-font-size-lg: var(--db-typography-expressive-tablet-body-lg-font-size);
    --db-type-body-line-height-lg: var(--db-typography-expressive-tablet-body-lg-line-height);
    --db-base-body-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-body-lg);
    --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-body-lg);
    --db-type-body-font-size-xl: var(--db-typography-expressive-tablet-body-xl-font-size);
    --db-type-body-line-height-xl: var(--db-typography-expressive-tablet-body-xl-line-height);
    --db-base-body-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-body-xl);
    --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-body-xl);
    --db-type-body-font-size-2xl: var(--db-typography-expressive-tablet-body-2xl-font-size);
    --db-type-body-line-height-2xl: var(--db-typography-expressive-tablet-body-2xl-line-height);
    --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-expressive-mobile-body-2xl);
    --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-mobile-body-2xl);
    --db-type-body-font-size-3xl: var(--db-typography-expressive-tablet-body-3xl-font-size);
    --db-type-body-line-height-3xl: var(--db-typography-expressive-tablet-body-3xl-line-height);
    --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-expressive-mobile-body-3xl);
    --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-body-3xl);
  }
}
@media screen and (min-width: 64em) {
  .db-density-expressive:not([data-force-mobile]),
  [data-density=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-density-expressive,
  [data-force-mobile=false][data-density=expressive] {
    --db-type-body-font-size-3xs: var(--db-typography-expressive-desktop-body-3xs-font-size);
    --db-type-body-line-height-3xs: var(--db-typography-expressive-desktop-body-3xs-line-height);
    --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-body-3xs);
    --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-body-3xs);
    --db-type-body-font-size-2xs: var(--db-typography-expressive-desktop-body-2xs-font-size);
    --db-type-body-line-height-2xs: var(--db-typography-expressive-desktop-body-2xs-line-height);
    --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-body-2xs);
    --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-body-2xs);
    --db-type-body-font-size-xs: var(--db-typography-expressive-desktop-body-xs-font-size);
    --db-type-body-line-height-xs: var(--db-typography-expressive-desktop-body-xs-line-height);
    --db-base-body-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-body-xs);
    --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-body-xs);
    --db-type-body-font-size-sm: var(--db-typography-expressive-desktop-body-sm-font-size);
    --db-type-body-line-height-sm: var(--db-typography-expressive-desktop-body-sm-line-height);
    --db-base-body-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-body-sm);
    --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-body-sm);
    --db-type-body-font-size-md: var(--db-typography-expressive-desktop-body-md-font-size);
    --db-type-body-line-height-md: var(--db-typography-expressive-desktop-body-md-line-height);
    --db-base-body-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-body-md);
    --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-body-md);
    --db-type-body-font-size-lg: var(--db-typography-expressive-desktop-body-lg-font-size);
    --db-type-body-line-height-lg: var(--db-typography-expressive-desktop-body-lg-line-height);
    --db-base-body-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-body-lg);
    --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-body-lg);
    --db-type-body-font-size-xl: var(--db-typography-expressive-desktop-body-xl-font-size);
    --db-type-body-line-height-xl: var(--db-typography-expressive-desktop-body-xl-line-height);
    --db-base-body-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-body-xl);
    --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-body-xl);
    --db-type-body-font-size-2xl: var(--db-typography-expressive-desktop-body-2xl-font-size);
    --db-type-body-line-height-2xl: var(--db-typography-expressive-desktop-body-2xl-line-height);
    --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-expressive-mobile-body-2xl);
    --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-mobile-body-2xl);
    --db-type-body-font-size-3xl: var(--db-typography-expressive-desktop-body-3xl-font-size);
    --db-type-body-line-height-3xl: var(--db-typography-expressive-desktop-body-3xl-line-height);
    --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-expressive-mobile-body-3xl);
    --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-body-3xl);
  }
}
