* {
    all: unset; //Unsets everything so you can style everything from scratch
}

$bg:        #1e1e2e;
$black:     #313244;
$red:       #f38ba8;
$green:     #a6e3a1;
$yellow:    #f9e2af;
$pink:      #f5c2e7;
$blue:      #89b4fa;
$purple:    #cba6f7;
$cyan:      #89dceb;
$white:     #cdd6f4;
$gray:      #313244;

* {
  transition: 200ms ease;
  font-family: "JetBrainsMono Nerd Font";
}

.bar {
  background-color: $bg;
  color: $white;
  padding: 10px;
}

.bar2 {
  background-color: $bg;
  color: $white;
  padding: 10px;
}

.workspaces {
    padding-left: 10;
    font-size: 20;
}

.system {
  padding-right: 10;
}

.module { margin: 0 5px; }

.metric scale trough highlight {
  all: unset;
  background-color: $blue;
  color: $black;
  border-radius: 10px;
}

.metric scale trough {
  all: unset;
  background-color: $gray;
  border-radius: 50px;
  min-height: 3px;
  min-width: 50px;
  margin-left: 10px;
  margin-right: 20px;
}

.metric scale trough highlight {
  all: unset;
  background-color: $blue;
  color: $black;
  border-radius: 10px;
}

.metric scale trough {
  all: unset;
  background-color: $gray;
  border-radius: 50px;
  min-height: 3px;
  min-width: 50px;
  margin-left: 10px;
  margin-right: 20px;
}

.bat-box scale trough highlight {
  all: unset;
  background-color: $blue;
  color: $black;
  border-radius: 10px;
}

.bat-box scale trough {
  all: unset;
  background-color: $gray;
  border-radius: 50px;
  min-height: 3px;
  min-width: 50px;
  margin-left: 10px;
  margin-right: 20px;
}

.bat-box scale trough highlight {
  all: unset;
  background-color: $blue;
  color: $black;
  border-radius: 10px;
}

.bat-box scale trough {
  all: unset;
  background-color: $gray;
  border-radius: 50px;
  min-height: 3px;
  min-width: 50px;
  margin-left: 10px;
  margin-right: 20px;
}