/**
	Generates 3 types of placeholders, e.g:
	- %db-component-variables-md
	- %db-font-size-md
	- %db-overwrite-font-size-md
 */
.db-font-size-3xl,
[data-font-size="3xl"] {
  /* Those variables are only for components to calculate heights and change icons */
  --db-icon-font-weight: var(--db-base-body-icon-weight-3xl);
  --db-icon-font-size: var(--db-base-body-icon-font-size-3xl);
  --db-base-line-height: var(--db-type-body-line-height-3xl);
  --db-base-font-size: var(--db-type-body-font-size-3xl);
  line-height: var(--db-type-body-line-height-3xl);
  font-size: var(--db-type-body-font-size-3xl);
}

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

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

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

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

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

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

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

.db-font-size-md,
[data-font-size=md] {
  /* 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);
}

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

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

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

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

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

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

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

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

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