$primary: #a3be8c;
$bg: #282c34;
$altbg: #3e4451;
$fg: #abb2bf;
$black: #282c34;
$red: #bf616a;
$green: #a3be8c;
$yellow: #ebcb8b;
$blue: #81a1c1;
$magenta: #b48ead;
$cyan: #88c0d0;
$white: #e5e9f0;

* {
  all: unset;
}

label {
  font-weight: 500;
}

progress, highlight {
  background: $primary;
  min-height: 7px;
  border-radius: 4px;
}

slider {
  box-shadow: none;
  background-color: $primary;
  outline: 1px solid $altbg;
  border-radius: 6px;
  min-height: 7px;
}

menu {
  background: $bg;
  padding: 8px;

  separator {
    background: transparent;
  }

  menuitem {
    padding: 4px 2px;
    border: 1px solid transparent;
    margin: 4px 0;
    &:first-child { margin-top: 0; }
    &:last-child { margin-bottom: 0; }

    &:hover {
      background: $altbg;
      border: 1px solid $black;
    }
  }
}

.bar {
  color: $fg;
  font-size: 14px;
  background: transparent;
}

.body {
  background: $bg;
  padding: 6px 4px;
  font-family: JetBrainsMono Nerd Font, Inter;
}

.tray {
  margin-right: 12px;
}

.tray button {
  background: transparent;
  border: none;
  margin-left: 12px;
}

.workspaces button {
  background: transparent;
  margin: 0 4px;
  padding: 1px 5px;
  border-radius: 20%;
  min-height: 0;
}

.workspaces button.focused {
  background: $primary;
  color: $bg;
}

.workspaces button.occupied {
  background: $altbg;
}

.client-title {
  margin-left: 1em;
  color: $fg;
}

.volume {
  min-width: 90px;
  margin-right: 12px;
}

.battery-percentage {
  margin-left: 6px;
}

.battery {
  margin-right: 12px;
}

.volume button {
  border: 1px solid transparent;
  outline: none;
  background: transparent;
  margin-right: 12px;
}

.clock {
  margin-right: 6px;
}

.tray {
  margin-right: 12px;
}
