@import "./tokens.css";
@import "./portal.css";
@import "./call-adapter.css";
@import "./chat-adapter.css";

@font-face {
  font-family: 'GoogleSans';
  src: url('/oem-themes/fonts/GoogleSans-Regular.ttf')  format('truetype');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'GoogleSans';
  src: url('/oem-themes/fonts/GoogleSans-MediumItalic.ttf')  format('truetype');
  font-style: italic;
  font-weight: medium;
}

@font-face {
  font-family: 'GoogleSans';
  src: url('/oem-themes/fonts/GoogleSans-Medium.ttf')  format('truetype');
  font-style: normal;
  font-weight: medium;
}

@font-face {
  font-family: 'GoogleSans';
  src: url('/oem-themes/fonts/GoogleSans-Italic.ttf')  format('truetype');
  font-style: italic;
  font-weight: normal;
}

@font-face {
  font-family: 'GoogleSans';
  src: url('/oem-themes/fonts/GoogleSans-Bold.ttf')  format('truetype');
  font-style: normal;
  font-weight: bold;
}

@font-face {
  font-family: 'GoogleSans';
  src: url('/oem-themes/fonts/GoogleSans-BoldItalic.ttf')  format('truetype');
  font-style: italic;
  font-weight: bold;
}

:root {
  --light-company-logo-admin: url('/oem-themes/images/light-logo.svg');
  --light-company-logo-agent: url('/oem-themes/images/empty-logo.svg');
  --dark-company-logo-admin: url('/oem-themes/images/dark-logo.svg');
  --dark-company-logo-agent: url('/oem-themes/images/dark-logo.svg');
  --gray-company-logo-agent-email: url('/oem-themes/images/empty-logo.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: GoogleSans;
--font-family-body: Roboto;

/* 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-oem-brand-00: #F1F4FE;
  --iris-oem-brand-10: #E2EAFD;
  --iris-oem-brand-20: #BCD4FB;
  --iris-oem-brand-30: #BCD4FB;
  --iris-oem-brand-40: #6DA2F7;
  --iris-oem-brand-50: #4285F4;
  --iris-oem-brand-60: #2A6FF3;
  --iris-oem-brand-70: #0C5AE6;
  --iris-oem-brand-80: #0B41AD;
  --iris-oem-brand-90: #06338C;
  --iris-oem-brand-100: #041F59;
  --iris-oem-brand-110: #224274;

  /* gcpteam font colors. Will be mapped to our existing theme */
  --gcpteam-primary-text: #3c4043;
  --gcpteam-secondary-text: #5f6368;
  --gcpteam-reversed-text: #ffffff;
  --gcpteam-interactive-text: #1a73e8;
  --gcpteam-error-text: #d93025;
  --gcpteam-success-text: #188038;
  --gcpteam-disabled-text: #dadce0;


/* ------------------------------------------------------
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.
------------------------------------------------------ */



/* Current Ramp with button diff */
--company-color-primary-100: var(--iris-white);
--company-color-primary-90: #f3f3f3;
--company-color-primary-80: #f1f3f4;
--company-color-primary-70: #d2d2d2;
--company-color-primary-60: #bcbcbc;
--company-color-primary-50: #a1a1a1;
--company-color-primary-40: #919191;
--company-color-primary-30: #f2f2f2;
--company-color-primary-20: #8ab4f8;
--company-color-primary-10: #669df6;
--company-color-primary-00: #4285F4;

  --gcpteam-formfield-decorative-01: var(--company-color-primary-00);

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

  --company-color-tertiary-100: var(--iris-red-10);
  --company-color-tertiary-90: var(--iris-red-20);
  --company-color-tertiary-80: var(--iris-red-30);
  --company-color-tertiary-70: var(--iris-red-40);
  --company-color-tertiary-60: var(--iris-red-50);
  --company-color-tertiary-50: var(--iris-red-60);
  --company-color-tertiary-40: var(--iris-red-70);
  --company-color-tertiary-30: var(--iris-red-80);
  --company-color-tertiary-20: var(--iris-red-90);
  --company-color-tertiary-10: 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". */

/* ------------------------------------------------------
TABLE ELEMENT COLORS
Colors meant for header, row and column
------------------------------------------------------ */
--company-color-primary-table-10: var(--color-b50);
--company-color-secondary-table-10: var(--color-g100);
--company-color-secondary-table-20: var(--color-g200);

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

 /* Text on main background color */
 --company-color-text: var(--gcpteam-primary-text);
 --company-color-background: var(--iris-white);
 --company-color-text-interactive-01: var(--gcpteam-interactive-text);
 --company-color-text-disabled: var(--gcpteam-disabled-text);

 /* Text on colored and inverse backgrounds: */
 --company-color-text-inverse: var(--gcpteam-reversed-text);
 --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-00);
  --company-color-interactive-01-hover: var(--iris-oem-brand-30); /* 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(--gcpteam-disabled-text);

  /* 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-100);
  --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(--gcpteam-disabled-text);

  /* 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(--gcpteam-disabled-text);

  /* 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(--gcpteam-disabled-text);


/* ------------------------------------------------------
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(--gcpteam-formfield-decorative-01);
--company-color-formfield-decorative-01: var(--gcpteam-formfield-decorative-01);
--company-color-formfield-decorative-02: var(--company-color-ui-shade-60);
--company-color-formfield-decorative-03: var(--company-color-primary-70);
--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-gray-70);
--company-color-information: var(--company-color-primary-70);
--company-color-information-hover: var(--company-color-primary-60);
--company-color-information-active: var(--company-color-primary-80);
--company-color-information-focus: var(--company-color-primary-80);
--company-color-information-disabled: var(--iris-gray-50);

/* ------------------------------------------------------
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(--gcpteam-error-text);
--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(--gcpteam-success-text);
--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(--gcpteam-success-text);
--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-decorative-icon-background: var(--company-color-primary-60);
--company-color-decorative-icon-label: var(--company-color-primary-00);

/*
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-100);
--company-color-header-text: var(--company-color-text);

--company-color-header-menu-item-text: var(--company-color-text-interactive-01);
--company-color-header-menu-item-background: var(--company-color-background);
--company-color-header-menu-item-hover-text: var(--company-color-text);
--company-color-header-menu-item-hover-background: var(--company-color-primary-80);

--company-color-sidebar-interactive-primary: var(--iris-oem-brand-50);
--company-color-sidebar-interactive-secondary: var(--iris-oem-brand-10);
--company-color-sidebar-background-primary: var(--iris-white);
--company-color-sidebar-background-secondary: var(--iris-white);
--company-color-sidebar-interactive-hover: var(--iris-white);
--company-color-sidebar-text-inverse: var(--company-color-text-inverse);
--company-color-sidebar-text: var(--company-color-text);

--company-color-navbar-background: var(--iris-white);
--company-color-navbar-interactive-primary: var(--iris-oem-brand-50);
--company-color-navbar-interactive-secondary: var(--iris-oem-brand-70);
--company-color-navbar-interactive-hover: var(--iris-oem-brand-70);
--company-color-navbar-interactive-button-hover: var(--iris-gray-10);
--company-color-navbar-dropdown-background: var(--iris-white);
--company-color-navbar-text-inverse: var(--iris-white);
--company-color-navbar-text: var(--company-color-text);

/*
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-inverse);
--company-color-admin-portal-agents-filter-settings-interactive-text: var(--company-color-interactive-02);
--company-color-admin-portal-call-detail-text: var(--company-color-text);
--company-color-admin-portal-call-detail-dialog-sidebar-background: var(--company-color-background);
--company-color-admin-portal-call-detail-action-content-background: var(--company-color-primary-70);
--company-color-admin-portal-call-detail-primary-button-text: var(--company-color-text-inverse);
--company-color-admin-portal-call-detail-primary-button-background: var(--company-color-interactive-01);
--company-color-admin-portal-call-detail-secondary-button-text: var(--company-color-interactive-01);
--company-color-admin-portal-call-detail-secondary-button-background: var(--company-color-background);
--company-color-admin-portal-holiday-drawer-background: var(--iris-brand-blue-10);
--company-color-admin-portal-input-element-active: var(--gcpteam-formfield-decorative-01);

/*
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-100);
--company-color-agent-adapter-text: var(--company-color-text);
--company-color-agent-adapter-select-background: var(--iris-gray-60);
--company-color-agent-adapter-select-active: var(--company-color-primary-00);
--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-voicemail-button-background: var(--company-color-primary-00);
--company-color-agent-adapter-primary-button-text: var(--company-color-interactive-01-label);
--company-color-agent-adapter-primary-button-background: var(--company-color-interactive-01);
--company-color-agent-adapter-secondary-button-background: var(--company-color-primary-00);
--company-color-agent-adapter-track: var(--company-color-primary-30);
--company-color-agent-adapter-track-fill: var(--company-color-primary-50);
--company-color-agent-adapter-campaign-call-message-background: #5F6368;
--company-color-agent-adapter-in-call-action-button-icon: var(--company-color-primary-100);
--company-color-agent-adapter-in-call-action-button-background: var(--company-color-primary-00);
--company-color-agent-adapter-in-call-action-button-border: var(--company-color-primary-00);
--company-color-agent-adapter-unselected-chat-text: var(--company-color-text-inverse);

--company-color-agent-adapter-message-bubble-mine-background: var(--company-color-primary-80);
--company-color-agent-adapter-message-bubble-other-background: #E8F0FE;
--company-color-agent-adapter-message-bubble-mine-text: #5F6368;
--company-color-agent-adapter-message-bubble-other-text: #5F6368;

--company-color-agent-adapter-outbound-call-button-interactive-label: var(--company-color-interactive-01-label);
--company-color-agent-adapter-outbound-call-button-interactive-background: var(--company-color-interactive-01);
--company-color-agent-adapter-outbound-call-button-interactive-hover: var(--company-color-interactive-01-hover);
--company-color-agent-adapter-outbound-call-background-color: #F8F9FA;
--company-color-agent-adapter-outbound-call-text: #5F6368;
--company-color-agent-adapter-outbound-call-text-border: #5F6368;
--company-color-agent-adapter-outbound-call-keypad-text: #5F6368;
--company-color-agent-adapter-outbound-call-keypad-hover-text: var(--company-color-text-inverse);
--company-color-agent-adapter-outbound-call-keypad-border: #5F6368;

--company-color-agent-adapter-phone-number-selector-text: #5F6368;
--company-color-agent-adapter-phone-number-selector-background: var(--company-color-primary-100);
--company-color-agent-adapter-phone-number-selector-border: var(--company-color-primary-80);
--company-color-agent-adapter-phone-number-selector-carot: #5F6368;
--company-color-agent-adapter-phone-number-selector-search-text: #5F6368;
--company-color-agent-adapter-phone-number-selector-dropdown-text: #5F6368;

--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-background);
--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: #F6F8FC;
--company-color-agent-adapter-chat-agt-primary-color-70: #DADCE0;
--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-background);
--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(--iris-white);
--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: #DADCE0;

--company-color-tab-adapter-background: var(--iris-white);
--company-color-tab-adapter-background-hover: #1B66C9;
--company-color-tab-adapter-background-active: #D2E3FC;
--company-color-tab-adapter-background-disabled: var(--iris-white);
--company-color-tab-adapter-label: #174EA6;
--company-color-tab-adapter-label-hover: var(--iris-white);
--company-color-tab-adapter-label-active: #174EA6;
--company-color-tab-adapter-label-disabled: var(----company-color-primary-20);

--company-color-shadow-flag: 0 0 0.125rem 0 rgba(0, 0, 0, 0.14), 0 0.063rem 0.188rem 0 rgba(0, 0, 0, 0.20);
}