/* 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-link-icon-accent-default: var(--scania-color-blue-400);
  --component-link-icon-accent-hover: var(--scania-color-blue-400);
  --component-link-icon-accent-active: var(--scania-color-blue-600);
  --component-link-icon-accent-visited: var(--scania-color-blue-600);
  --component-link-icon-standard-default: var(--color-text-strong);
  --component-link-icon-standard-hover: var(--color-text-defined);
  --component-link-icon-standard-active: var(--color-text-soft);
  --component-link-icon-standard-visited: var(--color-text-strong);
  --component-link-opacity-disabled: var(--scania-opacity-25);
  --component-link-text-accent-default: var(--scania-color-blue-400);
  --component-link-text-accent-hover: var(--scania-color-blue-400);
  --component-link-text-accent-active: var(--scania-color-blue-600);
  --component-link-text-accent-visited: var(--scania-color-blue-600);
  --component-link-text-standard-default: var(--color-text-strong);
  --component-link-text-standard-hover: var(--color-text-defined);
  --component-link-text-standard-active: var(--color-text-soft);
  --component-link-text-standard-visited: var(--color-text-strong);
}

.traton .tds-mode-light,
.traton.tds-mode-light,
.traton .tl-mode-light,
.traton.tl-mode-light {
  --component-link-icon-accent-default: var(--traton-color-blue-700);
  --component-link-icon-accent-hover: var(--traton-color-blue-700);
  --component-link-icon-accent-active: var(--traton-color-blue-950);
  --component-link-icon-accent-visited: var(--traton-color-blue-950);
  --component-link-icon-standard-default: var(--color-text-strong);
  --component-link-icon-standard-hover: var(--color-text-defined);
  --component-link-icon-standard-active: var(--color-text-soft);
  --component-link-icon-standard-visited: var(--color-text-strong);
  --component-link-opacity-disabled: var(--traton-opacity-25);
  --component-link-text-accent-default: var(--traton-color-blue-700);
  --component-link-text-accent-hover: var(--traton-color-blue-700);
  --component-link-text-accent-active: var(--traton-color-blue-950);
  --component-link-text-accent-visited: var(--traton-color-blue-950);
  --component-link-text-standard-default: var(--color-text-strong);
  --component-link-text-standard-hover: var(--color-text-defined);
  --component-link-text-standard-active: var(--color-text-soft);
  --component-link-text-standard-visited: var(--color-text-strong);
}

.tds-mode-dark,
.scania .tds-mode-dark,
.scania.tds-mode-dark,
.scania .tl-mode-dark,
.scania.tl-mode-dark {
  --component-link-icon-accent-default: var(--scania-color-blue-300);
  --component-link-icon-accent-hover: var(--scania-color-blue-300);
  --component-link-icon-accent-active: var(--scania-color-blue-100);
  --component-link-icon-accent-visited: var(--scania-color-blue-100);
  --component-link-icon-standard-default: var(--color-text-strong);
  --component-link-icon-standard-hover: var(--color-text-defined);
  --component-link-icon-standard-active: var(--color-text-soft);
  --component-link-icon-standard-visited: var(--color-text-strong);
  --component-link-opacity-disabled: var(--scania-opacity-25);
  --component-link-text-accent-default: var(--scania-color-blue-300);
  --component-link-text-accent-hover: var(--scania-color-blue-300);
  --component-link-text-accent-active: var(--scania-color-blue-100);
  --component-link-text-accent-visited: var(--scania-color-blue-100);
  --component-link-text-standard-default: var(--color-text-strong);
  --component-link-text-standard-hover: var(--color-text-defined);
  --component-link-text-standard-active: var(--color-text-soft);
  --component-link-text-standard-visited: var(--color-text-strong);
}

.traton .tds-mode-dark,
.traton.tds-mode-dark,
.traton .tl-mode-dark,
.traton.tl-mode-dark {
  --component-link-icon-accent-default: var(--traton-color-blue-400);
  --component-link-icon-accent-hover: var(--traton-color-blue-400);
  --component-link-icon-accent-active: var(--traton-color-blue-150);
  --component-link-icon-accent-visited: var(--traton-color-blue-150);
  --component-link-icon-standard-default: var(--color-text-strong);
  --component-link-icon-standard-hover: var(--color-text-defined);
  --component-link-icon-standard-active: var(--color-text-soft);
  --component-link-icon-standard-visited: var(--color-text-strong);
  --component-link-opacity-disabled: var(--traton-opacity-25);
  --component-link-text-accent-default: var(--traton-color-blue-400);
  --component-link-text-accent-hover: var(--traton-color-blue-400);
  --component-link-text-accent-active: var(--traton-color-blue-150);
  --component-link-text-accent-visited: var(--traton-color-blue-150);
  --component-link-text-standard-default: var(--color-text-strong);
  --component-link-text-standard-hover: var(--color-text-defined);
  --component-link-text-standard-active: var(--color-text-soft);
  --component-link-text-standard-visited: var(--color-text-strong);
}

/* Component variables */
.tl-link {
  --link: var(--component-link-text-accent-default);
  --link-hover: var(--component-link-text-accent-hover);
  --link-focus-outline-width: 2px;
  --link-visited: var(--component-link-text-accent-visited);
  --link-opacity-disabled: calc(var(--component-link-opacity-disabled) / 100);
  --link-focus-outline-color: var(--color-system-info-default);
}

.tl-banner .tl-link {
  --link: var(--color-text-strong);
  --link-hover: var(--color-text-strong);
  --link-visited: var(--color-text-strong);
}

.tl-toast .tl-link {
  --link: var(--color-text-inverse-strong);
  --link-hover: var(--color-text-inverse-strong);
  --link-visited: var(--color-text-inverse-strong);
}

.traton .tl-link {
  --link-focus-outline-width: 2px;
}

.tl-link-text {
  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);
}

.tl-link {
  display: inline-flex;
  color: var(--link);
  text-decoration: none;
  cursor: pointer;
  outline: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
}
.tl-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;
  text-decoration: none;
}
.tl-link:active {
  text-decoration-color: var(--link);
}
.tl-link:hover {
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
}
.tl-link:visited {
  color: var(--link-visited);
  text-decoration-color: var(--link-visited);
}
.tl-link--disabled {
  opacity: var(--link-opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
}
.tl-link--underline {
  text-decoration: underline;
}
.tl-link--underline:hover {
  text-decoration: underline;
}
.tl-link--standalone {
  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);
}

.tl-link__icon {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  color: inherit;
}
.tl-link:hover .tl-link__icon .tl-icon {
  color: var(--link-hover);
}
.tl-link:visited .tl-link__icon .tl-icon {
  color: var(--link-visited);
}
.tl-link:active .tl-link__icon .tl-icon {
  color: var(--link);
}