/**
 * Do not edit directly, this file was auto-generated.
 */
:root,
.tds-mode-light,
.scania .tds-mode-light,
.scania.tds-mode-light,
.scania .tl-mode-light,
.scania.tl-mode-light {
  --component-block-background-primary: var(--color-background-layer-01);
  --component-block-background-secondary: var(--color-background-layer-02);
  --component-block-background-nested-even: var(--component-block-background-primary);
  --component-block-background-nested-odd: var(--component-block-background-secondary);
  --component-block-border-radius-default: var(--scania-unit-4);
  --component-block-border-radius-none: var(--scania-unit-0);
}

.traton .tds-mode-light,
.traton.tds-mode-light,
.traton .tl-mode-light,
.traton.tl-mode-light {
  --component-block-background-primary: var(--color-background-layer-01);
  --component-block-background-secondary: var(--color-background-layer-02);
  --component-block-background-nested-even: var(--component-block-background-primary);
  --component-block-background-nested-odd: var(--component-block-background-secondary);
  --component-block-border-radius-default: var(--traton-unit-4);
  --component-block-border-radius-none: var(--traton-unit-0);
}

.tds-mode-dark,
.scania .tds-mode-dark,
.scania.tds-mode-dark,
.scania .tl-mode-dark,
.scania.tl-mode-dark {
  --component-block-background-primary: var(--color-background-layer-01);
  --component-block-background-secondary: var(--color-background-layer-02);
  --component-block-background-nested-even: var(--component-block-background-primary);
  --component-block-background-nested-odd: var(--component-block-background-secondary);
  --component-block-border-radius-default: var(--scania-unit-4);
  --component-block-border-radius-none: var(--scania-unit-0);
}

.traton .tds-mode-dark,
.traton.tds-mode-dark,
.traton .tl-mode-dark,
.traton.tl-mode-dark {
  --component-block-background-primary: var(--color-background-layer-01);
  --component-block-background-secondary: var(--color-background-layer-02);
  --component-block-background-nested-even: var(--component-block-background-primary);
  --component-block-background-nested-odd: var(--component-block-background-secondary);
  --component-block-border-radius-default: var(--traton-unit-4);
  --component-block-border-radius-none: var(--traton-unit-0);
}

/* Component variables */
.tl-block {
  --block-background: var(--component-block-background-primary);
  --block-text-color: var(--color-text-strong);
  --block-background-mode-primary: var(--component-block-background-primary);
  --block-background-mode-secondary: var(--component-block-background-secondary);
  --block-background-even: var(--component-block-background-nested-even);
  --block-background-odd: var(--component-block-background-nested-odd);
  --block-padding: 16px;
  --block-border-radius: calc(var(--component-block-border-radius-default) * 1px);
}

/* Typography Usage mixins */
.tl-block {
  box-sizing: border-box;
}
.tl-block * {
  box-sizing: border-box;
}
.tl-block {
  font-family: var(--detail-01-font-family);
  font-size: var(--detail-01-font-size);
  line-height: var(--detail-01-line-height);
  font-weight: var(--detail-01-font-weight);
  letter-spacing: var(--detail-01-letter-spacing);
  text-transform: var(--detail-01-text-transform);
  background-color: var(--block-background);
  color: var(--block-text-color);
  border-radius: var(--block-border-radius);
  padding: var(--block-padding);
}
.tl-block h2 {
  font-family: var(--headline-02-font-family);
  font-size: var(--headline-02-font-size);
  line-height: var(--headline-02-line-height);
  font-weight: var(--headline-02-font-weight);
  letter-spacing: var(--headline-02-letter-spacing);
  text-transform: var(--headline-02-text-transform);
}
.tl-block p {
  font-family: var(--body-01-font-family);
  font-size: var(--body-01-font-size);
  line-height: var(--body-01-line-height);
  font-weight: var(--body-01-font-weight);
  letter-spacing: var(--body-01-letter-spacing);
  text-transform: var(--body-01-text-transform);
}
.tl-block--primary {
  background-color: var(--block-background-mode-primary);
}
.tl-block--secondary {
  background-color: var(--block-background-mode-secondary);
}

.tl-block--primary .tl-block {
  background-color: var(--block-background-odd);
}

.tl-block--primary .tl-block .tl-block {
  background-color: var(--block-background-even);
}

.tl-block--primary .tl-block .tl-block .tl-block {
  background-color: var(--block-background-odd);
}

.tl-block--primary .tl-block .tl-block .tl-block .tl-block {
  background-color: var(--block-background-even);
}

.tl-block--secondary .tl-block {
  background-color: var(--block-background-even);
}

.tl-block--secondary .tl-block .tl-block {
  background-color: var(--block-background-odd);
}

.tl-block--secondary .tl-block .tl-block .tl-block {
  background-color: var(--block-background-even);
}

.tl-block--secondary .tl-block .tl-block .tl-block .tl-block {
  background-color: var(--block-background-odd);
}

.tl-block--primary .tl-block h3,
.tl-block--secondary .tl-block h3 {
  font-family: var(--headline-04-font-family);
  font-size: var(--headline-04-font-size);
  line-height: var(--headline-04-line-height);
  font-weight: var(--headline-04-font-weight);
  letter-spacing: var(--headline-04-letter-spacing);
  text-transform: var(--headline-04-text-transform);
}
.tl-block--primary .tl-block p,
.tl-block--secondary .tl-block p {
  font-family: var(--detail-03-font-family);
  font-size: var(--detail-03-font-size);
  line-height: var(--detail-03-line-height);
  font-weight: var(--detail-03-font-weight);
  letter-spacing: var(--detail-03-letter-spacing);
  text-transform: var(--detail-03-text-transform);
}

.tl-block--primary .tl-block .tl-block h4,
.tl-block--secondary .tl-block .tl-block h4 {
  font-family: var(--headline-06-font-family);
  font-size: var(--headline-06-font-size);
  line-height: var(--headline-06-line-height);
  font-weight: var(--headline-06-font-weight);
  letter-spacing: var(--headline-06-letter-spacing);
  text-transform: var(--headline-06-text-transform);
}
.tl-block--primary .tl-block .tl-block p,
.tl-block--secondary .tl-block .tl-block p {
  font-family: var(--detail-03-font-family);
  font-size: var(--detail-03-font-size);
  line-height: var(--detail-03-line-height);
  font-weight: var(--detail-03-font-weight);
  letter-spacing: var(--detail-03-letter-spacing);
  text-transform: var(--detail-03-text-transform);
}