/**
 * 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-card-background-primary-default: var(--scania-color-base-white);
  --component-card-background-secondary-default: var(--scania-color-base-white);
  --component-card-border-radius-default: var(--scania-unit-4);
  --component-card-space-padding-default: var(--scania-unit-16);
  --component-card-text-title-default: var(--color-text-strong);
  --component-card-text-subtitle-default: var(--color-text-soft);
  --component-card-text-body-default: var(--color-text-defined);
}

.traton .tds-mode-light,
.traton.tds-mode-light,
.traton .tl-mode-light,
.traton.tl-mode-light {
  --component-card-background-primary-default: var(--traton-color-transparent-invisible-light);
  --component-card-background-secondary-default: var(--traton-color-transparent-invisible-light);
  --component-card-border-radius-default: var(--traton-unit-0);
  --component-card-space-padding-default: var(--traton-unit-0);
  --component-card-text-title-default: var(--color-text-strong);
  --component-card-text-subtitle-default: var(--color-text-soft);
  --component-card-text-body-default: var(--color-text-defined);
}

.tds-mode-dark,
.scania .tds-mode-dark,
.scania.tds-mode-dark,
.scania .tl-mode-dark,
.scania.tl-mode-dark {
  --component-card-background-primary-default: var(--color-background-layer-01);
  --component-card-background-secondary-default: var(--color-background-layer-02);
  --component-card-border-radius-default: var(--scania-unit-4);
  --component-card-space-padding-default: var(--scania-unit-16);
  --component-card-text-title-default: var(--color-text-strong);
  --component-card-text-subtitle-default: var(--color-text-soft);
  --component-card-text-body-default: var(--color-text-defined);
}

.traton .tds-mode-dark,
.traton.tds-mode-dark,
.traton .tl-mode-dark,
.traton.tl-mode-dark {
  --component-card-background-primary-default: var(--traton-color-transparent-invisible-dark);
  --component-card-background-secondary-default: var(--traton-color-transparent-invisible-dark);
  --component-card-border-radius-default: var(--traton-unit-0);
  --component-card-space-padding-default: var(--traton-unit-0);
  --component-card-text-title-default: var(--color-text-strong);
  --component-card-text-subtitle-default: var(--color-text-soft);
  --component-card-text-body-default: var(--color-text-defined);
}

.tl-card {
  --card-background: var(--component-card-background-primary-default);
  --card-border-radius: calc(var(--component-card-border-radius-default) * 1px);
  --card-box-primary: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
  --card-box-secondary: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 10%);
  --card-box: var(--card-box-primary);
  --card-box-hover: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 20%);
  --card-box-pressed: 0 -1px 1px rgb(0 0 0 / 5%), 0 1px 3px rgb(0 0 0 / 20%);
  --card-headline: var(--component-card-text-title-default);
  --card-sub-headline: var(--component-card-text-subtitle-default);
  --card-body-color: var(--component-card-text-body-default);
  --card-divider: var(--color-border-soft);
  --card-icon-color: var(--component-card-text-title-default);
  --card-body-padding: 0 16px;
  --card-header-padding: 16px;
  --card-slotted-padding: 16px;
  --card-divider-margin: 16px 16px 0;
}
.tl-card--primary {
  --card-box: var(--card-box-primary);
  --card-background: var(--component-card-background-primary-default);
}
.tl-card--secondary {
  --card-box: var(--card-box-secondary);
  --card-background: var(--component-card-background-secondary-default);
}

.tds-mode-dark .tl-card,
.tl-mode-dark .tl-card {
  --card-box-primary: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 10%);
  --card-box-secondary: 0 3px 3px rgb(0 0 0 / 10%), 0 -1px 1px rgb(0 0 0 / 5%);
}

.traton .tl-card {
  --card-box: none;
  --card-box-hover: none;
  --card-box-pressed: none;
  --card-body-padding: 0;
  --card-header-padding: 16px 16px 16px 0;
  --card-slotted-padding: 16px 16px 16px 0;
  --card-divider-margin: 16px 0 0;
}
.traton .tl-card--primary {
  --card-box: none;
  --card-background: var(--component-card-background-primary-default);
}
.traton .tl-card--secondary {
  --card-box: none;
  --card-background: var(--component-card-background-secondary-default);
}

/* Typography Usage mixins */
.tl-card {
  box-sizing: border-box;
}
.tl-card * {
  box-sizing: border-box;
}
.tl-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  box-shadow: var(--card-box);
  background-color: var(--card-background);
  border-radius: var(--card-border-radius);
  overflow: hidden;
}
.tl-card--clickable {
  width: 100%;
  border: none;
  text-align: left;
  padding: 0;
}
.tl-card--clickable:focus-visible {
  outline: 2px solid var(--component--focus-ring-color-strong);
  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
  outline-offset: 1px;
  z-index: 1;
}
.tl-card--clickable:active {
  box-shadow: var(--card-box-pressed);
}
.tl-card--clickable:hover {
  box-shadow: var(--card-box-hover);
  cursor: pointer;
}
.tl-card--stretch {
  height: 100%;
  width: 100%;
}

.tl-card__header {
  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);
  padding: var(--card-header-padding);
  display: flex;
  align-items: center;
}
.tl-card__header--below {
  padding-top: 16px;
}

.tl-card__thumbnail {
  inline-size: 36px;
  block-size: 36px;
  border-radius: 100%;
  margin-right: 16px;
  background-color: var(--color-background-layer-03);
}

.tl-card__headings {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  gap: 4px;
}

.tl-card__title {
  color: var(--card-headline);
}

.tl-card__subtitle {
  color: var(--card-sub-headline);
}

.tl-card__image {
  inline-size: 100%;
  block-size: auto;
  display: block;
}

.tl-card__divider {
  display: block;
  margin: var(--card-divider-margin);
  background-color: var(--card-divider);
  block-size: 1px;
}

.tl-card__body {
  display: block;
  overflow-wrap: break-word;
}
.tl-card--stretch .tl-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.tl-card__content {
  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);
  color: var(--card-body-color);
  padding: var(--card-body-padding);
  margin-bottom: 16px;
  margin-top: 16px;
  max-inline-size: 336px;
}
.tl-card--stretch .tl-card__body .tl-card__content {
  max-inline-size: unset;
  flex-grow: 1;
}
.tl-card--expandable .tl-card__body .tl-card__content {
  display: none;
}
.tl-card--expanded .tl-card__body .tl-card__content {
  display: block;
}

.tl-card__bottom-row {
  display: flex;
  padding: var(--card-slotted-padding);
  align-items: flex-end;
  align-self: stretch;
}

.tl-card__actions {
  display: flex;
  align-items: flex-end;
  flex: 1 0 0;
  align-self: stretch;
}

.tl-card--expandable .tl-card__body .tl-card__header .tl-icon {
  transition: transform 160ms ease-in-out, opacity 120ms ease-in-out;
}
.tl-card--expanded .tl-card__body .tl-card__header .tl-icon {
  transform: rotate(180deg);
}
.tl-card__bottom-row .tl-icon {
  color: var(--card-icon-color);
}