/**
 * 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-menu {
  --popover-menu-text: var(--component-popover-text-link-primary-default);
  --popover-menu-background: var(--component-popover-background-primary);
  --popover-menu-background-hover: var(--component-popover-background-link-primary-hover);
  --popover-menu-item-outline-focus: var(--component--focus-ring-color-strong);
  --popover-menu-item-opacity-disabled: calc(var(--component-popover-opacity-disabled) / 100);
  --popover-menu-box-shadow: 0 2px 3px 0 rgb(0, 0, 0, 0.1);
}

.tl-popover-menu--primary,
.tl-popover-menu .tl-popover-menu--primary {
  --popover-menu-background: var(--component-popover-background-primary);
  --popover-menu-background-hover: var(--component-popover-background-link-primary-hover);
}

.tl-popover-menu--secondary,
.tl-popover-menu .tl-popover-menu--secondary {
  --popover-menu-background: var(--component-popover-background-secondary);
  --popover-menu-background-hover: var(--component-popover-background-link-secondary-hover);
}

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

/* Typography Usage mixins */
.tl-popover-menu__item-wrapper {
  box-sizing: border-box;
}
.tl-popover-menu__item-wrapper * {
  box-sizing: border-box;
}
.tl-popover-menu__item-wrapper {
  display: block;
  padding: 16px 0;
}

.tl-popover-menu__item {
  all: unset;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: var(--popover-menu-text);
  position: relative;
  transition: background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-easy);
  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);
}
.tl-popover-menu__item:hover {
  cursor: pointer;
  background-color: var(--popover-menu-background-hover);
}
.tl-popover-menu__item:focus-visible {
  outline: 2px solid var(--popover-menu-item-outline-focus);
  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
  outline-offset: -2px;
  z-index: 1;
}

.tl-popover-menu__item--disabled {
  all: unset;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: not-allowed;
  opacity: var(--popover-menu-item-opacity-disabled);
  pointer-events: none;
  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);
}
.tl-popover-menu__item--disabled:hover {
  background-color: inherit;
}
.tl-popover-menu__item--disabled:focus, .tl-popover-menu__item--disabled:focus-visible, .tl-popover-menu__item--disabled:active {
  outline: none;
  box-shadow: none;
}

.tl-popover-menu {
  box-sizing: border-box;
}
.tl-popover-menu * {
  box-sizing: border-box;
}
.tl-popover-menu {
  overflow: hidden;
  width: 160px;
  background-color: var(--popover-menu-background);
  box-shadow: var(--popover-menu-box-shadow);
  border-radius: 4px;
  z-index: 900;
  pointer-events: none;
  visibility: hidden;
}
.tl-popover-menu--visible {
  visibility: visible;
  pointer-events: auto;
}
.tl-popover-menu--fluid {
  width: max-content;
  display: inline-block;
}
.tl-popover-menu--animation-fade {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.tl-popover-menu--visible.tl-popover-menu--animation-fade {
  opacity: 1;
  transform: translateY(0);
}
.tl-popover-menu .tl-divider {
  width: calc(100% - 12px);
  margin: 6px;
}