* {
  font: "Victor Mono Nerd Font 13";

  zx-transparent:       transparent;
  zx-white:             #C8C8C8FF;
  zx-dark-blue:         #080C1CEA;
  zx-blue:              #203050C8;
  zx-light-blue:        #6bceffff;
  zx-cyan:              #15D7E5FF;
  zx-light-grey:        #A0A0ADFF;
  zx-dark-grey:         #202028C8;
  zx-black:             #000000EA;
  zx-background:        @zx-black;
  zx-secondary:         @zx-dark-grey;
  zx-accent:            @zx-white;
  zx-text:              @zx-white;

  background-color:     transparent;
}

window {
  location: center;
  width: 35%;

  background-color: @zx-background;

  border: 0;
  border-color: @zx-accent;

  padding: 2 12 8 12;

  children: [mainbox];
}

mainbox {
  background: @zx-transparent;
  border: 0px;
  spacing: 8px;

  children: [inputbar, listview];
}

inputbar {
  spacing: 40px;
  padding: 10px;

  //background-color: @zx-secondary;
  text-color: @zx-text;

  border: 0 0 1px 0;
  border-color: @zx-accent;

  children: [prompt, entry];
}

prompt {
  text-color: @zx-text;
  text-transform: bold;
}

entry {
  text-color: @zx-text;
  placeholder-color: @zx-text;

  placeholder: "search";
}

listview {
  lines: 8;
  cycle: true;
  scrollbar: false;
  spacing: 5px;

  border: 0px;
  background-color: @transparent; //@zx-background;

  children: [element];
}

element {
  background-color: transparent;
  text-color: inherit;
  border: 0;

  children: [element-text];
}

element-text {
  padding: 5;
  text-color: @zx-text;
}

element-text.normal {
  text-color: @zx-text;
  border: 0;
}

element-text.active {
  text-color: @zx-text;
  border: 0;
}

element-text.selected {
  background-color: @zx-secondary;
}

prompt, entry, element-text {
  vertical-align: 0.5;
}