eww/eww.scss

$white: #BAC2DE;
$black: #45475A;
$black2: #585B70;
$red: #F38BA8;
$green: #A6E3A1;
$yellow: #F9E2AF;
$blue: #89B4FA;
$magenta: #F5C2E7;
$cyan: #94E2D5;

$magenta3: #e6aaee;
$black3: #686B80;
$purple: #b0b0e8;

$text: $white;
$mod-bg: #505060;
$trough: #464666;
$bg: #2e2e3e;
$hover-bg: $black;

$bg-darken: 40%;
$bg-desat: 50%;


* {
  all: unset;
}

.bar {
  margin-top: 15px;
  color: $text;
  font-size: 20px;
  font-family: "Symbols Nerd Font Mono", "Comic Code Ligatures";
  margin-left: 15px;
  margin-right: 15px;
}

.bar-right, .bar-left, .bar-center {
    background-color: rgba($bg, 0.8);
    border-radius: 20px;
}

.mod {
  margin: 5px 10px;
}

.metric scale trough highlight {
  background-color: $magenta;
  border-radius: 10px;
}

.metric scale trough {
  background-color: $trough;
  border-radius: 50px;
  min-height: 6px;
  min-width: 50px;
  margin-left: 10px;
}

.workspaces {
  // un... un bro momento
  button {
    padding: 0 10px;
    color: $black3;
  }
  button:hover {
    color: $black
  }
  button.focused {
    color: $magenta;
  }
  button.urgent {
    color: $yellow;
  }
}

.sep {
    font-size: 10px;
    color: $black2;
}

.circle {
  font-size: 6px;
  margin: 8px;
}

.circle-progress {
  border-radius: 20px;
}

.circle-bar {
  background-color: $trough;
  margin-left: 5px;
}

.red {
  color: $red;
}

.red.bg {
  background-color: desaturate(darken($red, $bg-darken), $bg-desat);
}

.green {
  color: $green;
}

.green.bg {
  background-color: desaturate(darken($green, $bg-darken), $bg-desat);
}

.yellow {
  color: $yellow;
}

.yellow.bg {
  background-color: desaturate(darken($yellow, $bg-darken), $bg-desat);
}

.blue {
  color: $blue;
}

.blue.bg {
  background-color: desaturate(darken($blue, $bg-darken), $bg-desat);
}

.magenta {
  color: $magenta;
}

.magenta.bg {
  background-color: desaturate(darken($magenta, $bg-darken), $bg-desat);
}

.cyan {
  color: $cyan;
}

.cyan.bg {
  background-color: desaturate(darken($cyan, $bg-darken), $bg-desat);
}

.purple {
  color: $purple;
}