@use 'gjs_vars';

:root {
  --gjs-main-color: #{gjs_vars.$mainColor};
  --gjs-primary-color: #{gjs_vars.$primaryColor};
  --gjs-secondary-color: #{gjs_vars.$secondaryColor};
  --gjs-tertiary-color: #{gjs_vars.$tertiaryColor};
  --gjs-quaternary-color: #{gjs_vars.$quaternaryColor};
  --gjs-font-color: #{gjs_vars.$fontColor};
  --gjs-font-color-active: #{gjs_vars.$fontColorActive};
  --gjs-main-dark-color: #{gjs_vars.$mainDkColor};
  --gjs-secondary-dark-color: #{gjs_vars.$mainDklColor};
  --gjs-main-light-color: #{gjs_vars.$mainLhColor};
  --gjs-secondary-light-color: #{gjs_vars.$mainLhlColor};
  --gjs-soft-light-color: #{gjs_vars.$softLhColor};
  --gjs-color-blue: #{gjs_vars.$colorBlue};
  --gjs-color-red: #{gjs_vars.$colorRed};
  --gjs-color-yellow: #{gjs_vars.$colorYell};
  --gjs-color-green: #{gjs_vars.$colorGreen};
  --gjs-left-width: #{gjs_vars.$leftWidth};
  --gjs-color-highlight: #{gjs_vars.$colorHighlight};
  --gjs-color-warn: #{gjs_vars.$colorWarn};
  --gjs-handle-margin: #{gjs_vars.$hndlMargin};
  --gjs-light-border: #{gjs_vars.$lightBorder};
  --gjs-arrow-color: #{gjs_vars.$arrowColor};
  --gjs-dark-text-shadow: #{gjs_vars.$darkTextShadow};
  --gjs-color-input-padding: #{gjs_vars.$colorpSize};
  --gjs-input-padding: #{gjs_vars.$inputPadding}; // Has to be a single value
  --gjs-padding-elem-classmanager: #{gjs_vars.$paddElClm};
  --gjs-upload-padding: #{gjs_vars.$uploadPadding};
  --gjs-animation-duration: #{gjs_vars.$animSpeed};
  --gjs-main-font: #{gjs_vars.$mainFont};
  --gjs-font-size: #{gjs_vars.$fontSize};
  --gjs-placeholder-background-color: #{gjs_vars.$placeholderColor};
  --gjs-canvas-top: #{gjs_vars.$canvasTop};
  --gjs-flex-item-gap: 5px;
}