* {
  border: 0;
  margin: 0;
  padding: 0;
  spacing: 0;

  bg: #282a3680;
  fg: #f8f8f2;
  blue: #81a1c1;
  grey: #ffffff10;
  bluea: #81a1c150;

  background-color: @bg;
  text-color: @fg;
}

window {
  transparency: "real";
  border-radius: 6px;
  background-color: @bg;
}

mainbox {
  padding: 24px;
  children: [inputbar, listview];
}

inputbar {
  background-color: @grey;
  border-radius: 6px;
  margin: 12px 0;
  children: [prompt, entry];
}

entry {
  background-color: transparent;
  padding: 16px 4px;
}

prompt {
  padding: 16px;
  background-color: transparent;
}

listview {
  lines: 8;
  scrollbar: true;
  background-color: transparent;
}

scrollbar {
  handle-width: 5px ;
  handle-color: @blue;
  background-color: @bg;
}

element {
  padding: 0 12px;
  margin: 0 12px 0 0;
  border-radius: 6px;
  text-color: @blue;
  background-color: transparent;
  children: [element-icon, element-text];
}

element-icon {
  size: 2ch;
  padding: 12px 10px;
  background-color: transparent;
}

element-text {
  padding: 12px 0;
  text-color: inherit;
  background-color: transparent;
}

element selected {
  background-color: @bluea;
}
element-text selected {
  text-color: #ffffff;
}