@use '../modules/_primitivesVariables.scss' as var;

.color-headline-primary {
  color: var.$color-aero-900;
  fill: var.$color-aero-900;

  [data-theme='dark'] & {
    color: var.$color-aero-100;
    fill: var.$color-aero-100;
  }
}

.color-headline-secondary {
  color: var.$color-neutral-400;
  fill: var.$color-neutral-400;

  [data-theme='dark'] & {
    color: var.$color-neutral-400;
    fill: var.$color-neutral-400;
  }
}

.color-body-default {
  color: var.$color-aero-900;
  fill: var.$color-aero-900;

  [data-theme='dark'] & {
    color: var.$color-aero-100;
    fill: var.$color-aero-100;
  }
}

.color-body-inverted {
  color: var.$color-aero-100;
  fill: var.$color-aero-100;

  [data-theme='dark'] & {
    color: var.$color-aero-900;
    fill: var.$color-aero-900;
  }
}

.color-button-primary {
  color: var.$color-neutral-00;
  fill: var.$color-neutral-00;

  [data-theme='dark'] & {
    color: var.$color-neutral-00;
    fill: var.$color-neutral-00;
  }
}

.color-button-secondary {
  color: var.$color-blue-700;
  fill: var.$color-blue-700;

  [data-theme='dark'] & {
    color: var.$color-neutral-50;
    fill: var.$color-neutral-50;
  }
}

.color-button-outline {
  color: var.$color-blue-600;
  fill: var.$color-blue-600;

  [data-theme='dark'] & {
    color: var.$color-aero-400;
    fill: var.$color-aero-400;
  }
}

.color-button-outlinehover {
  color: var.$color-blue-700;
  fill: var.$color-blue-700;

  [data-theme='dark'] & {
    color: var.$color-aero-300;
    fill: var.$color-aero-300;
  }
}

.color-button-outlineneutral {
  color: var.$color-neutral-450;
  fill: var.$color-neutral-450;

  [data-theme='dark'] & {
    color: var.$color-neutral-200;
    fill: var.$color-neutral-200;
  }
}

.color-button-outlineneutralhover {
  color: var.$color-slate-500;
  fill: var.$color-slate-500;

  [data-theme='dark'] & {
    color: var.$color-neutral-50;
    fill: var.$color-neutral-50;
  }
}

.color-button-destructive {
  color: var.$color-red-600;
  fill: var.$color-red-600;

  [data-theme='dark'] & {
    color: var.$color-red-400;
    fill: var.$color-red-400;
  }
}

.color-button-destructivehover {
  color: var.$color-red-700;
  fill: var.$color-red-700;

  [data-theme='dark'] & {
    color: var.$color-red-300;
    fill: var.$color-red-300;
  }
}

.color-button-success {
  color: var.$color-green-800;
  fill: var.$color-green-800;

  [data-theme='dark'] & {
    color: var.$color-green-600;
    fill: var.$color-green-600;
  }
}

.color-button-successhover {
  color: var.$color-green-900;
  fill: var.$color-green-900;

  [data-theme='dark'] & {
    color: var.$color-green-500;
    fill: var.$color-green-500;
  }
}

.color-button-purple {
  color: var.$color-purple-400;
  fill: var.$color-purple-400;

  [data-theme='dark'] & {
    color: var.$color-purple-200;
    fill: var.$color-purple-200;
  }
}

.color-button-purplehover {
  color: var.$color-purple-500;
  fill: var.$color-purple-500;

  [data-theme='dark'] & {
    color: var.$color-purple-100;
    fill: var.$color-purple-100;
  }
}

.color-button-translucentdestructive {
  color: var.$color-red-800;
  fill: var.$color-red-800;

  [data-theme='dark'] & {
    color: var.$color-red-400;
    fill: var.$color-red-400;
  }
}

.color-button-translucentprimary {
  color: var.$color-blue-700;
  fill: var.$color-blue-700;

  [data-theme='dark'] & {
    color: var.$color-aero-400;
    fill: var.$color-aero-400;
  }
}

.color-button-translucentsuccess {
  color: var.$color-green-900;
  fill: var.$color-green-900;

  [data-theme='dark'] & {
    color: var.$color-green-600;
    fill: var.$color-green-600;
  }
}

.color-button-translucentpurple {
  color: var.$color-purple-400;
  fill: var.$color-purple-400;

  [data-theme='dark'] & {
    color: var.$color-purple-100;
    fill: var.$color-purple-100;
  }
}

.color-link-default {
  color: var.$color-blue-400;
  fill: var.$color-blue-400;

  [data-theme='dark'] & {
    color: var.$color-blue-200;
    fill: var.$color-blue-200;
  }
}

.color-input-placeholder {
  color: var.$opacity-black-20;
  fill: var.$opacity-black-20;

  [data-theme='dark'] & {
    color: var.$opacity-aero-30;
    fill: var.$opacity-aero-30;
  }
}

.color-link-hover {
  color: var.$color-blue-600;
  fill: var.$color-blue-600;

  [data-theme='dark'] & {
    color: var.$color-blue-300;
    fill: var.$color-blue-300;
  }
}

.color-input-default {
  color: var.$color-neutral-300;
  fill: var.$color-neutral-300;

  [data-theme='dark'] & {
    color: var.$color-aero-500;
    fill: var.$color-aero-500;
  }
}

.color-input-label {
  color: var.$color-neutral-400;
  fill: var.$color-neutral-400;

  [data-theme='dark'] & {
    color: var.$color-aero-400;
    fill: var.$color-aero-400;
  }
}

.color-input-labellight {
  color: var.$color-neutral-300;
  fill: var.$color-neutral-300;

  [data-theme='dark'] & {
    color: var.$color-aero-600;
    fill: var.$color-aero-600;
  }
}

.color-input-active {
  color: var.$color-aero-900;
  fill: var.$color-aero-900;

  [data-theme='dark'] & {
    color: var.$color-aero-300;
    fill: var.$color-aero-300;
  }
}

.color-input-error {
  color: var.$color-red-600 !important;
  fill: var.$color-red-600 !important;

  [data-theme='dark'] & {
    color: var.$color-red-400 !important;
    fill: var.$color-red-400 !important;
  }
}

.color-input-success {
  color: var.$color-green-700;
  fill: var.$color-green-700;

  [data-theme='dark'] & {
    color: var.$color-green-600;
    fill: var.$color-green-600;
  }
}

.color-pagination-default {
  color: var.$color-blue-500;
  fill: var.$color-blue-500;

  [data-theme='dark'] & {
    color: var.$color-aero-600;
    fill: var.$color-aero-600;
  }
}

.color-pagination-hover {
  color: var.$color-blue-700;
  fill: var.$color-blue-700;

  [data-theme='dark'] & {
    color: var.$color-aero-500;
    fill: var.$color-aero-500;
  }
}

.color-pagination-active {
  color: var.$color-blue-700;
  fill: var.$color-blue-700;

  [data-theme='dark'] & {
    color: var.$color-aero-500;
    fill: var.$color-aero-500;
  }
}

.color-pagination-focus {
  color: var.$color-blue-500;
  fill: var.$color-blue-500;

  [data-theme='dark'] & {
    color: var.$color-aero-600;
    fill: var.$color-aero-600;
  }
}

.color-checkbox-default {
  color: var.$color-neutral-400;
  fill: var.$color-neutral-400;

  [data-theme='dark'] & {
    color: var.$color-aero-300;
    fill: var.$color-aero-300;
  }
}

.color-checkbox-selected {
  color: var.$color-neutral-400;
  fill: var.$color-neutral-400;

  [data-theme='dark'] & {
    color: var.$color-aero-300;
    fill: var.$color-aero-300;
  }
}

.color-badge-filled {
  color: var.$color-neutral-00;
  fill: var.$color-neutral-00;

  [data-theme='dark'] & {
    color: var.$color-aero-100;
    fill: var.$color-aero-100;
  }
}

.color-badge-outline {
  color: var.$color-aero-950;
  fill: var.$color-aero-950;

  [data-theme='dark'] & {
    color: var.$color-aero-100;
    fill: var.$color-aero-100;
  }
}

.color-badge-blue {
  color: var.$color-blue-500;
  fill: var.$color-blue-500;

  [data-theme='dark'] & {
    color: var.$color-blue-500;
    fill: var.$color-blue-500;
  }
}

.color-badge-bluefaded {
  color: var.$opacity-blue-30;
  fill: var.$opacity-blue-30;

  [data-theme='dark'] & {
    color: var.$opacity-blue-30;
    fill: var.$opacity-blue-30;
  }
}

.color-badge-navy {
  color: var.$color-navy-700;
  fill: var.$color-navy-700;

  [data-theme='dark'] & {
    color: var.$color-navy-700;
    fill: var.$color-navy-700;
  }
}

.color-badge-navyfaded {
  color: var.$opacity-navy-30;
  fill: var.$opacity-navy-30;

  [data-theme='dark'] & {
    color: var.$opacity-navy-30;
    fill: var.$opacity-navy-30;
  }
}

.color-badge-slate {
  color: var.$color-slate-400;
  fill: var.$color-slate-400;

  [data-theme='dark'] & {
    color: var.$color-slate-400;
    fill: var.$color-slate-400;
  }
}

.color-badge-slatefaded {
  color: var.$opacity-slate-30;
  fill: var.$opacity-slate-30;

  [data-theme='dark'] & {
    color: var.$opacity-slate-30;
    fill: var.$opacity-slate-30;
  }
}

.color-badge-green {
  color: var.$color-green-800;
  fill: var.$color-green-800;

  [data-theme='dark'] & {
    color: var.$color-green-800;
    fill: var.$color-green-800;
  }
}

.color-badge-greenfaded {
  color: var.$opacity-green-30;
  fill: var.$opacity-green-30;

  [data-theme='dark'] & {
    color: var.$opacity-green-30;
    fill: var.$opacity-green-30;
  }
}

.color-badge-mint {
  color: var.$color-mint-600;
  fill: var.$color-mint-600;

  [data-theme='dark'] & {
    color: var.$color-mint-600;
    fill: var.$color-mint-600;
  }
}

.color-badge-yellow {
  color: var.$color-yellow-600;
  fill: var.$color-yellow-600;

  [data-theme='dark'] & {
    color: var.$color-yellow-600;
    fill: var.$color-yellow-600;
  }
}

.color-badge-yellowfaded {
  color: var.$opacity-yellow-30;
  fill: var.$opacity-yellow-30;

  [data-theme='dark'] & {
    color: var.$opacity-yellow-30;
    fill: var.$opacity-yellow-30;
  }
}

.color-badge-pink {
  color: var.$color-pink-400;
  fill: var.$color-pink-400;

  [data-theme='dark'] & {
    color: var.$color-pink-400;
    fill: var.$color-pink-400;
  }
}

.color-badge-pinkfaded {
  color: var.$opacity-pink-30;
  fill: var.$opacity-pink-30;

  [data-theme='dark'] & {
    color: var.$opacity-pink-30;
    fill: var.$opacity-pink-30;
  }
}

.color-badge-red {
  color: var.$color-red-600;
  fill: var.$color-red-600;

  [data-theme='dark'] & {
    color: var.$color-red-600;
    fill: var.$color-red-600;
  }
}

.color-badge-redfaded {
  color: var.$opacity-red-30;
  fill: var.$opacity-red-30;

  [data-theme='dark'] & {
    color: var.$opacity-red-30;
    fill: var.$opacity-red-30;
  }
}

.color-badge-purple {
  color: var.$color-purple-400;
  fill: var.$color-purple-400;

  [data-theme='dark'] & {
    color: var.$color-purple-400;
    fill: var.$color-purple-400;
  }
}

.color-badge-purplefaded {
  color: var.$opacity-purple-30;
  fill: var.$opacity-purple-30;

  [data-theme='dark'] & {
    color: var.$opacity-purple-30;
    fill: var.$opacity-purple-30;
  }
}

.color-badge-grey {
  color: var.$color-grey-300;
  fill: var.$color-grey-300;

  [data-theme='dark'] & {
    color: var.$color-grey-300;
    fill: var.$color-grey-300;
  }
}

.color-badge-greyfaded {
  color: var.$opacity-black-10;
  fill: var.$opacity-black-10;

  [data-theme='dark'] & {
    color: var.$opacity-black-10;
    fill: var.$opacity-black-10;
  }
}

.color-badge-black {
  color: var.$color-grey-900;
  fill: var.$color-grey-900;

  [data-theme='dark'] & {
    color: var.$color-grey-900;
    fill: var.$color-grey-900;
  }
}

.color-badge-blackfaded {
  color: var.$opacity-black-30;
  fill: var.$opacity-black-30;

  [data-theme='dark'] & {
    color: var.$opacity-black-30;
    fill: var.$opacity-black-30;
  }
}

.color-badge-white {
  color: var.$color-white-00;
  fill: var.$color-white-00;

  [data-theme='dark'] & {
    color: var.$color-white-00;
    fill: var.$color-white-00;
  }
}

.color-badge-whitefaded {
  color: var.$opacity-white-30;
  fill: var.$opacity-white-30;

  [data-theme='dark'] & {
    color: var.$opacity-white-30;
    fill: var.$opacity-white-30;
  }
}

.color-badge-aero {
  color: var.$color-aero-300;
  fill: var.$color-aero-300;

  [data-theme='dark'] & {
    color: var.$color-aero-700;
    fill: var.$color-aero-700;
  }
}

.color-badge-aerofaded {
  color: var.$opacity-aero-30;
  fill: var.$opacity-aero-30;

  [data-theme='dark'] & {
    color: var.$opacity-aero-30;
    fill: var.$opacity-aero-30;
  }
}

.color-dropdown-default {
  color: var.$color-neutral-400;
  fill: var.$color-neutral-400;

  [data-theme='dark'] & {
    color: var.$color-aero-500;
    fill: var.$color-aero-500;
  }
}

.color-dropdown-hover {
  color: var.$color-neutral-400;
  fill: var.$color-neutral-400;

  [data-theme='dark'] & {
    color: var.$color-aero-400;
    fill: var.$color-aero-400;
  }
}

.color-dropdown-active {
  color: var.$color-aero-900;
  fill: var.$color-aero-900;

  [data-theme='dark'] & {
    color: var.$color-aero-300;
    fill: var.$color-aero-300;
  }
}

.color-buttongroup-default {
  color: var.$color-aero-500;
  fill: var.$color-aero-500;

  [data-theme='dark'] & {
    color: var.$color-aero-600;
    fill: var.$color-aero-600;
  }
}

.color-icon-default {
  color: var.$color-grey-200;
  fill: var.$color-grey-200;

  [data-theme='dark'] & {
    color: var.$color-grey-100;
    fill: var.$color-grey-100;
  }
}

.color-icon-active {
  color: var.$color-blue-500;
  fill: var.$color-blue-500;

  [data-theme='dark'] & {
    color: var.$color-blue-500;
    fill: var.$color-blue-500;
  }
}

.color-icon-error {
  color: var.$color-red-600 !important;
  fill: var.$color-red-600 !important;

  [data-theme='dark'] & {
    color: var.$color-red-600 !important;
    fill: var.$color-red-600 !important;
  }
}

.color-icon-success {
  color: var.$color-green-700;
  fill: var.$color-green-700;

  [data-theme='dark'] & {
    color: var.$color-green-800;
    fill: var.$color-green-800;
  }
}

.color-icon-warning {
  color: var.$color-yellow-600;
  fill: var.$color-yellow-600;

  [data-theme='dark'] & {
    color: var.$color-yellow-600;
    fill: var.$color-yellow-600;
  }
}

.color-buttongroup-active {
  color: var.$color-neutral-400;
  fill: var.$color-neutral-400;

  [data-theme='dark'] & {
    color: var.$color-aero-300;
    fill: var.$color-aero-300;
  }
}

.background-input-default {
  background-color: var.$color-neutral-00;

  [data-theme='dark'] & {
    background-color: var.$color-aero-800;
  }
}

.background-input-readonly {
  background-color: var.$opacity-black-02;

  [data-theme='dark'] & {
    background-color: var.$opacity-white-03;
  }
}

.background-surface-page {
  background-color: var.$color-neutral-00;

  [data-theme='dark'] & {
    background-color: var.$color-aero-1000;
  }
}

.background-surface-pageinverted {
  background-color: var.$color-aero-1000;

  [data-theme='dark'] & {
    background-color: var.$color-neutral-00;
  }
}

.background-surface-default {
  background-color: var.$color-neutral-50;

  [data-theme='dark'] & {
    background-color: var.$color-aero-700;
  }
}

.background-surface-light {
  background-color: var.$color-neutral-75;

  [data-theme='dark'] & {
    background-color: var.$color-aero-800;
  }
}

.background-surface-light-70 {
  background-color: var.$color-neutral-75-70;

  [data-theme='dark'] & {
    background-color: var.$color-aero-800-70;
  }
}

.background-surface-xlight {
  background-color: var.$color-neutral-50;

  [data-theme='dark'] & {
    background-color: var.$color-aero-850;
  }
}

.background-surface-xlightalt {
  background-color: var.$color-neutral-50;

  [data-theme='dark'] & {
    background-color: var.$color-aero-875;
  }
}

.background-surface-xxlight {
  background-color: var.$color-neutral-00;

  [data-theme='dark'] & {
    background-color: var.$color-aero-900;
  }
}

.background-surface-xxxlight {
  background-color: var.$color-neutral-00;

  [data-theme='dark'] & {
    background-color: var.$color-aero-975;
  }
}

.background-button-primary-default {
  background-color: var.$color-blue-600;

  [data-theme='dark'] & {
    background-color: var.$color-blue-600;
  }
}

.background-button-secondary-default {
  background-color: var.$color-blue-100;

  [data-theme='dark'] & {
    background-color: var.$color-navy-900;
  }
}

.background-controller-default {
  background-color: var.$color-neutral-200;

  [data-theme='dark'] & {
    background-color: var.$color-neutral-300;
  }
}

.background-checkbox-intermediate {
  background-color: var.$color-neutral-300;

  [data-theme='dark'] & {
    background-color: var.$color-aero-500;
  }
}

.background-checkbox-active {
  background-color: var.$color-blue-500;

  [data-theme='dark'] & {
    background-color: var.$color-blue-500;
  }
}

.background-selectioncard-default {
  background-color: var.$color-neutral-00;

  [data-theme='dark'] & {
    background-color: var.$color-aero-800;
  }
}

.background-selectioncard-active {
  background-color: var.$color-aero-100;

  [data-theme='dark'] & {
    background-color: var.$color-aero-800;
  }
}

.background-controller-light {
  background-color: var.$color-neutral-200;

  [data-theme='dark'] & {
    background-color: var.$color-aero-700;
  }
}

.background-controller-xlight {
  background-color: var.$color-neutral-50;

  [data-theme='dark'] & {
    background-color: var.$color-aero-700;
  }
}

.background-controller-white {
  background-color: var.$color-neutral-00;

  [data-theme='dark'] & {
    background-color: var.$color-neutral-00;
  }
}

.background-button-destructive-default {
  background-color: var.$color-red-600;

  [data-theme='dark'] & {
    background-color: var.$color-red-600;
  }
}

.background-button-success-default {
  background-color: var.$color-green-800;

  [data-theme='dark'] & {
    background-color: var.$color-green-800;
  }
}

.background-controller-selected {
  background-color: var.$color-blue-500;

  [data-theme='dark'] & {
    background-color: var.$color-blue-500;
  }
}

.background-stepper-default {
  background-color: var.$color-neutral-00;

  [data-theme='dark'] & {
    background-color: var.$color-aero-800;
  }
}

.background-stepper-active {
  background-color: var.$color-neutral-250;

  [data-theme='dark'] & {
    background-color: var.$color-aero-800;
  }
}

.background-stepper-divider {
  background-color: var.$color-blue-100;

  [data-theme='dark'] & {
    background-color: var.$color-aero-800;
  }
}

.background-badge-blue {
  background-color: var.$color-blue-600;

  [data-theme='dark'] & {
    background-color: var.$color-blue-600;
  }
}

.background-badge-bluefaded {
  background-color: var.$opacity-blue-30;

  [data-theme='dark'] & {
    background-color: var.$opacity-blue-30;
  }
}

.background-badge-navy {
  background-color: var.$color-navy-700;

  [data-theme='dark'] & {
    background-color: var.$color-navy-700;
  }
}

.background-badge-navyfaded {
  background-color: var.$opacity-navy-30;

  [data-theme='dark'] & {
    background-color: var.$opacity-navy-30;
  }
}

.background-badge-slate {
  background-color: var.$color-slate-400;

  [data-theme='dark'] & {
    background-color: var.$color-slate-400;
  }
}

.background-badge-slatefaded {
  background-color: var.$opacity-slate-30;

  [data-theme='dark'] & {
    background-color: var.$opacity-slate-30;
  }
}

.background-badge-green {
  background-color: var.$color-green-800;

  [data-theme='dark'] & {
    background-color: var.$color-green-800;
  }
}

.background-badge-greenfaded {
  background-color: var.$opacity-green-30;

  [data-theme='dark'] & {
    background-color: var.$opacity-green-30;
  }
}

.background-badge-mint {
  background-color: var.$color-mint-600;

  [data-theme='dark'] & {
    background-color: var.$color-mint-600;
  }
}

.background-badge-yellow {
  background-color: var.$color-yellow-700;

  [data-theme='dark'] & {
    background-color: var.$color-yellow-700;
  }
}

.background-badge-yellowfaded {
  background-color: var.$opacity-yellow-30;

  [data-theme='dark'] & {
    background-color: var.$opacity-yellow-30;
  }
}

.background-badge-pink {
  background-color: var.$color-pink-400;

  [data-theme='dark'] & {
    background-color: var.$color-pink-400;
  }
}

.background-badge-pinkfaded {
  background-color: var.$opacity-pink-30;

  [data-theme='dark'] & {
    background-color: var.$opacity-pink-30;
  }
}

.background-badge-red {
  background-color: var.$color-red-600;

  [data-theme='dark'] & {
    background-color: var.$color-red-600;
  }
}

.background-badge-redfaded {
  background-color: var.$opacity-red-30;

  [data-theme='dark'] & {
    background-color: var.$opacity-red-30;
  }
}

.background-badge-purple {
  background-color: var.$color-purple-400;

  [data-theme='dark'] & {
    background-color: var.$color-purple-400;
  }
}

.background-badge-purplefaded {
  background-color: var.$opacity-purple-30;

  [data-theme='dark'] & {
    background-color: var.$opacity-purple-30;
  }
}

.background-badge-grey {
  background-color: var.$color-grey-300;

  [data-theme='dark'] & {
    background-color: var.$color-grey-300;
  }
}

.background-badge-greyfaded {
  background-color: var.$opacity-black-10;

  [data-theme='dark'] & {
    background-color: var.$opacity-black-10;
  }
}

.background-badge-black {
  background-color: var.$color-grey-900;

  [data-theme='dark'] & {
    background-color: var.$color-grey-900;
  }
}

.background-badge-blackfaded {
  background-color: var.$opacity-black-30;

  [data-theme='dark'] & {
    background-color: var.$opacity-black-30;
  }
}

.background-badge-white {
  background-color: var.$color-white-00;

  [data-theme='dark'] & {
    background-color: var.$color-white-00;
  }
}

.background-badge-whitefaded {
  background-color: var.$opacity-white-30;

  [data-theme='dark'] & {
    background-color: var.$opacity-white-30;
  }
}

.background-badge-aero {
  background-color: var.$color-aero-300;

  [data-theme='dark'] & {
    background-color: var.$color-aero-700;
  }
}

.background-badge-aerofaded {
  background-color: var.$opacity-aero-30;

  [data-theme='dark'] & {
    background-color: var.$opacity-aero-30;
  }
}

.background-badge-low-contrast {
  background-color: var.$color-white-00;

  [data-theme='dark'] & {
    background-color: var.$color-aero-850;
  }
}

.background-badge-low-contrastfaded {
  background-color: var.$opacity-white-30;

  [data-theme='dark'] & {
    background-color: var.$opacity-navy-30;
  }
}

.background-rating-default {
  background-color: var.$color-neutral-75;

  [data-theme='dark'] & {
    background-color: var.$color-aero-800;
  }
}

.background-rating-star {
  background-color: var.$color-yellow-500;

  [data-theme='dark'] & {
    background-color: var.$color-yellow-500;
  }
}

.background-rating-heart {
  background-color: var.$color-red-500;

  [data-theme='dark'] & {
    background-color: var.$color-red-500;
  }
}

.background-rating-smile {
  background-color: var.$color-green-700;

  [data-theme='dark'] & {
    background-color: var.$color-green-700;
  }
}

.background-buttongroup-default {
  background-color: var.$color-neutral-00;

  [data-theme='dark'] & {
    background-color: var.$color-aero-850;
  }
}

.background-buttongroup-active {
  background-color: var.$color-aero-200;

  [data-theme='dark'] & {
    background-color: var.$color-aero-800;
  }
}

.background-button-translucent-primary {
  background-color: var.$opacity-blue-30;

  [data-theme='dark'] & {
    background-color: var.$opacity-blue-30;
  }
}

.background-button-translucent-primaryhover {
  background-color: var.$opacity-blue-40;

  [data-theme='dark'] & {
    background-color: var.$opacity-blue-40;
  }
}

.background-button-translucent-neutral {
  background-color: var.$opacity-black-05;

  [data-theme='dark'] & {
    background-color: var.$opacity-white-05;
  }
}

.background-button-translucent-neutralhover {
  background-color: var.$opacity-black-10;

  [data-theme='dark'] & {
    background-color: var.$opacity-white-10;
  }
}

.background-button-translucent-destructive {
  background-color: var.$opacity-red-30;

  [data-theme='dark'] & {
    background-color: var.$opacity-red-30;
  }
}

.background-button-translucent-destructivelight {
  background-color: var.$opacity-red-10;

  [data-theme='dark'] & {
    background-color: var.$opacity-red-10;
  }
}

.background-button-translucent-destructivehover {
  background-color: var.$opacity-red-40;

  [data-theme='dark'] & {
    background-color: var.$opacity-red-40;
  }
}

.background-button-translucent-success {
  background-color: var.$opacity-green-30;

  [data-theme='dark'] & {
    background-color: var.$opacity-green-30;
  }
}

.background-button-translucent-successlight {
  background-color: var.$opacity-green-10;

  [data-theme='dark'] & {
    background-color: var.$opacity-green-10;
  }
}

.background-button-translucent-successhover {
  background-color: var.$opacity-green-40;

  [data-theme='dark'] & {
    background-color: var.$opacity-green-40;
  }
}

.background-button-translucent-purple {
  background-color: var.$opacity-purple-30;

  [data-theme='dark'] & {
    background-color: var.$opacity-purple-30;
  }
}

.background-button-translucent-purplehover {
  background-color: var.$opacity-purple-40;

  [data-theme='dark'] & {
    background-color: var.$opacity-purple-40;
  }
}

.background-skeleton-default {
  background-color: var.$opacity-black-05;

  [data-theme='dark'] & {
    background-color: var.$opacity-white-03;
  }
}

.background-skeleton-wave {
  background-color: var.$opacity-black-10;

  [data-theme='dark'] & {
    background-color: var.$opacity-white-05;
  }
}

.background-tab-active {
  background-color: var.$color-aero-200;

  [data-theme='dark'] & {
    background-color: var.$color-aero-850;
  }
}

.background-tab-open {
  background-color: var.$color-aero-100;

  [data-theme='dark'] & {
    background-color: var.$color-aero-850;
  }
}

.background-tab-hover {
  background-color: var.$color-aero-100;

  [data-theme='dark'] & {
    background-color: var.$color-aero-950;
  }
}

.background-progress-empty {
  background-color: var.$color-slate-50;

  [data-theme='dark'] & {
    background-color: var.$color-aero-800;
  }
}

.background-progress-default {
  background-color: var.$color-slate-400;

  [data-theme='dark'] & {
    background-color: var.$color-aero-600;
  }
}

.background-progress-positive {
  background-color: var.$color-green-700;

  [data-theme='dark'] & {
    background-color: var.$color-green-700;
  }
}

.background-progress-neutral {
  background-color: var.$color-blue-400;

  [data-theme='dark'] & {
    background-color: var.$color-blue-500;
  }
}

.background-progress-warning {
  background-color: var.$color-yellow-500;

  [data-theme='dark'] & {
    background-color: var.$color-yellow-600;
  }
}

.background-progress-negative {
  background-color: var.$color-red-500;

  [data-theme='dark'] & {
    background-color: var.$color-red-600;
  }
}

.border-buttongroup-default {
  border-color: var.$color-aero-300;

  [data-theme='dark'] & {
    border-color: var.$color-aero-800;
  }
}

.border-dropdown-default {
  border-color: var.$color-neutral-250;

  [data-theme='dark'] & {
    border-color: var.$color-aero-700;
  }
}

.border-surface-light {
  border-color: var.$color-neutral-300;

  [data-theme='dark'] & {
    border-color: var.$color-aero-600;
  }
}

.border-surface-xlight {
  border-color: var.$color-neutral-250;

  [data-theme='dark'] & {
    border-color: var.$color-aero-700;
  }
}

.border-surface-xxlight {
  border-color: var.$color-neutral-200;

  [data-theme='dark'] & {
    border-color: var.$color-aero-800;
  }
}

.border-surface-xxxlight {
  border-color: var.$color-neutral-200;

  [data-theme='dark'] & {
    border-color: var.$color-aero-875;
  }
}

.border-checkbox-default {
  border-color: var.$color-neutral-400;

  [data-theme='dark'] & {
    border-color: var.$color-aero-400;
  }
}

.border-checkbox-light {
  border-color: var.$color-neutral-300;

  [data-theme='dark'] & {
    border-color: var.$color-aero-500;
  }
}

.border-checkbox-selected {
  border-color: var.$color-blue-500;

  [data-theme='dark'] & {
    border-color: var.$color-blue-500;
  }
}

.border-badge-blue {
  border-color: var.$color-blue-600;

  [data-theme='dark'] & {
    border-color: var.$color-blue-600;
  }
}

.border-badge-navy {
  border-color: var.$color-navy-700;

  [data-theme='dark'] & {
    border-color: var.$color-navy-700;
  }
}

.border-badge-slate {
  border-color: var.$color-slate-400;

  [data-theme='dark'] & {
    border-color: var.$color-slate-400;
  }
}

.border-badge-green {
  border-color: var.$color-green-800;

  [data-theme='dark'] & {
    border-color: var.$color-green-800;
  }
}

.border-badge-mint {
  border-color: var.$color-mint-600;

  [data-theme='dark'] & {
    border-color: var.$color-mint-600;
  }
}

.border-badge-yellow {
  border-color: var.$color-yellow-600;

  [data-theme='dark'] & {
    border-color: var.$color-yellow-600;
  }
}

.border-badge-orange {
  border-color: var.$color-orange-500;

  [data-theme='dark'] & {
    border-color: var.$color-orange-500;
  }
}

.border-badge-pink {
  border-color: var.$color-pink-400;

  [data-theme='dark'] & {
    border-color: var.$color-pink-400;
  }
}

.border-badge-red {
  border-color: var.$color-red-600;

  [data-theme='dark'] & {
    border-color: var.$color-red-600;
  }
}

.border-badge-purple {
  border-color: var.$color-purple-400;

  [data-theme='dark'] & {
    border-color: var.$color-purple-400;
  }
}

.border-badge-grey {
  border-color: var.$color-grey-300;

  [data-theme='dark'] & {
    border-color: var.$color-grey-300;
  }
}

.border-badge-black {
  border-color: var.$color-grey-900;

  [data-theme='dark'] & {
    border-color: var.$color-grey-900;
  }
}

.border-badge-white {
  border-color: var.$color-white-00;

  [data-theme='dark'] & {
    border-color: var.$color-white-00;
  }
}

.border-badge-aero {
  border-color: var.$color-aero-300;

  [data-theme='dark'] & {
    border-color: var.$color-aero-700;
  }
}

.border-badge-low-contrast {
  border-color: var.$color-neutral-75;

  [data-theme='dark'] & {
    border-color: var.$color-aero-700;
  }
}

.border-button-primary-default {
  border-color: var.$color-blue-600;

  [data-theme='dark'] & {
    border-color: var.$color-blue-600;
  }
}

.border-button-primary-hover {
  border-color: var.$color-blue-600;

  [data-theme='dark'] & {
    border-color: var.$color-blue-600;
  }
}

.border-button-primary-active {
  border-color: var.$color-blue-400;

  [data-theme='dark'] & {
    border-color: var.$color-blue-400;
  }
}

.border-button-secondary-default {
  border-color: var.$color-blue-100;

  [data-theme='dark'] & {
    border-color: var.$color-navy-900;
  }
}

.border-button-secondary-hover {
  border-color: var.$color-blue-100;

  [data-theme='dark'] & {
    border-color: var.$color-navy-800;
  }
}

.border-button-secondary-active {
  border-color: var.$color-blue-200;

  [data-theme='dark'] & {
    border-color: var.$color-navy-700;
  }
}

.border-button-outline-default {
  border-color: var.$color-blue-400;

  [data-theme='dark'] & {
    border-color: var.$color-aero-600;
  }
}

.border-button-outline-hover {
  border-color: var.$color-blue-700;

  [data-theme='dark'] & {
    border-color: var.$color-aero-500;
  }
}

.border-button-link-active {
  border-color: var.$color-blue-100;

  [data-theme='dark'] & {
    border-color: var.$color-aero-700;
  }
}

.border-button-destructive-default {
  border-color: var.$color-red-600;

  [data-theme='dark'] & {
    border-color: var.$color-red-600;
  }
}

.border-button-destructive-hover {
  border-color: var.$color-red-700;

  [data-theme='dark'] & {
    border-color: var.$color-red-400;
  }
}

.border-button-destructive-active {
  border-color: var.$color-red-400;

  [data-theme='dark'] & {
    border-color: var.$color-red-400;
  }
}

.border-button-outline-neutral {
  border-color: var.$color-neutral-300;

  [data-theme='dark'] & {
    border-color: var.$color-neutral-400;
  }
}

.border-button-outline-neutralhover {
  border-color: var.$color-neutral-400;

  [data-theme='dark'] & {
    border-color: var.$color-neutral-300;
  }
}

.border-button-success-default {
  border-color: var.$color-green-800;

  [data-theme='dark'] & {
    border-color: var.$color-green-800;
  }
}

.border-controller-default {
  border-color: var.$color-neutral-400;

  [data-theme='dark'] & {
    border-color: var.$color-neutral-00;
  }
}

.border-controller-light {
  border-color: var.$color-neutral-300;

  [data-theme='dark'] & {
    border-color: var.$color-neutral-300;
  }
}

.border-controller-selected {
  border-color: var.$color-blue-500;

  [data-theme='dark'] & {
    border-color: var.$color-blue-500;
  }
}

.border-input-default {
  border-color: var.$color-neutral-300;

  [data-theme='dark'] & {
    border-color: var.$color-aero-700;
  }
}

.border-button-success-hover {
  border-color: var.$color-green-800;

  [data-theme='dark'] & {
    border-color: var.$color-green-700;
  }
}

.border-input-hover {
  border-color: var.$color-neutral-400;

  [data-theme='dark'] & {
    border-color: var.$color-aero-600;
  }
}

.border-button-success-active {
  border-color: var.$color-green-600;

  [data-theme='dark'] & {
    border-color: var.$color-green-600;
  }
}

.border-input-active {
  border-color: var.$color-neutral-400;

  [data-theme='dark'] & {
    border-color: var.$color-aero-500;
  }
}

.border-input-error {
  border-color: var.$color-red-600 !important;

  [data-theme='dark'] & {
    border-color: var.$color-red-400 !important;
  }
}

.border-selectioncard-default {
  border-color: var.$color-neutral-300;

  [data-theme='dark'] & {
    border-color: var.$color-aero-800;
  }
}

.border-selectioncard-hover {
  border-color: var.$color-blue-500;

  [data-theme='dark'] & {
    border-color: var.$color-aero-600;
  }
}

.border-selectioncard-active {
  border-color: var.$color-blue-500;

  [data-theme='dark'] & {
    border-color: var.$color-aero-600;
  }
}

.border-stepper-stepper {
  border-color: var.$color-neutral-00;

  [data-theme='dark'] & {
    border-color: var.$color-aero-900;
  }
}

.border-stepper-icon {
  border-color: var.$color-neutral-200;

  [data-theme='dark'] & {
    border-color: var.$color-aero-700;
  }
}

.border-pagination-default {
  border-color: var.$opacity-white-00;

  [data-theme='dark'] & {
    border-color: var.$opacity-white-00;
  }
}

.border-pagination-hover {
  border-color: var.$color-blue-500;

  [data-theme='dark'] & {
    border-color: var.$color-aero-700;
  }
}

.border-pagination-active {
  border-color: var.$color-blue-700;

  [data-theme='dark'] & {
    border-color: var.$color-aero-600;
  }
}

.border-pagination-current {
  border-color: var.$color-blue-100;

  [data-theme='dark'] & {
    border-color: var.$color-aero-800;
  }
}

.border-card-default {
  border-color: var.$color-neutral-200;

  [data-theme='dark'] & {
    border-color: var.$color-aero-800;
  }
}

.border-card-hover {
  border-color: var.$color-neutral-400;

  [data-theme='dark'] & {
    border-color: var.$color-aero-400;
  }
}

.border-button-translucent-default {
  border-color: var.$color-blue-600;

  [data-theme='dark'] & {
    border-color: var.$color-aero-400;
  }
}

.border-button-translucent-hover {
  border-color: var.$color-blue-700;

  [data-theme='dark'] & {
    border-color: var.$color-blue-500;
  }
}

.border-button-translucent-neutral {
  border-color: var.$color-neutral-300;

  [data-theme='dark'] & {
    border-color: var.$color-neutral-400;
  }
}

.border-button-translucent-neutralhover {
  border-color: var.$color-neutral-400;

  [data-theme='dark'] & {
    border-color: var.$color-neutral-300;
  }
}

.border-button-purple-default {
  border-color: var.$color-purple-400;

  [data-theme='dark'] & {
    border-color: var.$color-purple-300;
  }
}

.border-button-purple-hover {
  border-color: var.$color-purple-700;

  [data-theme='dark'] & {
    border-color: var.$color-purple-200;
  }
}

.border-button-purple-active {
  border-color: var.$color-purple-600;

  [data-theme='dark'] & {
    border-color: var.$color-purple-600;
  }
}

.color-surface-page {
  color: var.$color-neutral-00;
  fill: var.$color-neutral-00;

  [data-theme='dark'] & {
    color: var.$color-aero-1000;
    fill: var.$color-aero-1000;
  }
}

.color-surface-pageinverted {
  color: var.$color-aero-1000;
  fill: var.$color-aero-1000;

  [data-theme='dark'] & {
    color: var.$color-neutral-00;
    fill: var.$color-neutral-00;
  }
}

.color-surface-default {
  color: var.$color-neutral-75;
  fill: var.$color-neutral-75;

  [data-theme='dark'] & {
    color: var.$color-aero-700;
    fill: var.$color-aero-700;
  }
}

.color-surface-light {
  color: var.$color-neutral-75;
  fill: var.$color-neutral-75;

  [data-theme='dark'] & {
    color: var.$color-aero-800;
    fill: var.$color-aero-800;
  }
}

.color-surface-xlight {
  color: var.$color-neutral-50;
  fill: var.$color-neutral-50;

  [data-theme='dark'] & {
    color: var.$color-aero-850;
    fill: var.$color-aero-850;
  }
}

.color-surface-xxlight {
  color: var.$color-neutral-00;
  fill: var.$color-neutral-00;

  [data-theme='dark'] & {
    color: var.$color-aero-900;
    fill: var.$color-aero-900;
  }
}