$themeColor: #58acec;

$inter: Inter, 'Helvetica Neue', 'Source Sans Pro', 'Source Han Sans SC',
  'Source Han Sans CN', 'Hiragino Sans GB', 'Hiragino Kaku Gothic',
  'Microsoft Yahei UI', Helvetica, Arial, sans-serif;

/** menu */
$color-menu-bkg: #07151e;
$color-menu-bkg-dark: #102e41;
$color-menu-border: #7d8082;
$color-menu-border-dark: #17435e;

/** sider */
$color-sider-bkg: #f7f7f9;
$color-sider-border: #f2f2f3;

/** chatInterface header */
$color-cIt-header-border: #f3f3f3;

/** input */
$color-input-bkg: #f1f2f3;
$color-input-placeholder: #afb4bc;

/** roomitem */
$color-roomitem-border: #f4f4f4;

// -- V3 Colors

$color-accent-blue: #2c6bed;
$color-accent-green: #4caf50;
$color-accent-red: #f44336;
$color-accent-yellow: #ffd624;

$color-white: #ffffff;
$color-gray-02: #f6f6f6;
$color-gray-05: #e9e9e9;
$color-gray-15: #dedede;
$color-gray-20: #c6c6c6;
$color-gray-25: #b9b9b9;
$color-gray-45: #848484;
$color-gray-60: #5e5e5e;
$color-gray-65: #4a4a4a;
$color-gray-75: #3b3b3b;
$color-gray-80: #2e2e2e;
$color-gray-90: #1b1b1b;
$color-gray-95: #121212;
$color-black: #000000;

$color-white-alpha-20: rgba($color-white, 0.2);
$color-white-alpha-60: rgba($color-white, 0.6);
$color-white-alpha-80: rgba($color-white, 0.8);
$color-white-alpha-90: rgba($color-white, 0.9);

$color-black-alpha-05: rgba($color-black, 0.05);
$color-black-alpha-20: rgba($color-black, 0.2);
$color-black-alpha-40: rgba($color-black, 0.4);
$color-black-alpha-60: rgba($color-black, 0.6);

$ultramarine-brand-light: #3a76f0;
$ultramarine-brand-dark: #1851b4;
$ultramarine-ui-light: #2c6bed;
$ultramarine-ui-dark: #6191f3;

$color-crimson: #cc163d;
$color-vermilion: #c73800;
$color-burlap: #746c53;
$color-forest: #3b7845;
$color-wintergreen: #1c8260;
$color-teal: #067589;
$color-blue: #336ba3;
$color-indigo: #5951c8;
$color-violet: #862caf;
$color-plum: #a23474;
$color-taupe: #895d66;
$color-steel: #6b6b78;

// Tints and shades

// Used for iOS theme and the safety number change warning banner
$color-ios-blue-tint: #b0c8f9;

// Used for scroll down button hover state when it has new messages
$color-ios-ref-warning-light: #d2def8;
$color-ios-ref-warning-dark: #7b97cd;

$color-crimson-tint: #eda6ae;
$color-vermilion-tint: #eba78e;
$color-burlap-tint: #c4b997;
$color-forest-tint: #8fcc9a;
$color-wintergreen-tint: #9bcfbd;
$color-teal-tint: #a5cad5;
$color-blue-tint: #adc8e1;
$color-indigo-tint: #c2c1e7;
$color-violet-tint: #cdaddc;
$color-plum-tint: #dcb2ca;
$color-taupe-tint: #cfb5bb;
$color-steel-tint: #bebec6;

$color-crimson-shade: #8a0f29;
$color-vermilion-shade: #872600;
$color-burlap-shade: #58513c;
$color-forest-shade: #2b5934;
$color-wintergreen-shade: #36544a;
$color-teal-shade: #055968;
$color-blue-shade: #285480;
$color-indigo-shade: #4840a0;
$color-violet-shade: #6b248a;
$color-plum-shade: #881b5b;
$color-taupe-shade: #6a4e54;
$color-steel-shade: #5a5a63;

// Semantic conversation colors

$color-conversation-red: $color-crimson;
$color-conversation-deep_orange: $color-vermilion;
$color-conversation-brown: $color-burlap;
$color-conversation-pink: $color-plum;
$color-conversation-purple: $color-violet;
$color-conversation-indigo: $color-indigo;
$color-conversation-blue: $color-blue;
$color-conversation-teal: $color-teal;
$color-conversation-green: $color-forest;
$color-conversation-light_green: $color-wintergreen;
$color-conversation-blue_grey: $color-taupe;
$color-conversation-grey: $color-steel;
$color-conversation-ultramarine: $ultramarine-ui-light;

$color-conversation-red-tint: $color-crimson-tint;
$color-conversation-deep_orange-tint: $color-vermilion-tint;
$color-conversation-brown-tint: $color-burlap-tint;
$color-conversation-pink-tint: $color-plum-tint;
$color-conversation-purple-tint: $color-violet-tint;
$color-conversation-indigo-tint: $color-indigo-tint;
$color-conversation-blue-tint: $color-blue-tint;
$color-conversation-teal-tint: $color-teal-tint;
$color-conversation-green-tint: $color-forest-tint;
$color-conversation-light_green-tint: $color-wintergreen-tint;
$color-conversation-blue_grey-tint: $color-taupe-tint;
$color-conversation-grey-tint: $color-steel-tint;
$color-conversation-ultramarine-tint: $color-ios-blue-tint;

$color-conversation-red-shade: $color-crimson-shade;
$color-conversation-deep_orange-shade: $color-vermilion-shade;
$color-conversation-brown-shade: $color-burlap-shade;
$color-conversation-pink-shade: $color-plum-shade;
$color-conversation-purple-shade: $color-violet-shade;
$color-conversation-indigo-shade: $color-indigo-shade;
$color-conversation-blue-shade: $color-blue-shade;
$color-conversation-teal-shade: $color-teal-shade;
$color-conversation-green-shade: $color-forest-shade;
$color-conversation-light_green-shade: $color-wintergreen-shade;
$color-conversation-blue_grey-shade: $color-taupe-shade;
$color-conversation-grey-shade: $color-steel-shade;
$color-conversation-ultramarine-shade: $ultramarine-brand-dark;

// Maps for easy manipulation

$conversation-colors: (
  'red': $color-conversation-red,
  'deep_orange': $color-conversation-deep_orange,
  'brown': $color-conversation-brown,
  'pink': $color-conversation-pink,
  'purple': $color-conversation-purple,
  'indigo': $color-conversation-indigo,
  'blue': $color-conversation-blue,
  'teal': $color-conversation-teal,
  'green': $color-conversation-green,
  'light_green': $color-conversation-light_green,
  'blue_grey': $color-conversation-blue_grey,
  'ultramarine': $color-conversation-ultramarine,
);
$conversation-colors-tint: (
  'red': $color-conversation-red-tint,
  'deep_orange': $color-conversation-deep_orange-tint,
  'brown': $color-conversation-brown-tint,
  'pink': $color-conversation-pink-tint,
  'purple': $color-conversation-purple-tint,
  'indigo': $color-conversation-indigo-tint,
  'blue': $color-conversation-blue-tint,
  'teal': $color-conversation-teal-tint,
  'green': $color-conversation-green-tint,
  'light_green': $color-conversation-light_green-tint,
  'blue_grey': $color-conversation-blue_grey-tint,
  'ultramarine': $color-conversation-ultramarine-tint,
);
$conversation-colors-shade: (
  'red': $color-conversation-red-shade,
  'deep_orange': $color-conversation-deep_orange-shade,
  'brown': $color-conversation-brown-shade,
  'pink': $color-conversation-pink-shade,
  'purple': $color-conversation-purple-shade,
  'indigo': $color-conversation-indigo-shade,
  'blue': $color-conversation-blue-shade,
  'teal': $color-conversation-teal-shade,
  'green': $color-conversation-green-shade,
  'light_green': $color-conversation-light_green-shade,
  'blue_grey': $color-conversation-blue_grey-shade,
  'ultramarine': $color-conversation-ultramarine-shade,
);

// -- Non-V3 colors

// Used in spinners
$color-white-alpha-40: rgba($color-white, 0.4);

// Used in tap-to-view error states
$color-deep-red: #ff261f;

// -- A few layout variables used cross-file

$left-pane-width: 320px;
$header-height: 48px;

$ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

@mixin flex($direction: row, $justify: flex-start, $align: flex-start) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
}

@mixin ellipse {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

// Fonts

@mixin font-title-1 {
  font-family: $inter;
  font-weight: bolder;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.56px;
}

@mixin font-title-2 {
  font-family: $inter;
  font-weight: bolder;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.34px;
}

@mixin font-body-1 {
  font-family: $inter;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: -0.14px;
}

@mixin font-body-1-bold {
  @include font-body-1;
  font-weight: bold;
}

@mixin font-body-1-italic {
  @include font-body-1;
  font-style: italic;
}

@mixin font-body-1-bold-italic {
  @include font-body-1;
  font-weight: bold;
  font-style: italic;
}

@mixin font-body-2 {
  font-family: $inter;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.03px;
}

@mixin font-body-2-bold {
  @include font-body-2;
  font-weight: bold;
}

@mixin font-body-2-italic {
  @include font-body-2;
  font-style: italic;
}

@mixin font-body-2-bold-italic {
  @include font-body-2;
  font-weight: bold;
  font-style: italic;
}

@mixin font-subtitle {
  font-family: $inter;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
}

@mixin font-caption {
  font-family: $inter;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06px;
}

@mixin font-caption-bold {
  @include font-caption;
  font-weight: bold;
}

@mixin font-caption-bold-italic {
  @include font-caption;
  font-weight: bold;
  font-style: italic;
}

// Themes
// To prevent matching the corresponding theme
@mixin light-theme() {
  @content;
}

@mixin dark-theme() {
  .dark-theme & {
    @content;
  }
}

@mixin ios-theme() {
  .ios-theme & {
    @content;
  }
}

@mixin ios-dark-theme() {
  .dark-theme.ios-theme & {
    @content;
  }
}

// Icons

@mixin color-svg($svg, $color, $stretch: true) {
  -webkit-mask: url($svg) no-repeat center;

  @if $stretch {
    -webkit-mask-size: 100%;
  }

  background-color: $color;
}

@mixin header-icon-white($svg) {
  @include color-svg($svg, $color-white-alpha-80);

  &:focus,
  &:hover {
    @include color-svg($svg, $color-white);
  }
}

@mixin header-icon-black($svg) {
  @include color-svg($svg, $color-black-alpha-40);

  &:focus,
  &:hover {
    @include color-svg($svg, black);
  }
}

// Keyboard

@mixin keyboard-mode() {
  .keyboard-mode & {
    @content;
  }
}

@mixin mouse-mode() {
  .mouse-mode & {
    @content;
  }
}

@mixin dark-keyboard-mode() {
  .dark-theme.keyboard-mode & {
    @content;
  }
}

@mixin ios-keyboard-mode() {
  .ios-theme.keyboard-mode & {
    @content;
  }
}

@mixin dark-mouse-mode() {
  .dark-theme.mouse-mode & {
    @content;
  }
}

@mixin ios-mouse-mode() {
  .ios-theme.mouse-mode & {
    @content;
  }
}

@mixin dark-ios-keyboard-mode() {
  .dark-theme.ios-theme.keyboard-mode & {
    @content;
  }
}

// Other

@mixin popper-shadow() {
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3), 0px 0px 8px rgba(0, 0, 0, 0.05);
}

@mixin button-reset {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  text-align: inherit;
}
