/**
 * 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-popover-background-primary: var(--color-background-layer-01);
  --component-popover-background-secondary: var(--color-background-layer-02);
  --component-popover-background-link-primary-default: var(--color-background-none);
  --component-popover-background-link-primary-hover: var(--scania-color-grey-100);
  --component-popover-background-link-primary-active: var(
    --component-popover-background-link-primary-hover
  );
  --component-popover-background-link-secondary-default: var(--color-background-none);
  --component-popover-background-link-secondary-hover: var(--scania-color-grey-50);
  --component-popover-background-link-secondary-active: var(
    --component-popover-background-link-secondary-hover
  );
  --component-popover-border-radius-default: var(--scania-unit-4);
  --component-popover-icon-link-primary-default: var(--color-icon-strong);
  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
  --component-popover-opacity-disabled: var(--scania-opacity-25);
  --component-popover-text-link-primary-default: var(--color-text-strong);
  --component-popover-text-link-primary-hover: var(--color-text-strong);
  --component-popover-text-link-secondary-default: var(--color-text-strong);
  --component-popover-text-link-secondary-hover: var(--color-text-strong);
}

.traton .tds-mode-light,
.traton.tds-mode-light,
.traton .tl-mode-light,
.traton.tl-mode-light {
  --component-popover-background-primary: var(--color-background-layer-01);
  --component-popover-background-secondary: var(--color-background-layer-02);
  --component-popover-background-link-primary-default: var(--color-background-none);
  --component-popover-background-link-primary-hover: var(--traton-color-grey-150);
  --component-popover-background-link-primary-active: var(--traton-color-grey-150);
  --component-popover-background-link-secondary-default: var(--color-background-none);
  --component-popover-background-link-secondary-hover: var(--traton-color-grey-150);
  --component-popover-background-link-secondary-active: var(--traton-color-grey-150);
  --component-popover-border-radius-default: var(--traton-unit-4);
  --component-popover-icon-link-primary-default: var(--color-icon-strong);
  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
  --component-popover-opacity-disabled: var(--traton-opacity-25);
  --component-popover-text-link-primary-default: var(--color-text-strong);
  --component-popover-text-link-primary-hover: var(--color-text-strong);
  --component-popover-text-link-secondary-default: var(--color-text-strong);
  --component-popover-text-link-secondary-hover: var(--color-text-strong);
}

.tds-mode-dark,
.scania .tds-mode-dark,
.scania.tds-mode-dark,
.scania .tl-mode-dark,
.scania.tl-mode-dark {
  --component-popover-background-primary: var(--color-background-layer-01);
  --component-popover-background-secondary: var(--color-background-layer-02);
  --component-popover-background-link-primary-default: var(--color-background-none);
  --component-popover-background-link-primary-hover: var(--scania-color-grey-850);
  --component-popover-background-link-primary-active: var(
    --component-popover-background-link-primary-hover
  );
  --component-popover-background-link-secondary-default: var(--color-background-none);
  --component-popover-background-link-secondary-hover: var(--scania-color-grey-800);
  --component-popover-background-link-secondary-active: var(
    --component-popover-background-link-secondary-hover
  );
  --component-popover-border-radius-default: var(--scania-unit-4);
  --component-popover-icon-link-primary-default: var(--color-icon-strong);
  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
  --component-popover-opacity-disabled: var(--scania-opacity-25);
  --component-popover-text-link-primary-default: var(--color-text-strong);
  --component-popover-text-link-primary-hover: var(--color-text-strong);
  --component-popover-text-link-secondary-default: var(--color-text-strong);
  --component-popover-text-link-secondary-hover: var(--color-text-strong);
}

.traton .tds-mode-dark,
.traton.tds-mode-dark,
.traton .tl-mode-dark,
.traton.tl-mode-dark {
  --component-popover-background-primary: var(--color-background-layer-01);
  --component-popover-background-secondary: var(--color-background-layer-02);
  --component-popover-background-link-primary-default: var(--color-background-none);
  --component-popover-background-link-primary-hover: var(--traton-color-blue-900);
  --component-popover-background-link-primary-active: var(--traton-color-blue-900);
  --component-popover-background-link-secondary-default: var(--color-background-none);
  --component-popover-background-link-secondary-hover: var(--traton-color-blue-850);
  --component-popover-background-link-secondary-active: var(--traton-color-blue-850);
  --component-popover-border-radius-default: var(--traton-unit-4);
  --component-popover-icon-link-primary-default: var(--color-icon-strong);
  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
  --component-popover-opacity-disabled: var(--traton-opacity-25);
  --component-popover-text-link-primary-default: var(--color-text-strong);
  --component-popover-text-link-primary-hover: var(--color-text-strong);
  --component-popover-text-link-secondary-default: var(--color-text-strong);
  --component-popover-text-link-secondary-hover: var(--color-text-strong);
}

.tl-popover-canvas {
  --popover-canvas-text: var(--component-popover-text-link-primary-default);
  --popover-canvas-background: var(--component-popover-background-primary);
  --popover-canvas-box-shadow: 0 2px 3px 0 rgb(0, 0, 0, 0.1);
}

.tl-popover-canvas--primary,
.tl-popover-canvas .tl-popover-canvas--primary {
  --popover-canvas-background: var(--component-popover-background-primary);
}

.tl-popover-canvas--secondary,
.tl-popover-canvas .tl-popover-canvas--secondary {
  --popover-canvas-background: var(--component-popover-background-secondary);
}

.traton .tl-popover-canvas {
  --popover-canvas-box-shadow: none;
}

/* Typography Usage mixins */
.tl-popover-canvas {
  display: inline-block;
  color: var(--popover-canvas-text);
  background-color: var(--popover-canvas-background);
  box-shadow: var(--popover-canvas-box-shadow);
  border-radius: 4px;
  pointer-events: none;
  z-index: 1000;
  visibility: hidden;
}
.tl-popover-canvas--visible {
  visibility: visible;
  pointer-events: auto;
}
.tl-popover-canvas--animation-fade {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.tl-popover-canvas--visible.tl-popover-canvas--animation-fade {
  opacity: 1;
  transform: translateY(0);
}

.tl-popover-canvas__content {
  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);
  padding: 16px;
}

.tl-popover-canvas__header {
  font-family: var(--headline-05-font-family);
  font-size: var(--headline-05-font-size);
  line-height: var(--headline-05-line-height);
  font-weight: var(--headline-05-font-weight);
  letter-spacing: var(--headline-05-letter-spacing);
  text-transform: var(--headline-05-text-transform);
  margin: 0 0 8px;
}

.tl-popover-canvas__actions {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}