/* The colors are from the palette in ~/.config/gnome-settings/COLORS.md */
/* => The values below are the "orange" defaults, overridden             */
/*    at the bottom by the color-palette written import                  */

* {
    accent-c:   #ed5b00;                 /* accent:        active accents */
    bg-dark:    #fceae3;                 /* base:          input bar      */
    bg:         #ebebed;                 /* chrome:        menu surfaces  */
    border-c:   #992600;                 /* active-border: border         */
    emphasis-c: #fc6c27;                 /* emphasis-dim:  selected tabs  */
    fg:         #2a0b01;                 /* text                          */
    fg-a12:     rgba(42, 11, 1, 0.12);   /* text @ 12%:    selected row   */
    fg-dim:     #631200;                 /* chrome-quiet:  quiet text     */

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

window {
    background-color: @bg;
    border: 2px;
    border-color: @border-c;
    border-radius: 12px;  /* == libadwaita, forge */
    width: 32em;
    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: 6;
    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: @accent-c; }
element urgent   { text-color: @border-c; background-color: @bg-dark; }
element selected {
    background-color: @fg-a12;
    text-color: @fg;
}
element selected.active { background-color: @emphasis-c; 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: @emphasis-c;  /* active tab, like forge */
    text-color: @fg;
}

@import "colors"