:root,
:host,
cbt-modal {
  /* var.fds */
  --fds-header: #ffffff;
  --fds-header-interaction-medium: #f7f7f7;
  --fds-header-interaction-high: #f0f0f0;
  --fds-on-header: rgba(0, 0, 0, 0.6);
  --fds-primary: #ff6600;
  --fds-primary-interaction-low: #fff0e7;
  --fds-primary-interaction-medium: #ff8533;
  --fds-on-primary: #ffffff;
  --fds-secondary: #40b840;
  --fds-secondary-interaction-low: #ecf7ec;
  --fds-secondary-interaction-medium: #6bc96b;
  --fds-on-secondary: #ffffff;
  --fds-tertiary: #5943b6;
  --fds-tertiary-interaction-low: #f0f1ff;
  --fds-tertiary-interaction-medium: #746acb;
  --fds-on-tertiary: #ffffff;
  --fds-success: #00aa41;
  --fds-success-shade: linear-gradient(135deg, #00aa41 0%, #93c166 100%);
  --fds-success-surface: #d8f2d7;
  --fds-on-success: #000000de;
  --fds-on-success-alternate: #ffffff;
  --fds-alert: #f8a127;
  --fds-alert-shade: linear-gradient(135deg, #ea7714 0%, #f9bc6f 100%);
  --fds-alert-surface: #fce7d7;
  --fds-on-alert: #000000de;
  --fds-on-alert-alternate: #ffffff;
  --fds-info: #608df2;
  --fds-info-shade: linear-gradient(135deg, #608df2 0%, #64b0f6 100%);
  --fds-info-surface: #e3e8ff;
  --fds-on-info: #000000de;
  --fds-on-info-alternate: #ffffff;
  --fds-error: #f9554d;
  --fds-error-shade: linear-gradient(135deg, #f9554d 0%, #e46b70 100%);
  --fds-error-surface: #ffe0e8;
  --fds-on-error: #000000de;
  --fds-on-error-alternate: #ffffff;
  --fds-background: #ffffff;
  --fds-on-background: #000000de;
  --fds-surface: #f7f7f7;
  --fds-surface-variant: #ffffff;
  --fds-surface-variant-2: #f4f4f5;
  --fds-surface-variant-3: #f0f0f0;
  --fds-overlay: #00000099;
  --fds-surface-accent: #fff0e7;
  --fds-on-surface-hi: #000000de;
  --fds-on-surface-m: rgba(0, 0, 0, 0.6);
  --fds-on-surface-low: #00000061;
  --fds-on-surface-ulow: #0000001a;
  --fds-on-surface-color: #ff6600;
  --fds-alternate-surface: #2e2f3c;
  --fds-alternate-surface-variant: #494b56;
  --fds-alternate-surface-variant-2: #373944;
  --fds-alternate-surface-variant-3: #40424d;
  --fds-alternate-surface-nav: #2e2f3c;
  --fds-alternate-overlay: linear-gradient(0deg, rgba(46, 47, 60, 1) 0%, rgba(46, 47, 60, 0) 100%);
  --fds-alternate-overlay-variant: linear-gradient(
    90deg,
    rgba(46, 47, 60, 1) 0%,
    rgba(46, 47, 60, 0) 100%
  );
  --fds-on-alternate-surface-hi: #ffffff;
  --fds-on-alternate-surface-m: #ffffffde;
  --fds-on-alternate-surface-low: #ffffff99;
  --fds-on-alternate-surface-ulow: rgba(255, 255, 255, 0.15);
  --fds-on-alternate-surface-color: #ff6600;
  --fds-on-alternate-surface-nav-color: #fd9455;
  --fds-surface-nav: #f7f7f7;
  --fds-surface-nav-shade: linear-gradient(0deg, #f4f4f5 0%, #ffffff 100%);
  --fds-surface-nav-variant: #ffffff;
  --fds-on-surface-nav-hi: #000000de;
  --fds-on-surface-nav-m: rgba(0, 0, 0, 0.6);
  --fds-on-surface-nav-low: #00000061;
  --fds-on-surface-nav-color: #fd9455;
  --fds-alternate-surface-nav-shade: #2e2f3c;
  --fds-surface-nav-item-shade: linear-gradient(0deg, #f4f4f5 0%, #ffffff 100%);
  --fds-alternate-surface-nav-item-shade: #2e2f3c;
  --fds-overlay-variant: #00000061;

  /* var.btn */
  --fds-btn-accent: #40b840;
  --fds-btn-accent-shade: linear-gradient(135deg, #6bc96b 0%, #86cf86 100%);
  --fds-btn-accent-hover: #58c058;
  --fds-btn-accent-active: #6bc96b;
  --fds-on-btn-accent: #ffffffde;
  --fds-btn-default: #ff6600;
  --fds-btn-default-shade: linear-gradient(135deg, #ff8533 0%, #fd9455 100%);
  --fds-btn-default-hover: #ff7520;
  --fds-btn-default-active: #ff8533;
  --fds-on-btn-default: #ffffffde;
  --fds-btn-alternate-accent: #ff6600;
  --fds-btn-alternate-accent-hover: #ff7520;
  --fds-btn-alternate-accent-active: #ff8533;
  --fds-on-btn-alternate-accent: #ffffff;
  --fds-btn-on-surface-hover: #00000003;
  --fds-btn-on-surface-active: #0000001a;
  --fds-btn-on-alternate-surface-hover: rgba(255, 255, 255, 0.15);
  --fds-btn-on-alternate-surface-active: rgba(255, 255, 255, 0.3);
  --fds-btn-on-alternate-surface-default: #ffffff;
  --fds-btn-on-header-default: #ff6600;
  --fds-btn-on-surface-default: #ff6600;

  /* cbt-button component */
  --cbt-button-primary-color-hover-outline: rgba(255 102 0 / 8%);
  --cbt-button-secondary-color-hover-outline: rgba(64 184 64 / 8%);

  /* fds-border-radius */
  --fds-border-radius-btn-default: 8px;
  --fds-border-radius-btn-alternate: 100px;
  --fds-border-radius-container-default: 12px;
  --fds-border-radius-input-default: 8px;
  --fds-border-radius-input-alternate: 100px;

  /* fds.elevation */
  --fds-elevation-on-surface-01: 6px 7px 3px 0px #00000000, 4px 4px 2px 0px #00000003,
    2px 2px 2px 0px #0000000d, 1px 1px 1px 0px #00000017, 0px 0px 1px 0px #0000001a;
  --fds-elevation-on-surface-02: 23px 18px 8px 0px #00000000, 15px 12px 8px 0px #00000003,
    8px 7px 6px 0px #0000000d, 4px 3px 5px 0px #00000017, 1px 1px 3px 0px #0000001a;
  --fds-elevation-on-surface-03: 16px 40px 12px 0px #00000000, 10px 25px 11px 0px #00000003,
    6px 14px 9px 0px #0000000a, 3px 6px 7px 0px #00000012, 1px 2px 4px 0px #00000014;
  --fds-elevation-on-alternate-surface-01: 19px 15px 7px 0px #00000000, 12px 10px 6px 0px #00000008,
    7px 5px 5px 0px #0000001a, 3px 2px 4px 0px #0000002b, 1px 1px 2px 0px #00000033;
  --fds-elevation-on-alternate-surface-02: 20px 19px 8px 0px #00000000, 13px 12px 7px 0px #00000008,
    7px 7px 6px 0px #0000001a, 3px 3px 4px 0px #0000002b, 1px 1px 2px 0px #00000033;
  --fds-elevation-on-alternate-surface-03: 21px 40px 13px 0px #00000000,
    13px 26px 12px 0px #00000008, 7px 14px 10px 0px #0000001a, 3px 6px 7px 0px #0000002b,
    1px 2px 4px 0px #00000033;

  /* Font Families */
  --cbt-primary-font-family: 'Open Sans', system-ui, sans-serif;
  --cbt-secondary-font-family: 'Betsson Sans', system-ui, sans-serif;

  /* Promotional Calendar */
  --cbt-promotional-calendar-neon-color-default: var(--fds-surface-variant);
  --cbt-promotional-calendar-neon-background-default: linear-gradient(
    to top,
    #ebebeb,
    var(--fds-surface-variant)
  );
  --cbt-promotional-calendar-neon-scroller-background: linear-gradient(
    to bottom,
    #f5f5f5,
    #d6d6d640
  );
}

:root.fds__dark__theme,
:host([fds='dark']),
:host([fds='dark']) cbt-modal {
  /* var.fds */
  --fds-header: #121422;
  --fds-header-interaction-medium: #1b1d2b;
  --fds-header-interaction-high: #07080f;
  --fds-on-header: #ffffffde;
  --fds-primary: #ff6600;
  --fds-primary-interaction-low: #fff0e7;
  --fds-primary-interaction-medium: #ff8533;
  --fds-on-primary: #ffffff;
  --fds-secondary: #5943b6;
  --fds-secondary-interaction-low: #f0f1ff;
  --fds-secondary-interaction-medium: #746acb;
  --fds-on-secondary: #ffffff;
  --fds-tertiary: #2e3541;
  --fds-tertiary-interaction-low: #eaebec;
  --fds-tertiary-interaction-medium: #434954;
  --fds-on-tertiary: #ffffff;
  --fds-success: #00aa41;
  --fds-success-shade: linear-gradient(135deg, #00aa41 0%, #93c166 100%);
  --fds-success-surface: #335315;
  --fds-on-success: #ffffff;
  --fds-on-success-alternate: #000000de;
  --fds-alert: #f9b356;
  --fds-alert-shade: linear-gradient(135deg, #ea7714 0%, #f9bc6f 100%);
  --fds-alert-surface: #7b511b;
  --fds-on-alert: #ffffff;
  --fds-on-alert-alternate: #000000de;
  --fds-info: #43a1f7;
  --fds-info-shade: linear-gradient(135deg, #608df2 0%, #64b0f6 100%);
  --fds-info-surface: #12477a;
  --fds-on-info: #ffffff;
  --fds-on-info-alternate: #000000de;
  --fds-error: #f9554d;
  --fds-error-shade: linear-gradient(135deg, #f9554d 0%, #e46b70 100%);
  --fds-error-surface: #6d161b;
  --fds-on-error: #ffffff;
  --fds-on-error-alternate: #000000de;
  --fds-background: #121422;
  --fds-on-background: #ffffffde;
  --fds-surface: #1b1d2b;
  --fds-surface-variant: #121422;
  --fds-surface-variant-2: #272a3d;
  --fds-surface-variant-3: #232637;
  --fds-overlay: #00000099;
  --fds-surface-accent: #272a3d;
  --fds-on-surface-hi: #ffffffde;
  --fds-on-surface-m: #ffffffbd;
  --fds-on-surface-low: #ffffff7a;
  --fds-on-surface-ulow: rgba(255, 255, 255, 0.15);
  --fds-on-surface-color: #ff8533;
  --fds-alternate-surface: #0f101d;
  --fds-alternate-surface-variant: #121422;
  --fds-alternate-surface-variant-2: #171a28;
  --fds-alternate-surface-variant-3: #1b1d2b;
  --fds-alternate-surface-nav: #0f101d;
  --fds-alternate-overlay: linear-gradient(0deg, rgba(15, 16, 29, 1) 0%, rgba(15, 16, 29, 0) 100%);
  --fds-alternate-overlay-variant: linear-gradient(
    90deg,
    rgba(15, 16, 29, 1) 0%,
    rgba(15, 16, 29, 0) 100%
  );
  --fds-on-alternate-surface-hi: #ffffff;
  --fds-on-alternate-surface-m: #ffffffde;
  --fds-on-alternate-surface-low: #ffffffbd;
  --fds-on-alternate-surface-ulow: rgba(255, 255, 255, 0.15);
  --fds-on-alternate-surface-color: #ff8533;
  --fds-on-alternate-surface-nav-color: #ff8533;
  --fds-surface-nav: #0f101d;
  --fds-surface-nav-shade: linear-gradient(0deg, #f4f4f5 0%, #ffffff 100%);
  --fds-surface-nav-variant: #0b0c16;
  --fds-on-surface-nav-hi: #ffffffde;
  --fds-on-surface-nav-m: #ffffffbd;
  --fds-on-surface-nav-low: #ffffff7a;
  --fds-on-surface-nav-color: #ff8533;
  --fds-alternate-surface-nav-shade: #121422;
  --fds-surface-nav-item-shade: linear-gradient(0deg, #f4f4f5 0%, #ffffff 100%);
  --fds-alternate-surface-nav-item-shade: #121422;
  --fds-overlay-variant: #00000061;

  /* var.btn */
  --fds-btn-accent: #ff6600;
  --fds-btn-accent-shade: linear-gradient(135deg, #ff8533 0%, #fd9455 100%);
  --fds-btn-accent-hover: #ff7520;
  --fds-btn-accent-active: #ff8533;
  --fds-on-btn-accent: #ffffff;
  --fds-btn-default: #5943b6;
  --fds-btn-default-shade: linear-gradient(135deg, #746acb 0%, #8a85d7 100%);
  --fds-btn-default-hover: #6757c1;
  --fds-btn-default-active: #746acb;
  --fds-on-btn-default: #ffffffde;
  --fds-btn-alternate-accent: #ff6600;
  --fds-btn-alternate-accent-hover: #ff7520;
  --fds-btn-alternate-accent-active: #ff8533;
  --fds-on-btn-alternate-accent: #ffffff;
  --fds-btn-on-surface-hover: rgba(255, 255, 255, 0.08);
  --fds-btn-on-surface-active: rgba(255, 255, 255, 0.15);
  --fds-btn-on-alternate-surface-hover: rgba(255, 255, 255, 0.15);
  --fds-btn-on-alternate-surface-active: rgba(255, 255, 255, 0.3);
  --fds-btn-on-alternate-surface-default: #ffffff;
  --fds-btn-on-header-default: #ffffffde;
  --fds-btn-on-surface-default: #fff0e7;

  /* cbt-button component */
  --cbt-button-primary-color-hover-outline: rgba(89 67 182 / 8%);
  --cbt-button-secondary-color-hover-outline: rgba(255 102 0 / 8%);

  /* fds-border-radius */
  --fds-border-radius-btn-default: 8px;
  --fds-border-radius-btn-alternate: 100px;
  --fds-border-radius-container-default: 12px;
  --fds-border-radius-input-default: 8px;
  --fds-border-radius-input-alternate: 100px;

  /* fds.elevation */
  --fds-elevation-on-surface-01: 6px 7px 3px 0px #00000000, 4px 4px 2px 0px #00000003,
    2px 2px 2px 0px #0000000d, 1px 1px 1px 0px #00000017, 0px 0px 1px 0px #0000001a;
  --fds-elevation-on-surface-02: 23px 18px 8px 0px #00000000, 15px 12px 8px 0px #00000003,
    8px 7px 6px 0px #0000000d, 4px 3px 5px 0px #00000017, 1px 1px 3px 0px #0000001a;
  --fds-elevation-on-surface-03: 16px 40px 12px 0px #00000000, 10px 25px 11px 0px #00000003,
    6px 14px 9px 0px #0000000a, 3px 6px 7px 0px #00000012, 1px 2px 4px 0px #00000014;
  --fds-elevation-on-alternate-surface-01: 19px 15px 7px 0px #00000000, 12px 10px 6px 0px #00000008,
    7px 5px 5px 0px #0000001a, 3px 2px 4px 0px #0000002b, 1px 1px 2px 0px #00000033;
  --fds-elevation-on-alternate-surface-02: 20px 19px 8px 0px #00000000, 13px 12px 7px 0px #00000008,
    7px 7px 6px 0px #0000001a, 3px 3px 4px 0px #0000002b, 1px 1px 2px 0px #00000033;
  --fds-elevation-on-alternate-surface-03: 21px 40px 13px 0px #00000000,
    13px 26px 12px 0px #00000008, 7px 14px 10px 0px #0000001a, 3px 6px 7px 0px #0000002b,
    1px 2px 4px 0px #00000033;

  /* Promotional Calendar */
  --cbt-promotional-calendar-neon-color-default: #2e2f3d;
  --cbt-promotional-calendar-neon-background-default: linear-gradient(
    to bottom,
    #2e2f3c,
    #2e2f3c40
  );
  --cbt-promotional-calendar-neon-scroller-background: linear-gradient(
    to bottom,
    #31323f,
    #2e2f3c40
  );
}