/* Colors from the palette in ~/.config/gnome-settings/README.md */

* {
    bg:       #2E2E32;   /* gray:   menu surfaces */
    bg-dark:  #002E37;   /* stop 7: input bar     */
    fg:       #DDECF0;   /* stop 1: text          */
    fg-dim:   #96D0DD;   /* stop 2: quiet text    */
    border-c: #59B1C4;   /* stop 4: border        */

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

window {
    background-color: @bg;
    border: 2px;
    border-color: @border-c;
    border-radius: 12px;   /* == libadwaita, forge, openbar */
    width: 42em;
    padding: 12px;
}

mainbox {
    children: [ inputbar, listview, mode-switcher ];
}

inputbar {
    background-color: @bg-dark;
    border-radius: 8px;
    padding: 8px 12px;
    children: [ prompt, entry ];
}
prompt { text-color: @fg-dim; margin: 0 8px 0 0; }
entry  { placeholder: ""; }

listview {
    lines: 8;
    spacing: 0.2em;
    fixed-height: true;
    margin: 12px 0 0 0;
    scrollbar: false;
}

element {
    padding: 0.6em 0.8em;
    border-radius: 8px;
    spacing: 0.8em;        /* gap between icon and text */
    text-color: @fg-dim;
}
element active   { text-color: #2190A4; }                 /* stop 4 */
element urgent   { text-color: #59B1C4; background-color: @bg-dark; }
element selected {
    background-color: rgba(221, 236, 240, 0.12);          /* stop 1 @ 12% => grayish */
    text-color: @fg;
}
element selected.active { background-color: #006E81; text-color: @fg; }
element-text, element-icon {
    background-color: transparent;
    text-color: inherit;
}
element-icon { size: 1.8em; }

mode-switcher { margin: 12px 0 0 0; spacing: 8px; }
button {
    padding: 4px 10px;
    border-radius: 8px;
    background-color: @bg-dark;
    text-color: @fg-dim;
}
button selected {
    background-color: #006E81;   /* stop 5: active tab, like forge */
    text-color: @fg;
}