/*
 * Colors with opacity (only those stored as stylable vars) are managed in wix-ui-core only.
 * We added there functionality of calc_rgba calculation, and colors with opacity are calculated there.
 * We want to gradually remove colors duplications between projects
 */

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

:vars {
  /* General */
  D10: #162D3D; /* Primary Text */
  D20: #32536A; /* Secondary Text */
  D30: #577083;
  D40: #7A92A5; /* Placeholder Text */
  D50: #B6C1CD; /* Disabled - Icon */
  D55: #CBD3DC; /* Disabled - Text, Action Background */
  D60: #DFE5EB; /* Dividers, Disabled - Borders */
  D70: #F0F4F7; /* Page Background, Disabled - Background */
  D80: #FFFFFF; /* Content box background */

  /* Primary */
  B00: #2B81CB; /* Loader, Progress Bar */
  B05: #308DDD;
  B10: #3899EC; /* Button, TextButton */
  B20: #4EB7F5; /* Hover for elements with B10, buttons, Notifications */
  B30: #C1E4FE; /* Tag(Hover), Floating Notification Border */
  B40: #DAEFFE; /* Tag(Default), Badge */
  B50: #EAF7FF; /* Floating Notification */
  B60: #F4FAFE;

  /* Destructive */
  R00: #D6453D;
  R05: #D8504C;
  R10: #EE5951; /* Button, TextButton */
  R20: #FF6666; /* Button(hover), Notification Bar */
  R30: #FFD7D7; /* Tag(hover), Floating Notification Border */
  R40: #FFE1E1; /* Tag(Default), Badge */
  R50: #FFEBEB; /* Floating Notification */
  R60: #FFF5F5;

  /* Premium */
  P00: #8E21B1;
  P10: #AA4DC8; /* Button, TextButton (default, click) */
  P20: #CD68ED; /* Button (hover), Notification Bar */
  P30: #E5C9EE; /* Notification Border */
  P40: #EEDBF4; /* Badge */
  P50: #FAEEFF; /* Floating Notification */
  P60: #FAF7FC;

  /* Success */
  G00: #44823F;
  G05: #61AD5A;
  G10: #60BC57; /* Badge */
  G20: #80C979; /* Notification Bar, Action Background */
  G30: #C9EEBC; /* Notification Border */
  G40: #DEF4D4; /* Badge */
  G50: #EDF9E5; /* Floating Notification */
  G60: #F2FBEF;

  /* Warning */
  Y00: #C68801;
  Y05: #EDA200;
  Y10: #FDB10C; /* Notification Bar, Badge */
  Y20: #FAC249;
  Y30: #FEF0BA; /* Tag(hover), Floating Notification Border */
  Y40: #FEF4CD; /* Tag(default), Badge */
  Y50: #FDF7DF; /* Floating Notification */
  Y60: #FFFCF0;

  /* Urgent */
  O00: #EA5F0E;
  O10: #FB7D33;
  O20: #FF9A48;

  /* Focus */
  F00: #AADBFC;

  /* Categories */
  A1: #3370FB;
  A2: #7852D2;
  A3: #17B0E2;
  A4: #C53E99;
  A5: #FDB10C;
  A6: #3D9FA1;
  B1: #EF73C0;
  B2: #FF8D41;
  B3: #ED6779;
  B4: #125b8f;
  C1: #4abd81;
  C2: #2682CD;
  C3: #68A4D5;
  C4: #FF8E8C;

  /* With Opacity */
  D10-03: calc_rgba(value(D10), 0.03);
  D10-05: calc_rgba(value(D10), 0.05);
  D10-10: calc_rgba(value(D10), 0.1);
  D10-12: calc_rgba(value(D10), 0.12);
  D10-20: calc_rgba(value(D10), 0.2);
  D10-30: calc_rgba(value(D10), 0.3);
  D10-66: calc_rgba(value(D10), 0.66);

  D20-48: calc_rgba(value(D20), 0.48); /*  new transparent color */
  D20-54: calc_rgba(value(D20), 0.54); /* hovered */
  D20-60: calc_rgba(value(D20), 0.6); /*  clicked */

  D40-20: calc_rgba(value(D40), 0.2);

  D80-10: calc_rgba(value(D80), 0.1);
  D80-20: calc_rgba(value(D80), 0.2);
  D80-30: calc_rgba(value(D80), 0.3);
  D80-60: calc_rgba(value(D80), 0.6);
  D80-70: calc_rgba(value(D80), 0.7);

  B00-24: calc_rgba(value(B00), 0.24);
  B00-42: calc_rgba(value(B00), 0.42);
  B00-48: calc_rgba(value(B00), 0.48);

  /* Theme */
  THEME-COLOR-00: var(--wsr-color-00, value(B00));
  THEME-COLOR-05: var(--wsr-color-05, value(B05));
  THEME-COLOR-10: var(--wsr-color-10, value(B10));
  THEME-COLOR-20: var(--wsr-color-20, value(B20));
  THEME-COLOR-30: var(--wsr-color-30, value(B30));
  THEME-COLOR-40: var(--wsr-color-40, value(B40));
  THEME-COLOR-50: var(--wsr-color-50, value(B50));
  THEME-COLOR-60: var(--wsr-color-60, value(B60));
  THEME-TEXT-COLOR-PRIMARY: var(--wsr-text-color-primary, value(D10));
  THEME-TEXT-COLOR-PRIMARY-LIGHT: var(--wsr-text-color-primary-light, value(D80));
  THEME-TEXT-COLOR-SECONDARY: var(--wsr-text-color-secondary, value(D20));
  THEME-TEXT-COLOR-SECONDARY-LIGHT: var(--wsr-text-color-secondary-light, value(D40));
  THEME-DIVIDER-COLOR: var(--wsr-divider-color, value(D60));
}