How-to configure Waybar .config

placeholder

* {
  font-family: "Hack Nerd Font";
  font-size: 12pt;
  border: none;
  border-radius: 0;
  transition-property: background-color;
  transition-duration: 0.5s;
}
window#waybar {
  color: #c0caf5;
  background-color: #24283b;
  border-bottom: 1px solid #414868;
  transition-duration: 0.5s;
  transition-property: background-color;
}
#workspaces button {
  background: #24283b;
  color: #c0caf5;
  border-bottom: 1px solid #414868;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 4px;
  padding-right: 4px;
}
#workspaces button.focused {
  color: #c0caf5;
  background: #414868;
}
#workspaces button.urgent {
  color: #f7768e;
}
#workspaces button.persistent {
  color: #414868;
}
#workspaces button:hover {
  color: #c0caf5;
  background: #414868;
  box-shadow: inherit;
}
#clock,
#mpd,
#idle_inhibitor,
#custom-cava-internal,
#disk,
#backlight,
#temperature,
#bluetooth,
#network,
#pulseaudio,
#cpu,
#memory,
#battery,
#mode {
  margin: 0px 2px;   /* gaps between modules */
  padding: 0.2rem 0.6rem;
  color: #c0caf5;
  background: #24283b;
  border-bottom: 1px solid #414868;
}
#mode,
#tray {
  margin: 0 0 0 2px;
}
/* #mode { */
/*   color: #24283b; */
/*   background-color: #f7768e; */
/* } */
@keyframes blink {
  to {
    color: #c0caf5;
    background-color: #24283b;
  }
}
#battery.critical:not(.charging) {
  animation-name: blink;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: #f7768e;
  background-color: #24283b;
}
#battery.charging {
  color: #9ece6a;
  background-color: #24283b;
}
#mpd.paused {
  color: #414868;
  background-color: #24283b;
}
#mpd.stopped {
  background: transparent;
}
#custom-separator {
  color: #414868;
  background: #24283b;
  border-bottom: 1px solid #414868;
}
#idle_inhibitor {
  color:#B5E8E0;
}
#custom-cava-internal{
  font-family: "Hack Nerd Font" ;
}