/* Typography Usage mixins */
/**
 * 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-footer-border-divider-default: var(--scania-color-blue-700);
  --component-footer-background-main-default: var(--scania-color-blue-800);
  --component-footer-background-top-default: var(--color-background-layer-01);
  --component-footer-background-top-secondary: var(--color-background-base);
  --component-footer-background-list-item-default: var(--component-footer-background-top-default);
  --component-footer-background-list-item-active: var(--scania-color-grey-150);
  --component-footer-text-copyright-default: var(--color-text-inverse-soft);
  --component-footer-text-link-default: var(--color-text-strong);
  --component-footer-text-title-default: var(--color-text-strong);
  --component-footer-text-inverse-link-default: var(--scania-color-base-white);
  --component-footer-icon-link-default: var(--color-icon-strong);
  --component-footer-icon-social-default: var(--color-icon-inverse-strong);
}

.traton .tds-mode-light,
.traton.tds-mode-light,
.traton .tl-mode-light,
.traton.tl-mode-light {
  --component-footer-border-divider-default: var(--traton-color-transparent-invisible-light);
  --component-footer-background-main-default: var(--traton-color-grey-50);
  --component-footer-background-top-default: var(--color-background-layer-01);
  --component-footer-background-top-secondary: var(--color-background-layer-01);
  --component-footer-background-list-item-default: var(--component-footer-background-top-default);
  --component-footer-background-list-item-active: var(--traton-color-grey-300);
  --component-footer-text-copyright-default: var(--color-text-soft);
  --component-footer-text-link-default: var(--color-text-strong);
  --component-footer-text-title-default: var(--color-text-strong);
  --component-footer-text-inverse-link-default: var(--component-footer-text-link-default);
  --component-footer-icon-link-default: var(--color-icon-strong);
  --component-footer-icon-social-default: var(--color-icon-strong);
}

.tds-mode-dark,
.scania .tds-mode-dark,
.scania.tds-mode-dark,
.scania .tl-mode-dark,
.scania.tl-mode-dark {
  --component-footer-border-divider-default: var(--scania-color-blue-800);
  --component-footer-background-main-default: var(--scania-color-blue-900);
  --component-footer-background-top-default: var(--color-background-layer-01);
  --component-footer-background-top-secondary: var(--color-background-layer-02);
  --component-footer-background-list-item-default: var(--component-footer-background-top-default);
  --component-footer-background-list-item-active: var(--scania-color-grey-800);
  --component-footer-text-copyright-default: var(--color-text-soft);
  --component-footer-text-link-default: var(--color-text-strong);
  --component-footer-text-title-default: var(--color-text-strong);
  --component-footer-text-inverse-link-default: var(--scania-color-base-white);
  --component-footer-icon-link-default: var(--color-icon-strong);
  --component-footer-icon-social-default: var(--color-icon-strong);
}

.traton .tds-mode-dark,
.traton.tds-mode-dark,
.traton .tl-mode-dark,
.traton.tl-mode-dark {
  --component-footer-border-divider-default: var(--traton-color-transparent-invisible-light);
  --component-footer-background-main-default: var(--traton-color-blue-1000);
  --component-footer-background-top-default: var(--color-background-layer-01);
  --component-footer-background-top-secondary: var(--color-background-layer-01);
  --component-footer-background-list-item-default: var(--component-footer-background-top-default);
  --component-footer-background-list-item-active: var(--traton-color-blue-800);
  --component-footer-text-copyright-default: var(--color-text-soft);
  --component-footer-text-link-default: var(--color-text-strong);
  --component-footer-text-title-default: var(--color-text-strong);
  --component-footer-text-inverse-link-default: var(--component-footer-text-link-default);
  --component-footer-icon-link-default: var(--color-icon-strong);
  --component-footer-icon-social-default: var(--color-icon-strong);
}

.tl-footer {
  --footer-top-background-primary: var(--component-footer-background-top-default);
  --footer-top-background-secondary: var(--component-footer-background-top-secondary);
  --footer-top-background: var(--component-footer-background-top-default);
  --footer-top-divider: var(--color-border-discrete);
  --footer-top-links-desktop: var(--component-footer-text-title-default);
  --footer-top-links: var(--component-footer-text-link-default);
  --footer-top-links-background-hover: var(--component-footer-background-list-item-active);
  --footer-top-button-active: var(--component-footer-background-list-item-active);
  --footer-main-background: var(--component-footer-background-main-default);
  --footer-main-links: var(--component-footer-text-inverse-link-default);
  --footer-main-divider: var(--component-footer-border-divider-default);
  --footer-main-copyright: var(--component-footer-text-copyright-default);
}
.tl-footer.tl-footer--primary {
  --footer-top-background: var(--footer-top-background-primary);
}
.tl-footer.tl-footer--secondary {
  --footer-top-background: var(--footer-top-background-secondary);
}

.scania .tl-footer {
  --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
  --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
}

.traton .tl-mode-dark .tl-footer {
  --component-footer-logotype-local: var(--traton-logotype-white-svg-local);
  --component-footer-logotype-cdn: var(--traton-logotype-white-svg);
}

.traton .tl-mode-light .tl-footer {
  --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
  --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
}

.traton .tl-footer {
  --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
  --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
}

.tl-footer__group {
  display: block;
}
.tl-footer__group.tl-footer__main-top--start {
  display: flex;
}

.tl-footer__top-title {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  text-align: left;
  width: auto;
  font-family: var(--headline-07-font-family);
  font-size: var(--headline-07-font-size);
  line-height: var(--headline-07-line-height);
  font-weight: var(--headline-07-font-weight);
  letter-spacing: var(--headline-07-letter-spacing);
  text-transform: var(--headline-07-text-transform);
  color: var(--footer-top-links-desktop);
  cursor: default;
}
.tl-footer__top-title:focus {
  outline: none;
}

.tl-footer__link {
  font-family: var(--headline-07-font-family);
  font-size: var(--headline-07-font-size);
  line-height: var(--headline-07-line-height);
  font-weight: var(--headline-07-font-weight);
  letter-spacing: var(--headline-07-letter-spacing);
  text-transform: var(--headline-07-text-transform);
  color: var(--footer-top-links);
  text-decoration: none;
}
.tl-footer__link:hover {
  text-decoration: underline;
}
.tl-footer__link: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;
}

@media (max-width: 992px) {
  .tl-footer__group .tl-footer__link {
    display: none;
  }
  .tl-footer__group--expanded .tl-footer__link {
    display: block;
    border-bottom: 1px solid var(--footer-top-divider);
    padding: 19.5px 40px;
    font-weight: normal;
  }
  .tl-footer__group--expanded .tl-footer__link:hover {
    background-color: var(--footer-top-links-background-hover);
  }
  .tl-footer__top-title {
    font-family: var(--headline-07-font-family);
    font-size: var(--headline-07-font-size);
    line-height: var(--headline-07-line-height);
    font-weight: var(--headline-07-font-weight);
    letter-spacing: var(--headline-07-letter-spacing);
    text-transform: var(--headline-07-text-transform);
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    color: var(--footer-top-links);
    padding: 19.5px 52px 19.5px 24px;
    position: relative;
    border-bottom: 1px solid var(--footer-top-divider);
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    text-align: left;
  }
  .tl-footer__top-title::after {
    content: "";
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: var(--footer-top-links);
    mask-image: var(--icon-chevron_down-svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    transition: transform 0.3s ease;
  }
  .tl-footer__top-title:active {
    background-color: var(--footer-top-button-active);
  }
  .tl-footer__top-title:focus-visible {
    outline: 2px solid var(--component--focus-ring-color-strong);
    box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
    outline-offset: -2px;
    z-index: 1;
  }
  .tl-footer__group--expanded .tl-footer__top-title::after {
    transform: translateY(-50%) rotate(180deg);
  }
}
.tl-footer__main .tl-footer__link {
  font-family: var(--headline-07-font-family);
  font-size: var(--headline-07-font-size);
  line-height: var(--headline-07-line-height);
  font-weight: var(--headline-07-font-weight);
  letter-spacing: var(--headline-07-letter-spacing);
  text-transform: var(--headline-07-text-transform);
  display: inline-block;
  color: var(--footer-main-links);
  text-decoration: none;
}
.tl-footer__main .tl-footer__link: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-footer__main .tl-footer__link:hover {
  text-decoration: underline;
}

.tl-footer {
  display: block;
}

.tl-footer__top {
  box-sizing: border-box;
  background-color: var(--footer-top-background);
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 40px 24px;
}

.tl-footer__main {
  background-color: var(--footer-main-background);
  padding: 0 40px;
}

.tl-footer__main-top {
  padding: 40px 0;
  display: flex;
  justify-content: space-between;
}
.tl-footer__main-top--end {
  margin-left: auto;
}

.tl-footer__main-bottom {
  padding: 40px 0;
  display: flex;
  border-top: 1px solid var(--footer-main-divider);
}
.tl-footer__main-bottom .tl-footer__copyright {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  margin: 0;
  color: var(--footer-main-copyright);
  max-width: calc(100% - 117px - 16px);
}
.tl-footer__main-bottom .tl-footer__brand {
  background-image: var(--component-footer-logotype-cdn), var(--component-footer-logotype-local);
  background-repeat: no-repeat;
  background-size: 117px;
  background-position: right;
  width: 117px;
  height: 20px;
  padding: 0;
  margin: 0;
  margin-left: auto;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
}

.tl-footer__top .tl-footer__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.tl-footer__top .tl-footer__group:first-child:nth-last-child(1) {
  flex: 0 0 100%;
}
.tl-footer__top .tl-footer__group:first-child:nth-last-child(2), .tl-footer__top .tl-footer__group:nth-child(2):nth-last-child(1) {
  flex: 0 0 calc(50% - 12px);
}
.tl-footer__top .tl-footer__group:first-child:nth-last-child(3), .tl-footer__top .tl-footer__group:nth-child(2):nth-last-child(2), .tl-footer__top .tl-footer__group:nth-child(3):nth-last-child(1) {
  flex: 0 0 calc(33.333% - 16px);
}
.tl-footer__top .tl-footer__group:first-child:nth-last-child(n+4), .tl-footer__top .tl-footer__group:first-child:nth-last-child(n+4) ~ .tl-footer__group {
  flex: 0 0 calc(25% - 18px);
}
.tl-footer__main-top--start .tl-footer__group, .tl-footer__main-top--end .tl-footer__group {
  display: flex;
  column-gap: 24px;
}

@media (max-width: 992px) {
  .tl-footer__top {
    display: block;
    width: 100%;
    padding: 0;
    overflow-x: hidden;
  }
  .tl-footer__top .tl-footer__group {
    gap: 0;
  }
  .tl-footer__main-top--start .tl-footer__group {
    flex-direction: column;
    gap: 8px;
  }
  .tl-footer__main {
    padding: 0 24px;
  }
  .tl-footer__main-top {
    flex-direction: column;
    row-gap: 48px;
    padding: 24px 0;
  }
  .tl-footer__main-top--end {
    flex-direction: row;
    gap: 8px;
    margin-left: unset;
  }
  .tl-footer__main-bottom {
    align-items: flex-start;
    padding: 24px 0 40px;
  }
  .tl-footer__main-bottom .tl-footer__brand {
    background-position: right;
  }
}