@import 'portal-styles.css';

:root {
  --light-company-logo-admin: url('/assets/images/logo-ujet-white.svg');
  --light-company-logo-agent: url('/assets/images/logo-ujet-white.svg');
  --dark-company-logo-admin: url('/assets/images/logo-ujet-blue.svg');
  --dark-company-logo-agent: url('/assets/images/logo-ujet-blue.svg');
  --gray-company-logo-agent: url('/assets/images/logo-ujet-gray.svg');
  --gray-company-logo-agent-email: url('/assets/images/logo-ujet-gray.svg');

  /* ------------------------------------------------------
    WHEN ADDING NEW COLORS -
      A numerical suffix comes with certain expectations of appropriate use.
      00: Contrast ratio 1.01
          Background for text colors 70 through 100.
          Borders, shadows.
      10: Contrast ratio 1.1
          Background for text colors 70 through 100.
          Borders, shadows.
      20: Contrast ratio 1.2
          Backgrounds for text colors 80 through 100.
          Borders, shadows.
      30: Contrast ratio 1.5.
          Backgrounds for text colors 90 through 100.
          Borders, shadows.
      40: Contrast ratio 1.88.
          Backgrounds for text colors 100+.
          Borders, shadows.
      50: Contrast ratio 2.55
          Interactive elements without text, such as icon buttons.
          Borders, shadows.
      60: Contrast rato 3.15
          Text colors against white or black background only.
      70: Contrast ratio 4.5.
          Text colors against backgrounds 00 through 10.
      80: Contrast ratio 8.84.
          Text use on 00 through 20.
      90: Contrast ratio 11.29.
          Text use on 00 through 30.
     100: Contrast ratio 15.7:1.
          Text use on 00 through 40.
      Anything labeled as a specific number must have that contrast ratio.
      e.g.: blue-10 and green-10 must both have a contrast ratio of 1.2:1, period.
      When adding a new gradient, choose a number that is appropriately sorted.
      Should you choose to designate your own contrast ratios, please be advised:
      The following pairs MUST produce a contrast ratio of 3:1 or better:
      * -10 through 60 on -90 through -100.
      * -50 through -100 on white/00.
      The following pairs must produce a contrast ratio of 4.5:1 or better:
      * -60 through 90 on white/00
      * -white/00 through 40 on -100
      * white/00 through -10 on -80 through 100
    ------------------------------------------------------ */

  /* ------------------------------------------------------
    THEME FONTS
    ------------------------------------------------------ */

  /* ONLY FOR THIS FILE */
  --font-family-header: 'Noto Sans', sans-serif;
  --font-family-body: 'Noto Sans', sans-serif;

  /* USE THESE IN APP */
  --company-font-header: var(--font-family-header);
  --company-font-body: var(--font-family-body);

  /* ------------------------------------------------------
    THEME COLORS
      The colors defined below are referred to in the color tokens for convenience.
      They are NOT used throughout the app, only here, to create the theme, and thus
      may be replaced or renamed.
    ------------------------------------------------------ */

  /* black */
  --iris-black: #222222;
  /* whites */
  --iris-white: #fff;

  /* grays */
  --iris-gray-10: #f3f3f3;
  --iris-gray-20: #eaeaea;
  --iris-gray-30: #d2d2d2;
  --iris-gray-40: #bcbcbc;
  --iris-gray-50: #a1a1a1;
  --iris-gray-60: #919191;
  --iris-gray-70: #767775;
  --iris-gray-80: #656662;
  --iris-gray-90: #4b4a49;
  --iris-gray-100: #3a3b36;
  --iris-gray-110: #232421;

  /** adapters need an alternate gray palette **/
  --iris-darker-gray-10: var(--iris-gray-20);
  --iris-darker-gray-20: var(--iris-gray-30);
  --iris-darker-gray-30: var(--iris-gray-40);
  --iris-darker-gray-40: var(--iris-gray-50);
  --iris-darker-gray-50: var(--iris-gray-60);
  --iris-darker-gray-60: var(--iris-gray-70);
  --iris-darker-gray-70: var(--iris-gray-80);
  --iris-darker-gray-80: var(--iris-gray-90);
  --iris-darker-gray-90: var(--iris-gray-100);
  --iris-darker-gray-100: var(--iris-gray-110);
  --iris-darker-gray-110: var(--iris-black);

  --iris-slate-blue-10: #f1f4f8;
  --iris-slate-blue-20: #e5ebf0;
  --iris-slate-blue-30: #c9d4de;
  --iris-slate-blue-40: #adbfcf;
  --iris-slate-blue-50: #8da4b9;
  --iris-slate-blue-60: #7994ad;
  --iris-slate-blue-70: #5b7a95;
  --iris-slate-blue-80: #4f6881;
  --iris-slate-blue-90: #394c5f;
  --iris-slate-blue-100: #303c45;
  --iris-slate-blue-110: #1b252b;

  --iris-brand-blue-10: #edf4fd;
  --iris-brand-blue-20: #dcecf9;
  --iris-brand-blue-30: #b7d7f0;
  --iris-brand-blue-40: #91c3e7;
  --iris-brand-blue-50: #64a8db;
  --iris-brand-blue-60: #3498db;
  --iris-brand-blue-70: #247bbf;
  --iris-brand-blue-80: #0a68b1;
  --iris-brand-blue-90: #0c4a8c;
  --iris-brand-blue-100: #043c6a;
  --iris-brand-blue-110: #03224f;

  --iris-azure-10: #e5f7ff;
  --iris-azure-20: #ccefff;
  --iris-azure-30: #99dbff;
  --iris-azure-40: #61c7ff;
  --iris-azure-50: #00a9ff;
  --iris-azure-60: #0094ff;
  --iris-azure-70: #0271f3;
  --iris-azure-80: #0062cd;
  --iris-azure-90: #0238c5;
  --iris-azure-100: #002e9a;
  --iris-azure-110: #050e79;

  --iris-violet-10: #f2f3f8;
  --iris-violet-20: #e8e9f3;
  --iris-violet-30: #ced1e8;
  --iris-violet-40: #b8badf;
  --iris-violet-50: #9a9dd4;
  --iris-violet-60: #888bd0;
  --iris-violet-70: #6e6ec1;
  --iris-violet-80: #5a5cb5;
  --iris-violet-90: #3e428e;
  --iris-violet-100: #30356e;
  --iris-violet-110: #202042;

  --iris-purple-10: #f7f3f4;
  --iris-purple-20: #efe7e9;
  --iris-purple-30: #dacfdd;
  --iris-purple-40: #cab7cd;
  --iris-purple-50: #b099be;
  --iris-purple-60: #a487ae;
  --iris-purple-70: #8f699b;
  --iris-purple-80: #8a5090;
  --iris-purple-90: #69376e;
  --iris-purple-100: #59265e;
  --iris-purple-110: #34193a;

  --iris-wine-10: #f8f2f6;
  --iris-wine-20: #f3e7ee;
  --iris-wine-30: #e6cbd9;
  --iris-wine-40: #d6b3c8;
  --iris-wine-50: #c593ae;
  --iris-wine-60: #be7e9d;
  --iris-wine-70: #ac5d86;
  --iris-wine-80: #974e6e;
  --iris-wine-90: #753647;
  --iris-wine-100: #642536;
  --iris-wine-110: #421320;

  --iris-red-10: #fff0f0;
  --iris-red-20: #fee4e3;
  --iris-red-30: #f9c6c7;
  --iris-red-40: #f6a9a9;
  --iris-red-50: #f57e7e;
  --iris-red-60: #f16262;
  --iris-red-70: #db3846;
  --iris-red-80: #c61c3c;
  --iris-red-90: #92162d;
  --iris-red-100: #760f1f;
  --iris-red-110: #4b0816;

  --iris-orange-10: #fbf1ef;
  --iris-orange-20: #f8e7e0;
  --iris-orange-30: #f5cab2;
  --iris-orange-40: #f1ae8a;
  --iris-orange-50: #f58155;
  --iris-orange-60: #f0663d;
  --iris-orange-70: #d2471a;
  --iris-orange-80: #b53c1c;
  --iris-orange-90: #862b14;
  --iris-orange-100: #6a230c;
  --iris-orange-110: #441a01;

  --iris-yellow-10: #fcf3de;
  --iris-yellow-20: #f8e9c4;
  --iris-yellow-30: #f5ce7a;
  --iris-yellow-40: #f0b234;
  --iris-yellow-50: #d1970a;
  --iris-yellow-60: #b78a08;
  --iris-yellow-70: #937205;
  --iris-yellow-80: #82600f;
  --iris-yellow-90: #604603;
  --iris-yellow-100: #503512;
  --iris-yellow-110: #2e2201;

  --iris-lime-10: #ebf8d8;
  --iris-lime-20: #dcf2bb;
  --iris-lime-30: #afe26c;
  --iris-lime-40: #90cf32;
  --iris-lime-50: #7bb12c;
  --iris-lime-60: #6f9f28;
  --iris-lime-70: #5b8221;
  --iris-lime-80: #497026;
  --iris-lime-90: #365213;
  --iris-lime-100: #2a4109;
  --iris-lime-110: #20260f;

  --iris-blue-10: #edf4fd;
  --iris-blue-20: #dcecf9;
  --iris-blue-30: #b7d7f0;
  --iris-blue-40: #91c3e7;
  --iris-blue-50: #64a8db;
  --iris-blue-60: #3498db;
  --iris-blue-70: #247bbf;
  --iris-blue-80: #0a68b1;
  --iris-blue-90: #0c4a8c;
  --iris-blue-100: #043c6a;
  --iris-blue-110: #03224f;

  --iris-green-10: #e7f8e9;
  --iris-green-20: #d1f3d4;
  --iris-green-30: #a8e0b3;
  --iris-green-40: #7fce8e;
  --iris-green-50: #5ab462;
  --iris-green-60: #43a44e;
  --iris-green-70: #0c8938;
  --iris-green-80: #17752c;
  --iris-green-90: #10561f;
  --iris-green-100: #0d441b;
  --iris-green-110: #062d15;

  --iris-turquoise-10: #eaf6f6;
  --iris-turquoise-20: #dcedef;
  --iris-turquoise-30: #b5d9e3;
  --iris-turquoise-40: #8cc6d4;
  --iris-turquoise-50: #57adc1;
  --iris-turquoise-60: #479cb0;
  --iris-turquoise-70: #39808f;
  --iris-turquoise-80: #306e79;
  --iris-turquoise-90: #24505b;
  --iris-turquoise-100: #1e3f48;
  --iris-turquoise-110: #14262d;

  --iris-lime-40: #90cf32;
  --iris-blue-grey-60: #5b7a95;

  /* ------------------------------------------------------
    COLOR TOKENS
      Everything below this point is used throughout the app.
    ------------------------------------------------------ */

  /* ------------------------------------------------------
    PRIMARY, SECONDARY, AND TERTIARY + UI SHADE
      The UI-SHADE ramp below is dominant in the UI, organizing content through small shifts in value (lightness vs darkness).  By default, it is a collection of grays.
      The Primary ramp is the primary action color.
      Additional colors are to be used purposefully, in active consideration towards the need for this color use.
      Not all users will be able to see the colors as intended due to color blindness.
      Those with protanopia and deuteranopia have trouble differentiating green from blue; those with protanopia also have trouble distinguishing blue and purple. Those with tritanopia have trouble distinguishing between blue and yellow.
      To this end:
      * Be mindful pairing greens with blues, pinks, and purples.
      * Be mindful pairing greens and blues.
      When choosing a color, please remember to find some other non-color dependent method of conveying meaning (bolded font, a border, a different contrast ratio, etc) when the user must understand that there is information to heed or an action to be performed.
    ------------------------------------------------------ */

  --company-color-primary-00: var(--iris-white);
  --company-color-primary-10: var(--iris-brand-blue-10);
  --company-color-primary-20: var(--iris-brand-blue-20);
  --company-color-primary-30: var(--iris-brand-blue-30);
  --company-color-primary-40: var(--iris-brand-blue-40);
  --company-color-primary-50: var(--iris-brand-blue-50);
  --company-color-primary-60: var(--iris-brand-blue-60);
  --company-color-primary-70: var(--iris-brand-blue-70);
  --company-color-primary-80: var(--iris-brand-blue-80);
  --company-color-primary-90: var(--iris-brand-blue-90);
  --company-color-primary-100: var(--iris-brand-blue-100);

  /* @TODO: Secondary ramp */
  --company-color-secondary-00: var(--iris-white);
  --company-color-secondary-10: var(--iris-slate-blue-10);
  --company-color-secondary-20: var(--iris-slate-blue-20);
  --company-color-secondary-30: var(--iris-slate-blue-30);
  --company-color-secondary-40: var(--iris-slate-blue-40);
  --company-color-secondary-50: var(--iris-slate-blue-50);
  --company-color-secondary-60: var(--iris-slate-blue-60);
  --company-color-secondary-70: var(--iris-slate-blue-70);
  --company-color-secondary-80: var(--iris-slate-blue-80);
  --company-color-secondary-90: var(--iris-slate-blue-90);
  --company-color-secondary-100: var(--iris-slate-blue-100);

  --company-color-tertiary-10: var(--iris-red-10);
  --company-color-tertiary-20: var(--iris-red-20);
  --company-color-tertiary-30: var(--iris-red-30);
  --company-color-tertiary-40: var(--iris-red-40);
  --company-color-tertiary-50: var(--iris-red-50);
  --company-color-tertiary-60: var(--iris-red-60);
  --company-color-tertiary-70: var(--iris-red-70);
  --company-color-tertiary-80: var(--iris-red-80);
  --company-color-tertiary-90: var(--iris-red-90);
  --company-color-tertiary-100: var(--iris-red-100);

  --company-color-ui-shade-00: var(--iris-white);
  --company-color-ui-shade-10: var(--iris-gray-10);
  --company-color-ui-shade-20: var(--iris-gray-20);
  --company-color-ui-shade-30: var(--iris-gray-30);
  --company-color-ui-shade-40: var(--iris-gray-40);
  --company-color-ui-shade-50: var(--iris-gray-50);
  --company-color-ui-shade-60: var(--iris-gray-60);
  --company-color-ui-shade-70: var(--iris-gray-70);
  --company-color-ui-shade-80: var(--iris-gray-80);
  --company-color-ui-shade-90: var(--iris-gray-90);
  --company-color-ui-shade-100: var(--iris-gray-100);

  /* @TODO: Add "secondary" and "tertiary". */

  /* ------------------------------------------------------
      LAYOUT ELEMENTS
      Backgrounds, type, and borders
    ------------------------------------------------------ */

  /* Text on main background color */
  --company-color-text: var(--iris-gray-110);

  --company-color-background: var(--iris-white);
  --company-color-text-interactive-01: var(--company-color-primary-70);
  --company-color-text-disabled: var(--iris-gray-70);

  /* Text on colored and inverse backgrounds: */
  --company-color-text-inverse: var(--iris-white);
  --company-color-background-inverse: var(--iris-black);
  --company-color-border-inverse: var(--iris-white);

  --company-color-shadow: var(--company-color-ui-shade-10);

  /* ------------------------------------------------------
    INTERACTIVE ELEMENTS
      Colors meant for buttons, graphics, and links
      Ensure that there is 4.5:1 (WCAG AA) contrast between
      * "--company-color-interactive-{##}" and "--company-color-background"
      * "--company-color-interactive-{##}-label" and...
        * "--company-color-interactive-{##}"
        * "--company-color-interactive-{##}-hover"
        * "--company-color-interactive-{##}-focus"
    ------------------------------------------------------ */
  /* For interactive elements on a light background, e.g. buttons */
  --company-color-interactive-01-label: var(--iris-white);
  --company-color-interactive-01: var(--company-color-primary-70);
  --company-color-interactive-01-hover: var(--company-color-primary-60); /* highlight */
  --company-color-interactive-01-active: var(--company-color-primary-80); /* lowlight */
  --company-color-interactive-01-disabled: var(--iris-gray-60);
  --company-color-interactive-01-active-disabled: var(--company-color-primary-20);
  --company-color-interactive-01-disabled-label: var(--iris-gray-10);

  /* For interactive elements on a dark background, e.g. icons */
  --company-color-interactive-02-label: var(--company-color-primary-70);
  --company-color-interactive-02: var(--company-color-primary-20);
  --company-color-interactive-02-hover: var(--company-color-primary-10);
  --company-color-interactive-02-active: var(--company-color-primary-30);
  --company-color-interactive-02-disabled: var(--iris-gray-50);
  --company-color-interactive-02-disabled-label: var(--iris-gray-10);

  /* For interactive elements of lesser importance, in secondary color */
  --company-color-interactive-03-label: var(--iris-gray-70);
  --company-color-interactive-03: var(--iris-gray-70);
  --company-color-interactive-03-hover: var(--iris-gray-10);
  --company-color-interactive-03-active: var(--iris-gray-20);
  --company-color-interactive-03-disabled: var(--iris-gray-50);
  --company-color-interactive-03-disabled-label: var(--iris-gray-10);

  /* For CTA elements that must stand out */
  --company-color-interactive-04-label: var(--iris-white);
  --company-color-interactive-04: var(--company-color-tertiary-70);
  --company-color-interactive-04-hover: var(--company-color-tertiary-60);
  --company-color-interactive-04-active: var(--company-color-tertiary-80);
  --company-color-interactive-04-disabled: var(--iris-gray-50);
  --company-color-interactive-04-disabled-label: var(--iris-gray-10);

  /* ------------------------------------------------------
    FORM ELEMENT COLORS
      Ensure that there is 4.5:1 (WCAG AA) contrast between
      * "--company-color-formfield-label" and "--company-color-background"
      * "--company-color-text" and...
        * "--company-color-formfield-background-01"
        * "--company-color-formfield-background-02"
      Ensure that there is 3:1 (WCAG AA) contrast between
      * "--company-color-formfield-fill" and "--company-color-background"

    ------------------------------------------------------ */
  --company-color-formfield-background-01: var(--iris-white);
  --company-color-formfield-background-01-hover: var(--iris-gray-10);
  --company-color-formfield-label: var(--company-color-text);
  --company-color-formfield-text: var(--company-color-text);
  --company-color-formfield-text-placeholder: var(--iris-gray-60);
  --company-color-formfield-border: var(--company-color-ui-shade-50);
  --company-color-formfield-focus: var(--company-color-primary-70);
  --company-color-formfield-decorative-01: var(--company-color-primary-70);
  --company-color-formfield-decorative-02: var(--company-color-ui-shade-60);
  --company-color-formfield-decorative-03: var(--company-color-primary-10);
  --company-color-formfield-disabled: var(--iris-gray-30);

  /* ------------------------------------------------------
    WARNING COLORS
      When advising you are about to make a destructive change.
      Ensure that there is 4.5:1 (WCAG AA) contrast between
      * "--company-color-warning" and "--company-color-background"
    ------------------------------------------------------ */
  --company-color-text-warning: var(--iris-yellow-80);
  --company-color-warning: var(--iris-red-70);
  --company-color-warning-hover: var(--iris-red-60);
  --company-color-warning-active: var(--iris-red-80);
  --company-color-warning-focus: var(--iris-red-80);
  --company-color-warning-disabled: var(--iris-gray-50);

  /* ------------------------------------------------------
    ALERT COLORS
      When giving priority notifications to a user.
      Ensure that there is 4.5:1 (WCAG AA) contrast between
      * "--company-color-success" and "--company-color-background"
    ------------------------------------------------------ */
  --company-color-text-alert: var(--iris-orange-70);
  --company-color-alert: var(--iris-orange-70);
  --company-color-alert-inverse: var(--iris-orange-20);
  --company-color-alert-hover: var(--iris-orange-60);
  --company-color-alert-active: var(--iris-orange-80);
  --company-color-alert-focus: var(--iris-orange-80);
  --company-color-alert-disabled: var(--iris-orange-50);
  --company-color-alert-decorative-01: var(--iris-orange-50);

  /* ------------------------------------------------------
    INFORMATION COLORS
      When advising the user of additional, non-urgent information
      When constructing tooltips and notifications
      Ensure that there is 4.5:1 (WCAG AA) contrast between
      * "--company-color-information" and "--company-color-background"
    ------------------------------------------------------ */
  --company-color-text-information: var(--iris-yellow-70);
  --company-color-information-inverse: var(--iris-yellow-30);
  --company-color-information: var(--iris-yellow-30);
  --company-color-information-hover: var(--iris-yellow-60);
  --company-color-information-active: var(--iris-yellow-80);
  --company-color-information-focus: var(--iris-yellow-80);
  --company-color-information-disabled: var(--iris-yellow-30);

  /* ------------------------------------------------------
    ERROR COLORS
      When advising the user of an error that has occurred
      When prompting the user to correct their input to resolve an error
      Ensure that there is 4.5:1 (WCAG AA) contrast between
      * "--company-color-error" and "--company-color-background"
    ------------------------------------------------------ */
  --company-color-text-error: var(--iris-red-70);
  --company-color-error: var(--iris-red-70);
  --company-color-error-02: var(--iris-red-40);
  --company-color-error-hover: var(--iris-red-60);
  --company-color-error-active: var(--iris-red-80);
  --company-color-error-focus: var(--iris-red-80);
  --company-color-error-disabled: var(--iris-gray-50);
  --company-color-error-decorative-01: var(--iris-red-50);

  /* ------------------------------------------------------
    SUCCESS COLORS
      When giving positive confirmation to the user
      Ensure that there is 4.5:1 (WCAG AA) contrast between
      * "--company-color-success" and "--company-color-background"
    ------------------------------------------------------ */
  --company-color-text-success: var(--iris-green-70);
  --company-color-success: var(--iris-green-70);
  --company-color-success-hover: var(--iris-green-60);
  --company-color-success-active: var(--iris-green-80);
  --company-color-success-focus: var(--iris-green-80);
  --company-color-success-disabled: var(--iris-green-50);
  --company-color-success-decorative-01: var(--iris-green-50);

  --company-color-text-answer: var(--iris-green-70);
  --company-color-answer: var(--iris-green-70);
  --company-color-answer-hover: var(--iris-green-60);
  --company-color-answer-active: var(--iris-green-80);
  --company-color-answer-focus: var(--iris-green-80);
  --company-color-answer-disabled: var(--iris-green-50);
  --company-color-answer-decorative-01: var(--iris-green-50);

  --company-color-chat-text: var(--iris-turquoise-80);
  --company-color-chat-background: var(--iris-turquoise-20);
  --company-color-chat-background-inverse: var(--iris-turquoise-80);
  --company-color-chat-border: var(--iris-turquoise-40);
  --company-color-chat-decorative-01: var(--iris-turquoise-60);
  --company-color-chat-decorative-02: var(--iris-turquoise-80);

  --company-color-call-text: var(--iris-blue-100);
  --company-color-call-background: var(--iris-blue-40);
  --company-color-call-background-inverse: var(--iris-blue-100);
  --company-color-call-border: var(--iris-blue-60);
  --company-color-call-decorative-01: var(--iris-blue-80);
  --company-color-call-decorative-02: var(--iris-blue-100);

  --company-color-email-background: var(--iris-blue-10);

  --company-color-decorative-icon-background: var(--company-color-success);
  --company-color-decorative-icon-label: var(--company-color-text-inverse);

  --company-color-info-icon: var(--iris-black);

  /*
    These variables will be used until we have a better system to support separate theming for the header
    */
  --company-color-header-background: var(--company-color-primary-70);
  --company-color-header-text: var(--company-color-text-inverse);

  --company-color-header-menu-item-text: var(--company-color-text-inverse);
  --company-color-header-menu-item-background: var(--company-color-interactive-01-active);
  --company-color-header-menu-item-hover-text: var(--company-color-primary-70);
  --company-color-header-menu-item-hover-background: var(--company-color-interactive-01-label);

  /*
    These variables will be used until we have a better system to support separate theming for the admin portal
    */
  --company-color-admin-portal-agents-filter-text: var(--company-color-text);
  --company-color-admin-portal-agents-filter-settings-interactive-text: var(
    --company-color-interactive-01
  );
  --company-color-admin-portal-call-detail-text: var(--company-color-text-inverse);
  --company-color-admin-portal-call-detail-dialog-sidebar-background: var(
    --company-color-interactive-01-active
  );
  --company-color-admin-portal-call-detail-action-content-background: var(
    --company-color-interactive-01
  );
  --company-color-admin-portal-call-detail-primary-button-text: var(
    --company-color-interactive-01-active
  );
  --company-color-admin-portal-call-detail-primary-button-background: var(
    --company-color-background
  );
  --company-color-admin-portal-call-detail-secondary-button-text: var(--company-color-text-inverse);
  --company-color-admin-portal-call-detail-secondary-button-background: var(
    --company-color-interactive-01-active
  );
  --company-color-admin-portal-holiday-drawer-background: var(--company-color-primary-10);
  --company-color-admin-portal-input-element-active: var(--company-color-primary-80);

  --company-color-admin-portal-background-success: var(--iris-green-10);
  --company-color-admin-portal-border-success: var(--iris-green-30);
  --company-color-admin-portal-background-warning: var(--iris-yellow-10);
  --company-color-admin-portal-border-warning: var(--iris-yellow-30);

  --company-color-admin-portal-queue-status-bar: var(
    --company-color-nav-panel-background,
    var(--iris-blue-10)
  );
  --company-color-admin-portal-queue-status-label: var(
    --company-color-button-secondary-label,
    var(--iris-blue-80)
  );
  --company-color-admin-portal-queue-status-label-hover: var(
    --company-color-button-secondary-label-hover,
    var(--iris-blue-100)
  );

  --company-color-admin-portal-primary-border: var(--gray-30);
  --company-color-admin-portal-secondary-border: var(--gray-50);

  /*
    These variables will be used until we have a better system to support separate theming for the chat/call adapters
    */
  --company-color-agent-adapter-background: var(--company-color-primary-70);
  --company-color-agent-adapter-text: var(--company-color-text-inverse);
  --company-color-agent-adapter-select-background: rgba(255, 255, 255, 0.15);
  --company-color-agent-adapter-select-active: var(--company-color-primary-70);
  --company-color-agent-adapter-sms-text: var(--company-color-text);
  --company-color-agent-adapter-sms-background: var(--company-color-background);
  --company-color-agent-adapter-shortcut-text: var(--company-color-text);
  --company-color-agent-adapter-primary-button-text: var(--company-color-interactive-02-label);
  --company-color-agent-adapter-primary-button-background: var(--company-color-background);
  --company-color-agent-adapter-secondary-button-background: rgba(255, 255, 255, 0);
  --company-color-agent-adapter-track: var(--company-color-primary-00);
  --company-color-agent-adapter-track-fill: var(--company-color-primary-90);
  --company-color-agent-adapter-campaign-call-message-background: var(--company-color-primary-100);
  --company-color-agent-adapter-in-call-action-button-icon: var(--company-color-primary-70);
  --company-color-agent-adapter-in-call-action-button-background: var(--company-color-background);
  --company-color-agent-adapter-in-call-action-button-border: var(--company-color-text-inverse);
  --company-color-agent-adapter-unselected-chat-text: var(--company-color-text-interactive-01);

  --company-color-agent-adapter-message-bubble-mine-background: var(--company-color-primary-70);
  --company-color-agent-adapter-message-bubble-other-background: var(--company-color-ui-shade-10);
  --company-color-agent-adapter-message-bubble-mine-text: var(--company-color-text-inverse);
  --company-color-agent-adapter-message-bubble-other-text: var(--company-color-text);

  --company-color-agent-adapter-outbound-call-button-interactive-label: var(
    --company-color-interactive-02-label
  );
  --company-color-agent-adapter-outbound-call-button-interactive-background: var(
    --company-color-interactive-02
  );
  --company-color-agent-adapter-outbound-call-button-interactive-hover: var(
    --company-color-interactive-02-hover
  );
  --company-color-agent-adapter-outbound-call-background-color: var(--company-color-primary-70);
  --company-color-agent-adapter-outbound-call-text: var(--company-color-text-inverse);
  --company-color-agent-adapter-outbound-call-text-border: var(--company-color-primary-00);
  --company-color-agent-adapter-outbound-call-keypad-text: var(
    --company-color-interactive-02-label
  );
  --company-color-agent-adapter-outbound-call-keypad-hover-text: var(
    --company-color-interactive-02-label
  );
  --company-color-agent-adapter-outbound-call-keypad-border: var(--company-color-interactive-02);

  --company-color-agent-adapter-phone-number-selector-text: var(--company-color-primary-00);
  --company-color-agent-adapter-phone-number-selector-background: var(--company-color-primary-70);
  --company-color-agent-adapter-phone-number-selector-border: var(--company-color-interactive-02);
  --company-color-agent-adapter-phone-number-selector-carot: var(--company-color-interactive-02);
  --company-color-agent-adapter-phone-number-selector-search-text: var(
    --company-color-text-inverse
  );
  --company-color-agent-adapter-phone-number-selector-dropdown-text: var(
    --company-color-primary-70
  );

  --company-color-agent-adapter-missed-banner-background: var(--iris-gray-110);

  --company-color-agent-adapter-chat-agt-primary-color-10: var(--company-color-primary-10);
  --company-color-agent-adapter-chat-agt-primary-color-20: var(--company-color-primary-20);
  --company-color-agent-adapter-chat-agt-primary-color-30: var(--company-color-primary-30);
  --company-color-agent-adapter-chat-agt-primary-color-40: var(--company-color-primary-40);
  --company-color-agent-adapter-chat-agt-primary-color-50: var(--company-color-primary-50);
  --company-color-agent-adapter-chat-agt-primary-color-60: var(--company-color-primary-60);
  --company-color-agent-adapter-chat-agt-primary-color-70: var(--company-color-primary-70);
  --company-color-agent-adapter-chat-agt-primary-color-80: var(--company-color-primary-80);
  --company-color-agent-adapter-chat-agt-primary-color-90: var(--company-color-primary-90);
  --company-color-agent-adapter-chat-agt-primary-color-100: var(--company-color-primary-100);

  --company-color-agent-adapter-call-agt-primary-color-10: var(--company-color-primary-10);
  --company-color-agent-adapter-call-agt-primary-color-20: var(--company-color-primary-20);
  --company-color-agent-adapter-call-agt-primary-color-30: var(--company-color-primary-30);
  --company-color-agent-adapter-call-agt-primary-color-40: var(--company-color-primary-40);
  --company-color-agent-adapter-call-agt-primary-color-50: var(--company-color-primary-50);
  --company-color-agent-adapter-call-agt-primary-color-60: var(--company-color-primary-60);
  --company-color-agent-adapter-call-agt-primary-color-70: var(--company-color-primary-70);
  --company-color-agent-adapter-call-agt-primary-color-80: var(--company-color-primary-80);
  --company-color-agent-adapter-call-agt-primary-color-90: var(--company-color-primary-90);
  --company-color-agent-adapter-call-agt-primary-color-100: var(--company-color-primary-100);

  --company-color-tab-adapter-background: var(--iris-white);
  --company-color-tab-adapter-background-hover: var(--iris-blue-80);
  --company-color-tab-adapter-background-active: var(--iris-blue-20);
  --company-color-tab-adapter-background-disabled: var(--iris-white);
  --company-color-tab-adapter-label: var(--iris-blue-110);
  --company-color-tab-adapter-label-hover: var(--iris-white);
  --company-color-tab-adapter-label-active: var(--iris-blue-110);
  --company-color-tab-adapter-label-disabled: var(--iris-blue-40);

  /*Admin portal*/
  /* Background */
  --company-color-email-background-primary: var(
    --company-color-background-primary,
    var(--iris-white)
  );
  --company-color-email-background-primary-hover: var(
    --company-color-background-primary-hover,
    var(--iris-gray-10)
  );
  --company-color-email-background-primary-active: var(
    --company-color-background-primary-active,
    var(--iris-blue-10)
  );
  --company-color-email-background-secondary: var(
    --company-color-background-secondary,
    var(--iris-gray-10)
  );
  --company-color-email-background-tertiary: var(
    --company-color-background-tertiary,
    var(--iris-slate-blue-10)
  );
  --company-color-email-background-overlay: var(
    --company-color-background-overlay,
    rgba(0, 0, 0, 0.8)
  );
  --company-color-email-background-error: var(--company-color-background-error, var(--iris-red-10));
  --company-color-email-background-success: var(
    --company-color-background-success,
    var(--iris-green-10)
  );
  --company-color-email-background-warning: var(
    --company-color-background-warning,
    var(--iris-yellow-10)
  );
  --company-color-email-background-information: var(
    --company-color-background-information,
    var(--iris-gray-10)
  );
  /* Text */
  --company-color-email-text-primary: var(--company-color-text-primary, var(--iris-gray-110));
  --company-color-email-text-secondary: var(--company-color-text-secondary, var(--iris-gray-80));
  --company-color-email-text-disabled: var(--company-color-text-disabled, var(--iris-gray-40));
  --company-color-email-text-error: var(--company-color-text-error, var(--iris-red-80));
  --company-color-email-text-success: var(--company-color-text-success, var(--iris-green-80));
  --company-color-email-text-warning: var(--company-color-text-warning, var(--iris-yellow-80));
  --company-color-email-text-information: var(
    --company-color-text-information,
    var(--iris-gray-110)
  );
  --company-color-email-text-placeholder: var(
    --company-color-text-placeholder,
    var(--iris-gray-80)
  );
  --company-color-email-text-helper: var(--company-color-text-helper, var(--iris-gray-110));
  /* Icons */
  --company-color-email-icon-primary: var(--company-color-icon-primary, var(--iris-gray-50));
  --company-color-email-icon-secondary: var(--company-color-icon-secondary, var(--iris-gray-80));
  --company-color-email-icon-tertiary: var(--company-color-icon-tertiary, var(--iris-gray-110));
  --company-color-email-icon-interactive: var(
    --company-color-icon-interactive,
    var(--iris-blue-80)
  );
  --company-color-email-icon-interactive-disabled: var(
    --company-color-icon-interactive-disabled,
    var(--iris-blue-80)
  );
  --company-color-email-icon-inverse: var(--company-color-icon-inverse, var(--iris-white));
  --company-color-email-icon-disabled: var(--company-color-icon-disabled, var(--iris-gray-40));
  --company-color-email-icon-error: var(--company-color-icon-error, var(--iris-red-80));
  --company-color-email-icon-warning: var(--company-color-icon-warning, var(--iris-yellow-80));
  --company-color-email-icon-success: var(--company-color-icon-success, var(--iris-green-80));
  --company-color-email-icon-information: var(
    --company-color-icon-information,
    var(--iris-gray-110)
  );
  /* Borders */
  --company-color-email-border-primary: var(--company-color-border-primary, var(--iris-gray-30));
  --company-color-email-border-secondary: var(
    --company-color-border-secondary,
    var(--iris-gray-50)
  );
  --company-color-email-border-tertiary: var(--company-color-border-tertiary, var(--iris-gray-110));
  --company-color-email-border-interactive: var(
    --company-color-border-interactive,
    var(--iris-blue-80)
  );
  --company-color-email-border-error: var(--company-color-border-error, var(--iris-red-30));
  --company-color-email-border-success: var(--company-color-border-success, var(--iris-green-30));
  --company-color-email-border-warning: var(--company-color-border-warning, var(--iris-yellow-30));
  --company-color-email-border-information: var(
    --company-color-border-information,
    var(--iris-gray-30)
  );
  --company-color-email-border-inverse: var(--company-color-border-inverse, var(--iris-white));
  /* Links */
  --company-color-email-link: var(--company-color-link, var(--iris-blue-80));
  --company-color-email-link-hover: var(--company-color-link-hover, var(--iris-blue-100));
  --company-color-email-link-active: var(--company-color-link-active, var(--iris-blue-110));
  --company-color-email-link-visited: var(--company-color-link-visited, var(--iris-purple-80));
  --company-color-email-link-disabled: var(--company-color-link-disabled, var(--iris-blue-40));
  /* Primary Button */
  --company-color-email-button-primary-background: var(
    --company-color-button-primary-background,
    var(--iris-blue-80)
  );
  --company-color-email-button-primary-background-hover: var(
    --company-color-button-primary-background-hover,
    var(--iris-blue-100)
  );
  --company-color-email-button-primary-background-active: var(
    --company-color-button-primary-background-active,
    var(--iris-blue-110)
  );
  --company-color-email-button-primary-background-disabled: var(
    --company-color-button-primary-background-disabled,
    var(--iris-blue-40)
  );
  --company-color-email-button-primary-label: var(
    --company-color-button-primary-label,
    var(--iris-white)
  );
  --company-color-email-button-primary-label-hover: var(
    --company-color-button-primary-label-hover,
    var(--iris-white)
  );
  --company-color-email-button-primary-label-active: var(
    --company-color-button-primary-label-active,
    var(--iris-white)
  );
  --company-color-email-button-primary-label-disabled: var(
    --company-color-button-primary-label-disabled,
    var(--iris-white)
  );
  --company-color-email-button-secondary-background: var(
    --company-color-button-secondary-background,
    var(--iris-white)
  );
  --company-color-email-button-secondary-background-hover: var(
    --company-color-button-secondary-background-hover,
    var(--iris-blue-20)
  );
  --company-color-email-button-secondary-background-active: var(
    --company-color-button-secondary-background-active,
    var(--iris-blue-30)
  );
  --company-color-email-button-secondary-background-disabled: var(
    --company-color-button-secondary-background-disabled,
    var(--iris-white)
  );
  --company-color-email-button-secondary-label: var(
    --company-color-button-secondary-label,
    var(--iris-blue-80)
  );
  --company-color-email-button-secondary-label-hover: var(
    --company-color-button-secondary-label-hover,
    var(--iris-blue-100)
  );
  --company-color-email-button-secondary-label-active: var(
    --company-color-button-secondary-label-active,
    var(--iris-blue-110)
  );
  --company-color-email-button-secondary-label-disabled: var(
    --company-color-button-secondary-label-disabled,
    var(--iris-blue-40)
  );
  --company-color-email-button-secondary-border: var(
    --company-color-button-secondary-border,
    var(--iris-blue-80)
  );
  --company-color-email-button-secondary-border-hover: var(
    --company-color-button-secondary-border-hover,
    var(--iris-blue-100)
  );
  --company-color-email-button-secondary-border-active: var(
    --company-color-button-secondary-border-active,
    var(--iris-blue-110)
  );
  --company-color-email-button-secondary-border-disabled: var(
    --company-color-button-secondary-border-disabled,
    var(--iris-blue-40)
  );
  /* Tertiary Button */
  --company-color-email-button-tertiary-background: var(
    --company-color-button-tertiary-background,
    transparent
  );
  --company-color-email-button-tertiary-background-hover: var(
    --company-color-button-tertiary-background-hover,
    var(--iris-blue-20)
  );
  --company-color-email-button-tertiary-background-active: var(
    --company-color-button-tertiary-background-active,
    var(--iris-blue-30)
  );
  --company-color-email-button-tertiary-background-disabled: var(
    --company-color-button-tertiary-background,
    transparent
  );
  --company-color-email-button-tertiary-label: var(
    --company-color-button-tertiary-label,
    var(--iris-blue-80)
  );
  --company-color-email-button-tertiary-label-hover: var(
    --company-color-button-tertiary-label-hover,
    var(--iris-blue-100)
  );
  --company-color-email-button-tertiary-label-active: var(
    --company-color-button-tertiary-label-active,
    var(--iris-blue-110)
  );
  --company-color-email-button-tertiary-label-disabled: var(
    --company-color-button-tertiary-label-disabled,
    transparent
  );
  /* Hazzard Button*/
  --company-color-email-button-hazard-background: var(
    --company-color-button-hazard-background,
    var(--iris-red-80)
  );
  --company-color-email-button-hazard-background-hover: var(
    --company-color-button-hazard-background-hover,
    var(--iris-red-100)
  );
  --company-color-email-button-hazard-background-active: var(
    --company-color-button-hazard-background-active,
    var(--iris-red-110)
  );
  --company-color-email-button-hazard-background-disabled: var(
    --company-color-button-hazard-background-disabled,
    var(--iris-red-40)
  );
  --company-color-email-button-hazard-label: var(
    --company-color-button-hazard-label,
    var(--iris-white)
  );
  --company-color-email-button-hazard-label-hover: var(
    --company-color-button-hazard-label,
    var(--iris-white)
  );
  --company-color-email-button-hazard-label-active: var(
    --company-color-button-hazard-label,
    var(--iris-white)
  );
  --company-color-email-button-hazard-label-disabled: var(
    --company-color-button-hazard-label,
    var(--iris-white)
  );
  /* Icon Button */
  --company-color-email-button-icon-background: var(
    --company-color-button-icon-background,
    transparent
  );
  --company-color-email-button-icon-background-hover: var(
    --company-color-button-icon-background-hover,
    var(--iris-blue-80)
  );
  --company-color-email-button-icon-background-active: var(
    --company-color-button-icon-background-active,
    var(--iris-blue-100)
  );
  --company-color-email-button-icon-background-disabled: var(
    --company-color-button-icon-background-disabled,
    transparent
  );
  --company-color-email-button-icon-label: var(
    --company-color-button-icon-label,
    var(--iris-gray-80)
  );
  --company-color-email-button-icon-label-hover: var(
    --company-color-button-icon-label-hover,
    var(--iris-white)
  );
  --company-color-email-button-icon-label-active: var(
    --company-color-button-icon-label-active,
    var(--iris-white)
  );
  --company-color-email-button-icon-label-disabled: var(
    --company-color-button-icon-label-disabled,
    var(--iris-gray-40)
  );
  /* Navigation */
  --company-color-email-nav-border-primary: var(
    --company-color-nav-border-primary,
    var(--iris-gray-30)
  );
  --company-color-email-nav-border-tertiary: var(
    --company-color-nav-border-tertiary,
    var(--iris-gray-110)
  );
  --company-color-email-nav-panel-background: var(
    --company-color-nav-panel-background,
    var(--iris-blue-10)
  );
  --company-color-email-nav-button-background: var(
    --company-color-nav-button-background,
    transparent
  );
  --company-color-email-nav-button-background-hover: var(
    --company-color-nav-button-background-hover,
    var(--iris-blue-20)
  );
  --company-color-email-nav-button-background-selected: var(
    --company-color-nav-button-background-selected,
    var(--iris-azure-100)
  );
  --company-color-email-nav-button-icon: var(--company-color-nav-button-icon, var(--iris-gray-110));
  --company-color-email-nav-button-icon-hover: var(
    --company-color-nav-button-icon-hover,
    var(--iris-azure-80)
  );
  --company-color-email-nav-button-icon-selected: var(
    --company-color-nav-button-icon-selected,
    var(--iris-white)
  );
  --company-color-email-nav-button-label: var(
    --company-color-nav-button-label,
    var(--iris-gray-110)
  );
  --company-color-email-nav-button-label-hover: var(
    --company-color-nav-button-label-hover,
    var(--iris-azure-80)
  );
  --company-color-email-nav-button-label-selected: var(
    --company-color-nav-button-label-selected,
    var(--iris-white)
  );
  --company-color-email-nav-button-lit-hover: var(
    --company-color-nav-button-lit-hover,
    var(--iris-blue-80)
  );
  --company-color-email-nav-menu-panel-background: var(
    --company-color-nav-menu-panel-background,
    #f8fbff
  );
  --company-color-email-nav-menu-background: var(--company-color-nav-menu-background, transparent);
  --company-color-email-nav-menu-background-hover: var(
    --company-color-nav-menu-background-hover,
    var(--iris-azure-80)
  );
  --company-color-email-nav-menu-background-selected: var(
    --company-color-nav-menu-background-selected,
    var(--iris-azure-100)
  );
  --company-color-email-nav-menu-icon: var(--company-color-nav-menu-icon, var(--iris-white));
  --company-color-email-nav-menu-icon-hover: var(
    --company-color-nav-menu-icon-hover,
    var(--iris-white)
  );
  --company-color-email-nav-menu-icon-selected: var(
    --company-color-nav-menu-icon-selected,
    var(--iris-white)
  );
  --company-color-email-nav-menu-outline-hover: var(
    --company-color-nav-menu-outline-hover,
    var(--iris-blue-80)
  );
  --company-color-email-nav-menu-label: var(--company-color-nav-menu-label, var(--iris-gray-110));
  --company-color-email-nav-top-bar-background: var(
    --company-color-nav-top-bar-background,
    var(--iris-blue-10)
  );
  --company-color-email-nav-tab-label: var(--company-color-nav-tab-label, var(--iris-gray-110));
  --company-color-email-nav-tab-label-hover: var(
    --company-color-nav-tab-label-hover,
    var(--iris-azure-80)
  );
  --company-color-email-nav-tab-label-selected: var(
    --company-color-nav-tab-label-selected,
    var(--iris-gray-110)
  );
  --company-color-email-nav-tab-lit: var(--company-color-nav-tab-lit, transparent);
  --company-color-email-nav-tab-lit-hover: var(
    --company-color-nav-tab-lit-hover,
    var(--iris-azure-80)
  );
  --company-color-email-nav-tab-lit-selected: var(
    --company-color-nav-tab-lit-selected,
    var(--iris-azure-110)
  );
  /* Checkbox */
  --company-color-email-checkbox-background: var(
    --company-color-checkbox-background,
    var(--iris-white)
  );
  --company-color-email-checkbox-background-active: var(
    --company-color-checkbox-background-active,
    var(--iris-blue-80)
  );
  --company-color-email-checkbox-background-active-disabled: var(
    --company-color-checkbox-background-active-disabled,
    var(--iris-blue-40)
  );
  --company-color-email-checkbox-background-disabled: var(
    --company-color-checkbox-background-disabled,
    var(--iris-white)
  );
  --company-color-email-checkbox-background-error: var(
    --company-color-checkbox-background-error,
    var(--iris-white)
  );
  --company-color-email-checkbox-border: var(--company-color-checkbox-border, var(--iris-gray-80));
  --company-color-email-checkbox-border-active: var(
    --company-color-checkbox-border-active,
    var(--iris-blue-80)
  );
  --company-color-email-checkbox-border-active-disabled: var(
    --company-color-checkbox-border-active-disabled,
    var(--iris-blue-40)
  );
  --company-color-email-checkbox-border-disabled: var(
    --company-color-checkbox-border-disabled,
    var(--iris-gray-40)
  );
  --company-color-email-checkbox-border-error: var(
    --company-color-checkbox-border-error,
    var(--iris-red-80)
  );
  --company-color-email-checkbox-icon: var(--company-color-checkbox-icon, var(--iris-gray-80));
  --company-color-email-checkbox-icon-active: var(
    --company-color-checkbox-icon-active,
    var(--iris-white)
  );
  --company-color-email-checkbox-icon-active-disabled: var(
    --company-color-checkbox-icon-active-disaled,
    var(--iris-white)
  );
  --company-color-email-checkbox-icon-disabled: var(
    --company-color-checkbox-icon-disabled,
    var(--iris-gray-40)
  );
  /* Radio */
  --company-color-email-radio-background: var(--company-color-radio-background, var(--iris-white));
  --company-color-email-radio-background-active: var(
    --company-color-radio-background-active,
    var(--iris-white)
  );
  --company-color-email-radio-background-active-disabled: var(
    --company-color-radio-background-active-disabled,
    var(--iris-white)
  );
  --company-color-email-radio-background-disabled: var(
    --company-color-radio-background-disabled,
    var(--iris-white)
  );
  --company-color-email-radio-border: var(--company-color-radio-border, var(--iris-gray-80));
  --company-color-email-radio-border-active: var(
    --company-color-radio-border-active,
    var(--iris-blue-80)
  );
  --company-color-email-radio-border-active-disabled: var(
    --company-color-radio-border-active-disabled,
    var(--iris-blue-40)
  );
  --company-color-email-radio-border-disabled: var(
    --company-color-radio-border-disabled,
    var(--iris-gray-40)
  );
  --company-color-email-radio-thumb: var(--company-color-radio-thumb, var(--iris-white));
  --company-color-email-radio-thumb-active: var(--company-color-radio-thumb, var(--iris-blue-80));
  --company-color-email-radio-thumb-active-disabled: var(
    --company-color-radio-thumb,
    var(--iris-blue-40)
  );
  --company-color-email-radio-thumb-disabled: var(--company-color-radio-thumb, var(--iris-white));
  /* Toogle */
  --company-color-email-toggle-background: var(
    --company-color-toggle-background,
    var(--iris-white)
  );
  --company-color-email-toggle-background-active: var(
    --company-color-toggle-background-active,
    var(--iris-blue-80)
  );
  --company-color-email-toggle-background-active-disabled: var(
    --company-color-toggle-background-active-disabled,
    var(--iris-blue-40)
  );
  --company-color-email-toggle-background-disabled: var(
    --company-color-toggle-background-disabled,
    var(--iris-white)
  );
  --company-color-email-toggle-border: var(--company-color-toggle-border, var(--iris-gray-80));
  --company-color-email-toggle-border-active: var(
    --company-color-toggle-border-active,
    var(--iris-blue-80)
  );
  --company-color-email-toggle-border-active-disabled: var(
    --company-color-toggle-border-active-disabled,
    var(--iris-blue-40)
  );
  --company-color-email-toggle-border-disabled: var(
    --company-color-toggle-border-disabled,
    var(--iris-gray-40)
  );
  --company-color-email-toggle-thumb: var(--company-color-toggle-thumb, var(--iris-gray-80));
  --company-color-email-toggle-thumb-active: var(
    --company-color-toggle-thumb-active,
    var(--iris-white)
  );
  --company-color-email-toggle-thumb-active-disabled: var(
    --company-color-toggle-thumb-active-disabled,
    var(--iris-white)
  );
  --company-color-email-toggle-thumb-disabled: var(
    --company-color-toggle-thumb-disabled,
    var(--iris-gray-40)
  );
  /* Tabs */
  --company-color-email-tab-background: var(--company-color-tab-background, transparent);
  --company-color-email-tab-background-hover: var(
    --company-color-background-hover,
    var(--iris-gray-10)
  );
  --company-color-email-tab-background-active: var(
    --company-color-background-active,
    var(--iris-blue-10)
  );
  --company-color-email-tab-label: var(--company-color-tab-label, var(--iris-gray-80));
  --company-color-email-tab-label-hover: var(--company-color-tab-label-hover, var(--iris-gray-80));
  --company-color-email-tab-label-active: var(
    --company-color-tab-label-active,
    var(--iris-gray-110)
  );
  --company-color-email-tab-lit: var(--company-color-color-tab-lit, transparent);
  --company-color-email-tab-lit-hover: var(--company-color-tab-lit-hover, var(--iris-blue-80));
  --company-color-email-tab-lit-active: var(--company-color-tab-lit-active, var(--iris-blue-110));
  /* Tags */
  --company-color-email-tag-background-primary: var(
    --company-color-tag-background-primary,
    var(--iris-white)
  );
  --company-color-email-tag-background-primary-active: var(
    --company-color-tag-background-primary-active,
    var(--iris-blue-10)
  );
  --company-color-email-tag-background-primary-disabled: var(
    --company-color-tag-background-primary-disabled,
    var(--iris-gray-10)
  );
  --company-color-email-tag-background-primary-error: var(
    --company-color-tag-background-primary-error,
    var(--iris-red-10)
  );
  --company-color-email-tag-background-secondary: var(
    --company-color-tag-background-secondary,
    var(--iris-gray-10)
  );
  --company-color-email-tag-background-agent: var(
    --company-color-tag-background-agent,
    var(--iris-azure-10)
  );
  --company-color-email-tag-background-manager: var(
    --company-color-tag-background-manager,
    var(--iris-lime-10)
  );
  --company-color-email-tag-background-admin: var(
    --company-color-tag-background-admin,
    var(--iris-wine-10)
  );
  --company-color-email-tag-border: var(--company-color-tag-border, var(--iris-gray-50));
  --company-color-email-tag-border-active: var(
    --company-color-tag-border-active,
    var(--iris-blue-100)
  );
  --company-color-email-tag-border-disabled: var(
    --company-color-tag-border-disabled,
    var(--iris-gray-50)
  );
  --company-color-email-tag-border-error: var(--company-color-tag-border-error, var(--iris-red-30));
  --company-color-email-tag-border-agent: var(
    --company-color-tag-border-agent,
    var(--iris-azure-50)
  );
  --company-color-email-tag-border-manager: var(
    --company-color-tag-border-manager,
    var(--iris-lime-50)
  );
  --company-color-email-tag-border-admin: var(
    --company-color-tag-border-admin,
    var(--iris-wine-50)
  );
  --company-color-email-tag-handle: var(--company-color-tag-handle, var(--iris-blue-80));
  --company-color-email-tag-handle-active: var(
    --company-color-tag-handle-active,
    var(--iris-blue-100)
  );
  --company-color-email-tag-handle-disabled: var(
    --company-color-tag-handle-disabled,
    var(--iris-gray-50)
  );
  --company-color-email-tag-label: var(--company-color-tag-label, var(--iris-gray-110));
  --company-color-email-tag-label-active: var(
    --company-color-tag-label-active,
    var(--iris-gray-110)
  );
  --company-color-email-tag-label-disabled: var(
    --company-color-tag-label-disabled,
    var(--iris-gray-80)
  );
  --company-color-email-tag-label-error: var(--company-color-tag-label-error, var(--iris-gray-110));
  /* Dynamic Tags */
  --company-color-email-tag-dynamic-background: var(
    --company-color-tag-dynamic-background,
    var(--iris-azure-20)
  );
  --company-color-email-tag-dynamic-background-hover: var(
    --company-color-tag-dynamic-background-hover,
    var(--iris-azure-30)
  );
  --company-color-email-tag-dynamic-background-active: var(
    --company-color-tag-dynamic-background-active,
    var(--iris-azure-40)
  );
  --company-color-email-tag-dynamic-label: var(
    --company-color-tag-dynamic-label,
    var(--iris-azure-90)
  );
  --company-color-email-tag-dynamic-label-hover: var(
    --company-color-tag-dynamic-label-hover,
    var(--iris-azure-100)
  );
  --company-color-email-tag-dynamic-label-active: var(
    --company-color-tag-dynamic-label-active,
    var(--iris-azure-110)
  );
  /* Tables */
  /* Header */
  --company-color-email-table-header-background: var(
    --company-color-table-header-background,
    var(--iris-gray-10)
  );
  --company-color-email-table-header-background-hover: var(
    --company-color-table-header-background-hover,
    var(--iris-gray-20)
  );
  --company-color-email-table-header-background-active: var(
    --company-color-table-header-background-active,
    var(--iris-gray-30)
  );
  --company-color-email-table-header-border-primary: var(
    --company-color-table-header-border-primary,
    var(--iris-gray-30)
  );
  --company-color-email-table-header-border-secondary: var(
    --company-color-table-header-border-secondary,
    var(--iris-gray-50)
  );
  /* Row */
  --company-color-email-table-row-background: var(
    --company-color-table-row-background,
    var(--iris-white)
  );
  --company-color-email-table-row-background-hover: var(
    --company-color-table-row-background-hover,
    var(--iris-gray-10)
  );
  --company-color-email-table-row-background-active: var(
    --company-color-table-row-background-active,
    var(--iris-blue-10)
  );
  --company-color-email-table-row-background-active-disabled: var(
    --company-color-table-row-background-active-disabled,
    var(--iris-blue-10)
  );
  --company-color-email-table-row-border: var(
    --company-color-table-row-border,
    var(--iris-gray-30)
  );
  --company-color-email-table-row-border-active: var(
    --company-color-table-row-border-active,
    var(--iris-blue-100)
  );
  /* Focus */
  --company-color-email-focus: var(--company-color-focus, var(--iris-blue-80));
  --company-color-email-focus-inverse: var(--company-color-focus-inverse, var(--iris-white));
  /* Progress Track */
  --company-color-email-track-progress-unfilled: var(
    --company-color-progress-unfilled,
    var(--iris-white)
  );
  --company-color-email-track-progress: var(--company-color-progress, var(--iris-gray-50));
  --company-color-email-track-progress-running: var(
    --company-color-progress-running,
    var(--iris-green-90)
  );
  /* Slider Track */
  --company-color-email-track-slider-unfilled: var(
    --company-color-track-slider-unfilled,
    var(--iris-gray-30)
  );
  --company-color-email-track-slider-unfilled-disabled: var(
    --company-color-track-slider-unfilled-disabled,
    var(--iris-gray-20)
  );
  --company-color-email-track-slider-filled: var(
    --company-color-track-slider-filled,
    var(--iris-blue-80)
  );
  --company-color-email-track-slider-filled-disabled: var(
    --company-color-track-slider-filled-disabled,
    var(--iris-blue-40)
  );
  --company-color-email-track-slider-thumb: var(
    --company-color-track-slider-thumb,
    var(--iris-blue-80)
  );
  --company-color-email-track-slider-thumb-hover: var(
    --company-color-track-slider-thumb-hover,
    var(--iris-blue-100)
  );
  --company-color-email-track-slider-thumb-active: var(
    --company-color-track-slider-thumb-active,
    var(--iris-blue-110)
  );
  --company-color-email-track-slider-thumb-disabled: var(
    --company-color-track-slider-thumbd-disabled,
    var(--iris-blue-40)
  );
  --company-color-email-track-slider-thumb-overlay: var(
    --company-color-track-slider-thumb-overlay,
    rgba(10, 104, 177, 0, 2)
  );
  /* Forms */
  --company-color-email-form-background: var(--company-color-form-background, var(--iris-white));
  --company-color-email-form-background-active: var(
    --company-color-form-background-active,
    var(--iris-white)
  );
  --company-color-email-form-background-disabled: var(
    --company-color-form-background-disabled,
    var(--iris-gray-10)
  );
  --company-color-email-form-background-error: var(
    --company-color-form-background-error,
    var(--iris-white)
  );
  --company-color-email-form-border: var(--company-color-form-border, var(--iris-gray-80));
  --company-color-email-form-border-active: var(
    --company-color-form-border-active,
    var(--iris-blue-80)
  );
  --company-color-email-form-border-disabled: var(
    --company-color-form-border-disabled,
    var(--iris-gray-80)
  );
  --company-color-email-form-border-error: var(
    --company-color-form-border-error,
    var(--iris-red-80)
  );
  --company-color-email-form-label: var(--company-color-form-label, var(--iris-gray-110));
  --company-color-email-form-label-active: var(
    --company-color-form-label-active,
    var(--iris-gray-110)
  );
  --company-color-email-form-label-disabled: var(
    --company-color-form-label-disabled,
    var(--iris-gray-80)
  );
  --company-color-email-form-label-error: var(
    --company-color-form-label-error,
    var(--iris-gray-110)
  );
  --company-color-email-form-text: var(--company-color-form-text, var(--iris-gray-110));
  --company-color-email-form-text-active: var(
    --company-color-form-text-active,
    var(--iris-gray-110)
  );
  --company-color-email-form-text-disabled: var(
    --company-color-form-text-disabled,
    var(--iris-gray-110)
  );
  --company-color-email-form-text-error: var(--company-color-form-text-error, var(--iris-gray-110));
  --company-color-email-form-icon: var(--company-color-form-icon, var(--iris-gray-110));
  --company-color-email-form-icon-active: var(
    --company-color-form-icon-active,
    var(--iris-gray-110)
  );
  --company-color-email-form-icon-disabled: var(
    --company-color-form-icon-disabled,
    var(--iris-gray-80)
  );
  --company-color-email-form-icon-error: var(--company-color-form-icon-error, var(--iris-gray-110));
  --company-color-email-form-select-background: var(
    --company-color-form-select-background,
    var(--iris-white)
  );
  --company-color-email-form-select-background-hover: var(
    --company-color-form-select-background-hover,
    var(--iris-gray-20)
  );
  --company-color-email-form-select-background-active: var(
    --company-color-form-select-background-active,
    var(--iris-gray-30)
  );
  --company-color-email-form-select-background-disabled: var(
    --company-color-form-select-background-disabled,
    var(--iris-gray-10)
  );
  --company-color-email-form-select-background-error: var(
    --company-color-form-select-background-error,
    var(--iris-white)
  );
  /* File Uploader */
  --company-color-email-uploader-background: var(
    --company-color-uploader-background,
    var(--iris-white)
  );
  --company-color-email-uploader-background-hover: var(
    --company-color-uploader-background-hover,
    var(--iris-blue-10)
  );
  --company-color-email-uploader-background-disabled: var(
    --company-color-uploader-background-disabled,
    var(--iris-gray-10)
  );
  --company-color-email-uploader-background-error: var(
    --company-color-uploader-background-error,
    var(--iris-white)
  );
  --company-color-email-uploader-border: var(--company-color-uploader-border, var(--iris-gray-80));
  --company-color-email-uploader-border-hover: var(
    --company-color-uploader-border-hover,
    var(--iris-blue-80)
  );
  --company-color-email-uploader-border-disabled: var(
    --company-color-uploader-border-disabled,
    var(--iris-gray-80)
  );
  --company-color-email-uploader-border-error: var(
    --company-color-uploader-border-error,
    var(--iris-red-80)
  );
  --company-color-email-uploader-label: var(--company-color-uploader-label, var(--iris-gray-110));
  --company-color-email-uploader-label-hover: var(
    --company-color-uploader-label-hover,
    var(--iris-gray-110)
  );
  --company-color-email-uploader-label-disabled: var(
    --company-color-uploader-label-disabled,
    var(--iris-gray-80)
  );
  --company-color-email-uploader-label-error: var(
    --company-color-uploader-label-error,
    var(--iris-gray-110)
  );
  --company-color-email-uploader-icon: var(--company-color-uploader-icon, var(--iris-blue-80));
  --company-color-email-uploader-icon-hover: var(
    --company-color-uploader-icon-hover,
    var(--iris-blue-80)
  );
  --company-color-email-uploader-icon-disabled: var(
    --company-color-uploader-icon-disabled,
    var(--iris-blue-40)
  );
  --company-color-email-uploader-icon-error: var(
    --company-color-uploader-icon-error,
    var(--iris-blue-80)
  );
  /* Drag */
  --company-color-email-drag: var(--company-color-drag, var(--iris-azure-60));
  /* Scroll */
  --company-color-email-scroll: var(--company-color-scroll, var(--iris-gray-80));
  /* Tooltip */
  --company-color-email-tooltip-icon: var(--company-color-tooltip-icon, var(--iris-blue-80));
  --company-color-email-tooltip-background: var(
    --company-color-tooltip-background,
    var(--iris-slate-blue-100)
  );
  --company-color-email-tooltip-text: var(--company-color-tooltip-text, var(--iris-white));

  /* Agent desktop */
  --company-color-agent-desktop-line-border: var(--company-color-tag-border, var(--iris-gray-50));
  --company-color-agent-desktop-text-secondary: var(
    --company-color-text-secondary,
    var(--iris-gray-80)
  );
  --company-color-agent-desktop-button-hover: var(--iris-blue-80);
  --company-color-agent-desktop-background-inverse: var(--iris-blue-100);
  /* Export & Import*/
  --company-color-error-text-failed-case: var(--iris-darker-gray-100);
  --company-color-error-background-failed-case: var(--iris-red-10);
  --company-color-selected-background-record: var(--iris-brand-blue-10);
  --company-color-tooltip-background: var(--iris-slate-blue-100);
  /* queue restrictions */
  --company-color-transfer-queue-background: var(--iris-blue-10);
  --company-color-transfer-queue-background-secondary: var(--iris-blue-20);
  --company-color-transfer-queue-configure-tag: var(--iris-blue-100);
}