@use '../base/variables' as var;

@mixin add-css-variable($name, $value) {
  $prefix: '--';
  #{$prefix + $name}: $value;
}

:root {
  // Shadow Color
  @include add-css-variable('button-shadow-color', rgba(0, 0, 0, 0.15));

  // White Gradient Fade
  @include add-css-variable(
    'white-gradient-color',
    linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 26%)
  );

  //// COLOR SCALES ////

  // Commenting out these variables for now because we are not ready to use them.
  // // BLUE SCALE
  // @include add-css-variable('blue-50', #f4faff);
  // @include add-css-variable('blue-100', #e8f3ff);
  // @include add-css-variable('blue-200', #d8edff);
  // @include add-css-variable('blue-300', #b0d7fc);
  // @include add-css-variable('blue-400', #94c6f6);
  // @include add-css-variable('blue-500', #009bff);
  // @include add-css-variable('blue-600', #0086de);
  // @include add-css-variable('blue-700', #0072be);
  // @include add-css-variable('blue-800', #005e9e);
  // @include add-css-variable('blue-900', #004b80);

  // // RED SCALE
  // @include add-css-variable('red-50', #fef2f2);
  // @include add-css-variable('red-100', #fee2e2);
  // @include add-css-variable('red-200', #fecaca);
  // @include add-css-variable('red-300', #fca5a5);
  // @include add-css-variable('red-400', #f8a8a0);
  // @include add-css-variable('red-500', #dc2626);
  // @include add-css-variable('red-600', #cc0615);
  // @include add-css-variable('red-700', #a31919);
  // @include add-css-variable('red-800', #881313);
  // @include add-css-variable('red-900', #641c18);

  // // GREEN SCALE
  // @include add-css-variable('green-50', #f5fbf7);
  // @include add-css-variable('green-100', #e7f6ed);
  // @include add-css-variable('green-200', #d9f0e1);
  // @include add-css-variable('green-300', #b3dcc3);
  // @include add-css-variable('green-400', #97ccad);
  // @include add-css-variable('green-500', #1c7f53);
  // @include add-css-variable('green-600', #007146);
  // @include add-css-variable('green-700', #125d3b);
  // @include add-css-variable('green-800', #0d4c30);
  // @include add-css-variable('green-900', #083c25);

  // // YELLOW SCALE
  // @include add-css-variable('yellow-50', #fffaea);
  // @include add-css-variable('yellow-100', #fff2c3);
  // @include add-css-variable('yellow-200', #ffe9a0);
  // @include add-css-variable('yellow-300', #ffde7f);
  // @include add-css-variable('yellow-400', #fcd27a);
  // @include add-css-variable('yellow-500', #ffc53d);
  // @include add-css-variable('yellow-600', #deab34);
  // @include add-css-variable('yellow-700', #b0611a);
  // @include add-css-variable('yellow-800', #634b12);
  // @include add-css-variable('yellow-900', #48350a);

  // // ORANGE SCALE
  // @include add-css-variable('orange-50', #fff5f0);
  // @include add-css-variable('orange-100', #ffeadd);
  // @include add-css-variable('orange-200', #ffd7c0);
  // @include add-css-variable('orange-300', #ffba95);
  // @include add-css-variable('orange-400', #fca882);
  // @include add-css-variable('orange-500', #f76b15);
  // @include add-css-variable('orange-600', #d75c11);
  // @include add-css-variable('orange-700', #b74e0c);
  // @include add-css-variable('orange-800', #993f08);
  // @include add-css-variable('orange-900', #7c3205);

  // // VIOLET SCALE
  // @include add-css-variable('violet-50', #faf8ff);
  // @include add-css-variable('violet-100', #f4f0fe);
  // @include add-css-variable('violet-200', #e8e3ff);
  // @include add-css-variable('violet-300', #d2c8ff);
  // @include add-css-variable('violet-400', #c0b1ff);
  // @include add-css-variable('violet-500', #770bff);
  // @include add-css-variable('violet-600', #6708de);
  // @include add-css-variable('violet-700', #5706be);
  // @include add-css-variable('violet-800', #47049e);
  // @include add-css-variable('violet-900', #371078);

  // // TEAL SCALE
  // @include add-css-variable('teal-50', #f0fdfa);
  // @include add-css-variable('teal-100', #ccfbf1);
  // @include add-css-variable('teal-200', #99f6e4);
  // @include add-css-variable('teal-300', #90e2d4);
  // @include add-css-variable('teal-400', #6dd2c2);
  // @include add-css-variable('teal-500', #14b8a6);
  // @include add-css-variable('teal-600', #0d9488);
  // @include add-css-variable('teal-700', #0f766e);
  // @include add-css-variable('teal-800', #115e59);
  // @include add-css-variable('teal-900', #134e4a);

  // // INDIGO SCALE
  // @include add-css-variable('indigo-50', #f7f8ff);
  // @include add-css-variable('indigo-100', #eef1ff);
  // @include add-css-variable('indigo-200', #e2e8ff);
  // @include add-css-variable('indigo-300', #c4ceff);
  // @include add-css-variable('indigo-400', #aebaff);
  // @include add-css-variable('indigo-500', #4f46e5);
  // @include add-css-variable('indigo-600', #443acb);
  // @include add-css-variable('indigo-700', #3832aa);
  // @include add-css-variable('indigo-800', #2e288e);
  // @include add-css-variable('indigo-900', #231e72);

  // GRAY SCALE
  @include add-css-variable('gray-50', #f8f9fa);
  @include add-css-variable('gray-100', #eff0f1);
  @include add-css-variable('gray-200', #e7e9e9);
  @include add-css-variable('gray-300', #dfe2e3);
  @include add-css-variable('gray-400', #cccfd1);
  @include add-css-variable('gray-500', #9b9c9d);
  @include add-css-variable('gray-600', #6d6f70);
  @include add-css-variable('gray-700', #57595a);
  @include add-css-variable('gray-800', #2f3132);
  @include add-css-variable('gray-900', #1c1e1f);

  // BLACK SCALE
  @include add-css-variable('black-50', rgba(0, 0, 0, 0.1));
  @include add-css-variable('black-100', rgba(0, 0, 0, 0.2));
  @include add-css-variable('black-200', rgba(0, 0, 0, 0.3));
  @include add-css-variable('black-300', rgba(0, 0, 0, 0.4));
  @include add-css-variable('black-400', rgba(0, 0, 0, 0.5));
  @include add-css-variable('black-500', rgba(0, 0, 0, 0.6));
  @include add-css-variable('black-600', rgba(0, 0, 0, 0.7));
  @include add-css-variable('black-700', rgba(0, 0, 0, 0.8));
  @include add-css-variable('black-800', rgba(0, 0, 0, 0.9));
  @include add-css-variable('black-900', rgba(0, 0, 0, 1));

  // WHITE SCALE
  @include add-css-variable('white-50', rgba(255, 255, 255, 0.1));
  @include add-css-variable('white-100', rgba(255, 255, 255, 0.2));
  @include add-css-variable('white-200', rgba(255, 255, 255, 0.3));
  @include add-css-variable('white-300', rgba(255, 255, 255, 0.4));
  @include add-css-variable('white-400', rgba(255, 255, 255, 0.5));
  @include add-css-variable('white-500', rgba(255, 255, 255, 0.6));
  @include add-css-variable('white-600', rgba(255, 255, 255, 0.7));
  @include add-css-variable('white-700', rgba(255, 255, 255, 0.8));
  @include add-css-variable('white-800', rgba(255, 255, 255, 0.9));
  @include add-css-variable('white-900', rgba(255, 255, 255, 1));

  //// MAIN COLORS ////

  // BLUES
  @include add-css-variable('blue', #009af0);
  @include add-css-variable('dark-blue', #005e95);
  @include add-css-variable('medium-blue', #c3e2fd);
  @include add-css-variable('light-blue', #ebf5ff);

  // GREENS
  @include add-css-variable('green', #31a56d);
  @include add-css-variable('dark-green', #1a6541);
  @include add-css-variable('medium-green', #c4e8d1);
  @include add-css-variable('light-green', #ecf6f0);
  // This is a special case for disabled primary-green buttons. This is to be used for the content of a button (text and icons).
  @include add-css-variable('disabled-green', #77e7cc);

  // REDS
  @include add-css-variable('red', #e54d2e);
  @include add-css-variable('dark-red', #aa371f);
  @include add-css-variable('medium-red', #fecdc2);
  @include add-css-variable('light-red', #ffeeea);

  // YELLOWS
  @include add-css-variable('yellow', #ffcb2f);
  @include add-css-variable('dark-yellow', #806512);
  @include add-css-variable('medium-yellow', #ffe6a9);
  @include add-css-variable('light-yellow', #fffaee);

  // PURPLES
  @include add-css-variable('purple', #8184a9);
  @include add-css-variable('dark-purple', #1d3261);
  @include add-css-variable('medium-purple', #d7d8e5);
  @include add-css-variable('light-purple', #f4f4f8);

  // GRAY SCALE
  @include add-css-variable('black', #1c1e1f);
  @include add-css-variable('dark-gray', #36383c);
  @include add-css-variable('gray', #70757b);
  @include add-css-variable('medium-gray', #b8bcbf);
  @include add-css-variable('light-gray', #e7eaeb);
  @include add-css-variable('lighter-gray', #f8f8f8);
  @include add-css-variable('faint-gray', #fbfbfb);
  // This is a special case for disabled secondary buttons. This is to be used for the content of a button (text and icons).
  @include add-css-variable('disabled-gray', #979b9f);
  @include add-css-variable('white', #ffffff);

  // ADVANCED PALETTE
  @include add-css-variable('lavender', #4859e5);
  @include add-css-variable('light-lavender', #f7f8ff);
  @include add-css-variable('orange', #f3be6c);
  @include add-css-variable('light-orange', #fff9f0);
  @include add-css-variable('pink', #f869bc);
  @include add-css-variable('light-pink', #fff5fb);
  @include add-css-variable('teal', #4ee5ee);
  @include add-css-variable('light-teal', #f2ffff);

  //// CHART COLOR LIBRARY ////

  // Any changes made to the chart's color should be reflected in the file react-ui/src/services/chart-colors.ts as well.

  // CHART BLUES
  @include add-css-variable('chart-light-6-blue', #e4f3fa);
  @include add-css-variable('chart-light-5-blue', #c7dfee);
  @include add-css-variable('chart-light-4-blue', #a6cce5);
  @include add-css-variable('chart-light-3-blue', #85badb);
  @include add-css-variable('chart-light-2-blue', #63a7d1);
  @include add-css-variable('chart-light-1-blue', #4194c7);
  @include add-css-variable('chart-standard-blue', #2081be);
  @include add-css-variable('chart-dark-1-blue', #1b6da1);
  @include add-css-variable('chart-dark-2-blue', #165984);
  @include add-css-variable('chart-dark-3-blue', #114667);
  @include add-css-variable('chart-dark-4-blue', #0c334b);
  @include add-css-variable('chart-dark-5-blue', #08202f);

  // CHART REDS
  @include add-css-variable('chart-light-6-red', #fde5e5);
  @include add-css-variable('chart-light-5-red', #fac9c7);
  @include add-css-variable('chart-light-4-red', #f7a8a6);
  @include add-css-variable('chart-light-3-red', #f48885);
  @include add-css-variable('chart-light-2-red', #f16863);
  @include add-css-variable('chart-light-1-red', #ee4741);
  @include add-css-variable('chart-standard-red', #ec2720);
  @include add-css-variable('chart-dark-1-red', #c8211b);
  @include add-css-variable('chart-dark-2-red', #a41b16);
  @include add-css-variable('chart-dark-3-red', #811511);
  @include add-css-variable('chart-dark-4-red', #5e0f0c);
  @include add-css-variable('chart-dark-5-red', #3b0908);

  // CHART GREENS
  @include add-css-variable('chart-light-6-green', #e0f8f3);
  @include add-css-variable('chart-light-5-green', #c0f1e5);
  @include add-css-variable('chart-light-4-green', #9be8d6);
  @include add-css-variable('chart-light-3-green', #76e0c7);
  @include add-css-variable('chart-light-2-green', #51d8b8);
  @include add-css-variable('chart-light-1-green', #2bcfa8);
  @include add-css-variable('chart-standard-green', #05c799);
  @include add-css-variable('chart-dark-1-green', #04a881);
  @include add-css-variable('chart-dark-2-green', #038a6a);
  @include add-css-variable('chart-dark-3-green', #026c53);
  @include add-css-variable('chart-dark-4-green', #014f3c);
  @include add-css-variable('chart-dark-5-green', #013126);

  // CHART YELLOWS
  @include add-css-variable('chart-light-6-yellow', #fefae7);
  @include add-css-variable('chart-light-5-yellow', #fcf6ca);
  @include add-css-variable('chart-light-4-yellow', #faf1aa);
  @include add-css-variable('chart-light-3-yellow', #f8eb8b);
  @include add-css-variable('chart-light-2-yellow', #f7e66c);
  @include add-css-variable('chart-light-1-yellow', #f5e14c);
  @include add-css-variable('chart-standard-yellow', #f4dc2c);
  @include add-css-variable('chart-dark-1-yellow', #ceba25);
  @include add-css-variable('chart-dark-2-yellow', #a9981e);
  @include add-css-variable('chart-dark-3-yellow', #857818);
  @include add-css-variable('chart-dark-4-yellow', #615711);
  @include add-css-variable('chart-dark-5-yellow', #3d370b);

  // CHART PURPLES
  @include add-css-variable('chart-light-6-purple', #faeaff);
  @include add-css-variable('chart-light-5-purple', #ecc5fd);
  @include add-css-variable('chart-light-4-purple', #e0a3fd);
  @include add-css-variable('chart-light-3-purple', #d581fc);
  @include add-css-variable('chart-light-2-purple', #ca5ffb);
  @include add-css-variable('chart-light-1-purple', #be3cfa);
  @include add-css-variable('chart-standard-purple', #b319fa);
  @include add-css-variable('chart-dark-1-purple', #9715d3);
  @include add-css-variable('chart-dark-2-purple', #7c11ad);
  @include add-css-variable('chart-dark-3-purple', #610d88);
  @include add-css-variable('chart-dark-4-purple', #470963);
  @include add-css-variable('chart-dark-5-purple', #2c063e);

  // CHART ROYALS
  @include add-css-variable('chart-light-6-royal', #e5e5f8);
  @include add-css-variable('chart-light-5-royal', #cac6f3);
  @include add-css-variable('chart-light-4-royal', #aba5eb);
  @include add-css-variable('chart-light-3-royal', #8c83e4);
  @include add-css-variable('chart-light-2-royal', #6d62dd);
  @include add-css-variable('chart-light-1-royal', #4d40d6);
  @include add-css-variable('chart-standard-royal', #2e1ecf);
  @include add-css-variable('chart-dark-1-royal', #2619af);
  @include add-css-variable('chart-dark-2-royal', #1f148f);
  @include add-css-variable('chart-dark-3-royal', #191071);
  @include add-css-variable('chart-dark-4-royal', #120b52);
  @include add-css-variable('chart-dark-5-royal', #0b0733);

  // CHART TEALS
  @include add-css-variable('chart-light-6-teal', #e3ffff);
  @include add-css-variable('chart-light-5-teal', #bff4f7);
  @include add-css-variable('chart-light-4-teal', #99eef2);
  @include add-css-variable('chart-light-3-teal', #73e8ed);
  @include add-css-variable('chart-light-2-teal', #4de1e8);
  @include add-css-variable('chart-light-1-teal', #26dbe3);
  @include add-css-variable('chart-standard-teal', #00d5df);
  @include add-css-variable('chart-dark-1-teal', #00b4bd);
  @include add-css-variable('chart-dark-2-teal', #00949b);
  @include add-css-variable('chart-dark-3-teal', #007479);
  @include add-css-variable('chart-dark-4-teal', #005458);
  @include add-css-variable('chart-dark-5-teal', #003537);

  // CHART PINKS
  @include add-css-variable('chart-light-6-pink', #ffe3f2);
  @include add-css-variable('chart-light-5-pink', #ffbfe5);
  @include add-css-variable('chart-light-4-pink', #ff99d6);
  @include add-css-variable('chart-light-3-pink', #ff73c7);
  @include add-css-variable('chart-light-2-pink', #ff4db8);
  @include add-css-variable('chart-light-1-pink', #ff26a8);
  @include add-css-variable('chart-standard-pink', #ff0099);
  @include add-css-variable('chart-dark-1-pink', #d80081);
  @include add-css-variable('chart-dark-2-pink', #b1006a);
  @include add-css-variable('chart-dark-3-pink', #8b0053);
  @include add-css-variable('chart-dark-4-pink', #65003c);
  @include add-css-variable('chart-dark-5-pink', #3f0026);

  // CHART ORANGES
  @include add-css-variable('chart-light-6-orange', #fff1e7);
  @include add-css-variable('chart-light-5-orange', #ffe2ca);
  @include add-css-variable('chart-light-4-orange', #ffd1aa);
  @include add-css-variable('chart-light-3-orange', #ffc08b);
  @include add-css-variable('chart-light-2-orange', #ffaf6b);
  @include add-css-variable('chart-light-1-orange', #ffa252);
  @include add-css-variable('chart-standard-orange', #ff8d2b);
  @include add-css-variable('chart-dark-1-orange', #d87724);
  @include add-css-variable('chart-dark-2-orange', #b1621d);
  @include add-css-variable('chart-dark-3-orange', #8b4d17);
  @include add-css-variable('chart-dark-4-orange', #653811);
  @include add-css-variable('chart-dark-5-orange', #3f230a);

  // Breakpoints
  @include add-css-variable('breakpoint-xs', var.$breakpoint-xs);
  @include add-css-variable('breakpoint-sm', var.$breakpoint-sm);
  @include add-css-variable('breakpoint-md', var.$breakpoint-md);
  @include add-css-variable('breakpoint-lg', var.$breakpoint-lg);
  @include add-css-variable('breakpoint-xl', var.$breakpoint-xl);
  @include add-css-variable('breakpoint-xxl', var.$breakpoint-xxl);

  @include add-css-variable('breakpoint-xs-max', var.$breakpoint-xs-max);
  @include add-css-variable('breakpoint-sm-max', var.$breakpoint-sm-max);
  @include add-css-variable('breakpoint-md-max', var.$breakpoint-md-max);
  @include add-css-variable('breakpoint-lg-max', var.$breakpoint-lg-max);
  @include add-css-variable('breakpoint-xl-max', var.$breakpoint-xl-max);

  // Font Weights
  @include add-css-variable('font-weight-regular', var.$font-weight-regular);
  @include add-css-variable('font-weight-medium', var.$font-weight-medium);
  @include add-css-variable('font-weight-semibold', var.$font-weight-semibold);
  @include add-css-variable('font-weight-bold', var.$font-weight-bold);

  // Font Sizes
  @include add-css-variable('font-size-10', var.$font-size-10);
  @include add-css-variable('font-size-12', var.$font-size-12);
  @include add-css-variable('font-size-14', var.$font-size-14);
  @include add-css-variable('font-size-16', var.$font-size-16);
  @include add-css-variable('font-size-18', var.$font-size-18);
  @include add-css-variable('font-size-22', var.$font-size-22);

  // Line Height
  @include add-css-variable('line-height-h1', var.$line-height-h1);
  @include add-css-variable('line-height-p', var.$line-height-p);

  @include add-css-variable('sidebar-collapsed-width', 72);
  @include add-css-variable('header-height', 80);
}