:root,
.tds-mode-light {
  //Primary

  // Mapped these to the new variables in _tegel-brand-usage.scss -->
  --tds-btn-primary-background: var(--background-clickable-primary-primary);
  --tds-btn-primary-background-hover: var(--background-clickable-primary-primary-hover);
  --tds-btn-primary-background-active: var(--background-clickable-primary-pressed);
  --tds-btn-primary-background-focus: var(--background-clickable-primary-focus);
  --tds-btn-primary-background-disabled-primary: var(--background-clickable-primary-disabled);

  // <-- Mapped these to the new variables

  --tds-btn-primary-background-disabled-secondary: var(--tds-white);
  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
  --tds-btn-primary-color: var(--tds-white);
  --tds-btn-primary-color-hover: var(--tds-white);
  --tds-btn-primary-color-active: var(--tds-white);
  --tds-btn-primary-color-focus: var(--tds-white);
  --tds-btn-primary-color-disabled: var(--tds-grey-250);
  --tds-btn-primary-border-color: transparent;
  --tds-btn-primary-border-color-hover: transparent;
  --tds-btn-primary-border-color-active: var(--tds-blue-700);
  --tds-btn-primary-border-color-focus: var(--tds-blue-700);
  --tds-btn-primary-outline-color-focus: var(--tds-blue-400);
  --tds-btn-primary-border-color-disabled: transparent;

  /* ICON */ //not used
  --tds-btn-icon-primary-fill: var(--tds-grey-50);
  --tds-btn-icon-primary-color: var(--tds-grey-50);

  //Secondary
  --tds-btn-secondary-background: transparent;
  --tds-btn-secondary-color: var(--tds-black);
  --tds-btn-secondary-border-color: var(--tds-grey-350);
  --tds-btn-secondary-background-hover: var(--tds-blue-700);
  --tds-btn-secondary-color-hover: var(--tds-white);
  --tds-btn-secondary-border-color-hover: var(--tds-blue-500);
  --tds-btn-secondary-background-active: transparent;
  --tds-btn-secondary-color-active: var(--tds-black);
  --tds-btn-secondary-border-color-active: var(--tds-grey-650);
  --tds-btn-secondary-background-focus: var(--tds-blue-700);
  --tds-btn-secondary-color-focus: var(--tds-white);
  --tds-btn-secondary-border-color-focus: var(--tds-white);
  --tds-btn-secondary-outline-color: var(--tds-black-38);
  --tds-btn-secondary-outline-color-focus: var(--tds-blue-400);
  --tds-btn-secondary-background-disabled: transparent;
  --tds-btn-secondary-color-disabled: var(--tds-grey-250);
  --tds-btn-secondary-border-color-disabled: var(--tds-grey-250);
  --tds-btn-icon-secondary-color-focus: var(--tds-black);
  --tds-btn-icon-secondary-fill-focus: var(--tds-black);
  --tds-btn-icon-secondary-fill-active: var(--tds-grey-958);

  /* ICON */ //not used
  --tds-btn-icon-secondary-fill: var(--tds-grey-958);
  --tds-btn-icon-secondary-color: var(--tds-grey-958);

  /* ICON HOVER */ //not used
  --tds-btn-icon-secondary-fill-hover: var(--tds-grey-50);
  --tds-btn-icon-secondary-color-hover: var(--tds-grey-50);

  /* ICON HOVER */ //not used
  --tds-btn-icon-secondary-color-active: var(--tds-grey-958);

  //Ghost
  --tds-btn-ghost-background: transparent;
  --tds-btn-ghost-color: var(--tds-grey-950);
  --tds-btn-ghost-border-color: transparent;
  --tds-btn-ghost-background-hover: transparent;
  --tds-btn-ghost-color-hover: var(--tds-grey-950);
  --tds-btn-ghost-border-color-hover: var(--tds-grey-350);
  --tds-btn-ghost-outline-color-hover: var(--tds-black-48);
  --tds-btn-ghost-background-active: transparent;
  --tds-btn-ghost-color-active: var(--tds-grey-950);
  --tds-btn-ghost-border-color-active: var(--tds-grey-650);
  --tds-btn-ghost-background-focus: transparent;
  --tds-btn-ghost-color-focus: var(--tds-grey-950);
  --tds-btn-ghost-border-color-focus: var(--tds-grey-350);
  --tds-btn-ghost-outline-color-focus: var(--tds-blue-400);
  --tds-btn-ghost-background-disabled: transparent;
  --tds-btn-ghost-color-disabled: var(--tds-black-38);
  --tds-btn-ghost-border-color-disabled: transparent;

  /* ICON */
  --tds-btn-icon-ghost-fill: var(--tds-grey-958);
  --tds-btn-icon-ghost-color: var(--tds-grey-958);

  //Danger
  --tds-btn-danger-background: var(--scania-extended-red-400);
  --tds-btn-danger-color: var(--tds-white);
  --tds-btn-danger-border-color: transparent;
  --tds-btn-danger-background-hover: var(--scania-extended-red-500);
  --tds-btn-danger-color-hover: var(--tds-white);
  --tds-btn-danger-border-color-hover: transparent;
  --tds-btn-danger-background-active: var(--scania-extended-red-600);
  --tds-btn-danger-color-active: var(--tds-white);
  --tds-btn-danger-border-color-active: var(--tds-red-700);
  --tds-btn-danger-background-focus: var(--scania-extended-red-500);
  --tds-btn-danger-color-focus: var(--tds-white);
  --tds-btn-danger-border-color-focus: var(--tds-red-500);
  --tds-btn-danger-outline-color-focus: var(--tds-blue-400);
  --tds-btn-danger-background-disabled-primary: var(--scania-neutral-solid-50);
  --tds-btn-danger-background-disabled-secondary: var(--tds-white);
  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
  --tds-btn-danger-color-disabled: var(--tds-black-38);
  --tds-btn-danger-border-color-disabled: transparent;

  /* ICON */
  --tds-btn-icon-danger-fill: var(--tds-grey-50);
  --tds-btn-icon-danger-color: var(--tds-grey-50);

  .tds-mode-variant-primary {
    --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
    --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
  }

  .tds-mode-variant-secondary {
    --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-secondary);
    --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-secondary);
  }
}

.tds-mode-dark {
  //Primary
  --tds-btn-primary-background: var(--scania-blue-400);
  --tds-btn-primary-background-hover: var(--scania-blue-500);
  --tds-btn-primary-background-active: var(--scania-blue-600);
  --tds-btn-primary-background-focus: var(--scania-blue-500);
  --tds-btn-primary-border-color-focus: var(--tds-white);
  --tds-btn-primary-border-color: transparent;
  --tds-btn-primary-border-color-hover: var(--tds-white);
  --tds-btn-primary-outline-color-focus: var(--tds-blue-300);
  --tds-btn-primary-background-disabled-primary: var(--tds-grey-900);
  --tds-btn-primary-background-disabled-secondary: var(--tds-grey-850);
  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
  --tds-btn-primary-color-disabled: var(--scania-neutral-transparent-inverse-500);

  /* ICON */ //not used
  --tds-btn-icon-primary-fill: var(--tds-grey-50);
  --tds-btn-icon-primary-color: var(--tds-grey-50);

  //Secondary
  --tds-btn-secondary-background: transparent;
  --tds-btn-secondary-color: var(--tds-white);
  --tds-btn-secondary-border-color: var(--scania-neutral-transparent-inverse-400);
  --tds-btn-secondary-background-hover: var(--tds-blue-500);
  --tds-btn-secondary-color-hover: var(--tds-white);
  --tds-btn-secondary-border-color-hover: var(--tds-white);
  --tds-btn-secondary-background-active: var(--scania-blue-600);
  --tds-btn-secondary-color-active: var(--tds-white);
  --tds-btn-secondary-border-color-active: var(--tds-grey-200);
  --tds-btn-secondary-background-focus: var(--scania-blue-500);
  --tds-btn-secondary-color-focus: var(--tds-white);
  --tds-btn-secondary-border-color-focus: var(--tds-white);
  --tds-btn-secondary-outline-color-focus: var(--tds-blue-300);
  --tds-btn-secondary-outline-color: var(--tds-white);
  --tds-btn-secondary-background-disabled: transparent;
  --tds-btn-secondary-color-disabled: var(--tds-grey-500);
  --tds-btn-secondary-border-color-disabled: var(--tds-grey-500);
  --tds-btn-icon-secondary-color-focus: var(--tds-white);
  --tds-btn-icon-secondary-fill-focus: var(--tds-white);

  /* ICON */ //not used
  --tds-btn-icon-secondary-fill: var(--tds-grey-50);
  --tds-btn-icon-secondary-color: var(--tds-grey-50);

  //Ghost
  --tds-btn-ghost-background: transparent;
  --tds-btn-ghost-color: var(--tds-white);
  --tds-btn-ghost-border-color: transparent;
  --tds-btn-ghost-background-hover: transparent;
  --tds-btn-ghost-color-hover: var(--tds-white);
  --tds-btn-ghost-border-color-hover: var(--tds-white);
  --tds-btn-ghost-outline-color-hover: var(--tds-white-48);
  --tds-btn-ghost-background-active: transparent;
  --tds-btn-ghost-color-active: var(--tds-white);
  --tds-btn-ghost-border-color-active: var(--tds-grey-200);
  --tds-btn-ghost-background-focus: transparent;
  --tds-btn-ghost-color-focus: var(--tds-white);
  --tds-btn-ghost-border-color-focus: var(--tds-white);
  --tds-btn-ghost-outline-color-focus: var(--tds-blue-300);
  --tds-btn-ghost-background-disabled: transparent;
  --tds-btn-ghost-color-disabled: var(--tds-grey-500);
  --tds-btn-ghost-border-color-disabled: transparent;

  /* ICON */
  --tds-btn-icon-ghost-fill: var(--tds-grey-50);
  --tds-btn-icon-ghost-color: var(--tds-grey-50);

  //Danger
  --tds-btn-danger-background: var(--scania-extended-red-400);
  --tds-btn-danger-color: var(--tds-white);
  --tds-btn-danger-border-color: transparent;
  --tds-btn-danger-background-hover: var(--scania-extended-red-500);
  --tds-btn-danger-color-hover: var(--tds-white);
  --tds-btn-danger-border-color-hover: transparent;
  --tds-btn-danger-background-active: var(--scania-extended-red-600);
  --tds-btn-danger-color-active: var(--tds-white);
  --tds-btn-danger-border-color-active: transparent;
  --tds-btn-danger-background-focus: var(--scania-extended-red-500);
  --tds-btn-danger-color-focus: var(--tds-white);
  --tds-btn-danger-border-color-focus: var(--tds-white);
  --tds-btn-danger-outline-color-focus: var(--tds-blue-300);
  --tds-btn-danger-background-disabled-primary: var(--tds-grey-900);
  --tds-btn-danger-background-disabled-secondary: var(--tds-grey-850);
  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
  --tds-btn-danger-color-disabled: var(--tds-grey-500);
  --tds-btn-danger-border-color-disabled: transparent;

  /* ICON */
  --tds-btn-icon-danger-fill: var(--tds-white);
  --tds-btn-icon-danger-color: var(--tds-white);

  .tds-mode-variant-primary {
    --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
    --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
  }

  .tds-mode-variant-secondary {
    --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-secondary);
    --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-secondary);
  }
}