@charset "UTF-8";
/**
 * 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-breadcrumbs-text-link-default: var(--color-text-strong);
  --component-breadcrumbs-text-link-hover: var(--color-text-strong);
  --component-breadcrumbs-text-current-default: var(--color-text-soft);
  --component-breadcrumbs-text-separator-default: var(--color-text-strong);
}

.traton .tds-mode-light,
.traton.tds-mode-light,
.traton .tl-mode-light,
.traton.tl-mode-light {
  --component-breadcrumbs-text-link-default: var(--color-text-strong);
  --component-breadcrumbs-text-link-hover: var(--color-text-strong);
  --component-breadcrumbs-text-current-default: var(--color-text-soft);
  --component-breadcrumbs-text-separator-default: var(--color-text-strong);
}

.tds-mode-dark,
.scania .tds-mode-dark,
.scania.tds-mode-dark,
.scania .tl-mode-dark,
.scania.tl-mode-dark {
  --component-breadcrumbs-text-link-default: var(--color-text-strong);
  --component-breadcrumbs-text-link-hover: var(--color-text-strong);
  --component-breadcrumbs-text-current-default: var(--color-text-soft);
  --component-breadcrumbs-text-separator-default: var(--color-text-strong);
}

.traton .tds-mode-dark,
.traton.tds-mode-dark,
.traton .tl-mode-dark,
.traton.tl-mode-dark {
  --component-breadcrumbs-text-link-default: var(--color-text-strong);
  --component-breadcrumbs-text-link-hover: var(--color-text-strong);
  --component-breadcrumbs-text-current-default: var(--color-text-soft);
  --component-breadcrumbs-text-separator-default: var(--color-text-strong);
}

.tl-breadcrumbs {
  --breadcrumb-label: var(--component-breadcrumbs-text-link-default);
  --breadcrumb-hover: var(--component-breadcrumbs-text-link-hover);
  --breadcrumb-current: var(--component-breadcrumbs-text-current-default);
  --breadcrumb-separator-color: var(--component-breadcrumbs-text-separator-default);
  --breadcrumb-separator-margin: 4px;
  --breadcrumb-separator-width: 4px;
  --breadcrumb-separator-height: 8px;
  --breadcrumb-focus-outline-color: var(--color-system-info-default);
  --breadcrumb-focus-outline-width: 2px;
}

/* Typography Usage mixins */
.tl-breadcrumbs {
  box-sizing: border-box;
}
.tl-breadcrumbs * {
  box-sizing: border-box;
}
.tl-breadcrumbs ol {
  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);
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
}
.tl-breadcrumbs li {
  display: inline-block;
}
.tl-breadcrumbs li::after {
  content: "›";
  color: var(--breadcrumb-separator-color);
  margin-right: var(--breadcrumb-separator-margin);
  margin-left: var(--breadcrumb-separator-margin);
  display: inline-block;
  width: var(--breadcrumb-separator-width);
  height: var(--breadcrumb-separator-height);
}
.tl-breadcrumbs li:has([aria-current])::after {
  display: none;
}
.tl-breadcrumbs a {
  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);
  color: var(--breadcrumb-label);
  text-decoration: none;
  transition: color 0.2s ease;
}
.tl-breadcrumbs a:hover {
  color: var(--breadcrumb-hover);
  text-decoration: underline;
}
.tl-breadcrumbs a: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-breadcrumbs a[aria-current=page] {
  pointer-events: none;
  cursor: default;
  color: var(--breadcrumb-current);
}
.tl-breadcrumbs a[aria-current=page]:hover {
  text-decoration: none;
  cursor: not-allowed;
}