/**
 * Important: nothing in this file should output CSS; it should all be mixins,
 * functions, variables, etc
 */
/* The following mixin is useful when you want to import a SASS map as a key-value object in *.ts/x files.

  Example usage:

  // colors.scss
  $colors: (
    black: #000,
    white: #fff;
  );

  @include export-key-value($colors);

  // colors.ts
  import colors from 'colors.scss'
*/
/* The following mixin is useful when you want to import a SASS map as a key-value object in *.ts/x files.

  Example usage:

  // colors.scss
  $colors: (
    black: #000,
    white: #fff;
  );

  @include export-key-value($colors);

  // colors.ts
  import colors from 'colors.scss'
*/
:export {
  color-black: #222;
  color-white: #fff;
  color-grey: #f7f7f7;
  color-white-alpha-10: rgba(255, 255, 255, 0.1);
  color-white-alpha-40: rgba(255, 255, 255, 0.4);
  color-white-alpha-60: rgba(255, 255, 255, 0.6);
  color-white-alpha-80: rgba(255, 255, 255, 0.8);
  color-grey-alpha-10: rgba(0, 0, 0, 0.1);
  color-grey-alpha-40: rgba(0, 0, 0, 0.4);
  color-grey-alpha-60: rgba(0, 0, 0, 0.6);
  color-grey-alpha-80: rgba(0, 0, 0, 0.8);
  color-red-alert: #d70c00;
  color-red-alert-light: #fbe7e6;
  color-red-brand: #900;
  color-red-brand-light: #f5e6e6;
  color-positive-teal-dark: #0a7f7f;
  color-positive-teal-light: #e7f2f2;
  color-turquoise-light: #1cd6d9;
}

:export {
  1: 4px;
  2: 8px;
  3: 12px;
  4: 16px;
  5: 24px;
  6: 32px;
  7: 40px;
  8: 48px;
  9: 56px;
  10: 64px;
  11: 80px;
  12: 128px;
}

:export {
  heading-xl-serif: heading-xl-serif;
  heading-l-serif: heading-l-serif;
  heading-m-serif: heading-m-serif;
  heading-m-serif-tertiary: heading-m-serif-tertiary;
  heading-m-sans: heading-m-sans;
  heading-s-serif: heading-s-serif;
  heading-s-sans: heading-s-sans;
  heading-s-sans-tertiary: heading-s-sans-tertiary;
  heading-s-serif-tertiary: heading-s-serif-tertiary;
  heading-xs-serif: heading-xs-serif;
  heading-xs-sans: heading-xs-sans;
  heading-xs-serif-tertiary: heading-xs-serif-tertiary;
  body: body;
  body-medium: body-medium;
  body-s: body-s;
  body-s-medium: body-s-medium;
  body-xs: body-xs;
  label: label;
  label-medium: label-medium;
  label-s: label-s;
  label-s-medium: label-s-medium;
  action: action;
  action-m: action-m;
  action-l: action-l;
}

/* The following mixin is useful when you want to import a SASS map as a key-value object in *.ts/x files.

  Example usage:

  // colors.scss
  $colors: (
    black: #000,
    white: #fff;
  );

  @include export-key-value($colors);

  // colors.ts
  import colors from 'colors.scss'
*/
:export {
  sm: 2px;
  md: 4px;
}

/* The following mixin is useful when you want to import a SASS map as a key-value object in *.ts/x files.

  Example usage:

  // colors.scss
  $colors: (
    black: #000,
    white: #fff;
  );

  @include export-key-value($colors);

  // colors.ts
  import colors from 'colors.scss'
*/
:export {
  duration-long: 2s;
  duration-base: 1s;
  duration-short: 0.5s;
  duration-shorter: 0.3s;
  duration-shortest: 0.15s;
}

:root {
  --z-index-base: 0;
}

.chr-live-chat .tagove-livechat-widget {
  transition-duration: 0.15s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1);
  opacity: 0;
}
.chr-live-chat .chr-live-chat-loaded .tagove-livechat-widget {
  opacity: 1;
}
.chr-live-chat .chr-live-chat {
  position: fixed;
  right: 20px;
  bottom: 16px;
  z-index: 1050;
  outline: inherit;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  animation: opacity 0.15s cubic-bezier(0.39, 0.58, 0.57, 1);
  color: inherit;
  font: inherit;
}
@keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.chr-live-chat .chr-live-chat .cls-1 {
  fill: #cbcbcb;
}
.chr-live-chat .chr-live-chat .cls-2 {
  fill: #bbb;
}
.chr-live-chat .chr-live-chat .cls-3 {
  fill: #c4c4c4;
}
.chr-live-chat .chr-live-chat .cls-4 {
  fill: #cacaca;
}
.chr-live-chat .chr-live-chat svg {
  width: 60px;
  height: 60px;
}
.chr-live-chat .chr-live-chat--desktop svg {
  width: 179px;
}

/*# sourceMappingURL=christies-design-system-library-live-chat.css.map */