@use 'sass:color'

// HELPER ELEMENTS
$bg-helper-base-color: #121212
$bg-helper-highlight-color: color.scale($bg-helper-base-color, $blackness: 33%)
$bg-helper-lowlight-color: color.scale($bg-helper-base-color, $whiteness: 33%)
$border-helper-base-color: #e9b074
$fg-helper-base-color: #CCCCCC 
$fg-helper-highlight-color: color.scale($fg-helper-base-color, $blackness: 33%)
$fg-helper-lowlight-color: color.scale($fg-helper-base-color, $whiteness: 25%)
// helper notification elements
$bg-base-notification: $bg-helper-highlight-color
$border-base-notification: #9d1934
$fg-base-notification: $fg-helper-lowlight-color
// helper slider & progress bar elements
// $bg-base-slider: #3366FF
$bg-base-slider: #8710A8
$border-base-slider: #CCCCCC
$fg-base-slider: color.scale($border-base-notification, $red: 33%)
// helper tooltip elements
$bg-base-tooltip: color.scale($border-helper-base-color, $saturation: -15%)
$fg-base-tooltip: $bg-helper-highlight-color
// helper icon elements
$stroke-icon: $bg-helper-base-color
$fill-icon: $fg-helper-base-color

// INPUT ELEMENTS
$bg-input-base-color: #333333
$border-input-base-color: #CCCCCC
$fg-input-base-color: $bg-helper-base-color

// OUTPUT ELEMENTS
$bg-output-base-color: #993333
$fg-output-base-color: #FFFFCC