:import {
  -st-from: "../../../Foundation/stylable/mixins/calc_rgba";
  -st-default: calc_rgba;
}

:vars {
  /* General */
  D10: #000624;
  D20: #333850;
  D30: #595D70;
  D40: #868AA5;
  D55: #CFD1DC;
  D60: #DFE5EB;
  D70: #ECEFF3;


  /* Primary */
  B05: #0F62E6;
  B10: #116DFF;
  B20: #418AFF;
  B30: #7CAFFF;
  B40: #C3DAFF;
  B50: #E8F1FF;
  B60: #F8FAFF;
  D80: #FFFFFF;

  /* Premium */
  P00: #8E21B1;
  P10: #AA4DC8;
  P20: #CD68ED;

  /* With Opacity */
  D10-30: calc_rgba(value(D10), 0.3);
  D10-40: calc_rgba(value(D10), 0.4);
  D10-50: calc_rgba(value(D10), 0.5);
  D80-70: calc_rgba(value(D80), 0.7);

  /* Success */
  G10: #51B77B;
  G20: #51B77B;
  G40: #C8E8D6;

  /* Destructive */
  R10: #EE4437;
  R20: #F1695F;
  R50: #FDECEB;

  /* Orange */
  O10: #F96132;

  /* Categories */
  A2: #5A48F5;
  A3: #06BEE1;
  A4: #CDC8FC;
  A5: #FBAD4E;

  /* Sidebar */
  sidebarBackgroundColor: #131720;
  textColor: value(D80);
  selectedBackgroundColor: calc_rgba(value(D80), 0.1);
  selectedTextColor: value(D80);
  hoveredBackgroundColor: calc_rgba(value(D80), 0.05);
  disabledBackgroundColor: value(sidebarBackgroundColor);
  disabledTextColor: calc_rgba(value(D80), 0.6);
  dividerColor: calc_rgba(value(D80), 0.1);
  darkScrollbarThumbColor: #717479;
  darkScrollbarThumbHoverColor: #b8b9bc;

  /* Shadows */
  S4: calc_rgba(value(D10), 0.2);
  S5: calc_rgba(value(D10), 0.16);
}