/* ---- Configuration ---- */

configuration {
    modi:                       "drun,run,filebrowser";
    show-icons:                 true;
    drun-display-format:        "{name}";
    window-format:              "{w} · {c} · {t}";
    hover-select:               true;
    me-select-entry:            "MouseSecondary";
    me-accept-entry:            "MousePrimary";
}

* {
    selected-normal-foreground:  rgba ( 248, 248, 242, 100 % );
    foreground:                  rgba ( 248, 248, 242, 100 % );
    normal-foreground:           @foreground;
    alternate-normal-background: rgba ( 39, 40, 34, 0 % );
    selected-urgent-foreground:  rgba ( 248, 248, 242, 100 % );
    urgent-foreground:           rgba ( 249, 38, 114, 100 % );
    alternate-urgent-background: rgba ( 39, 40, 34, 0 % );
    active-foreground:           rgba ( 166, 226, 42, 100 % );
    lightbg:                     rgba ( 238, 232, 213, 100 % );
    selected-active-foreground:  rgba ( 166, 226, 42, 100 % );
    alternate-active-background: rgba ( 39, 40, 34, 0 % );
    background:                  rgba ( 39, 40, 34, 93 % );
    bordercolor:                 rgba ( 0, 43, 54, 100 % );
    alternate-normal-foreground: @foreground;
    normal-background:           rgba ( 39, 40, 34, 0 % );
    selected-normal-background:  rgba ( 20, 20, 17, 100 % );
    separatorcolor:              rgba ( 230, 219, 116, 100 % );
    urgent-background:           rgba ( 39, 40, 34, 0 % );
    selected-urgent-background:  rgba ( 249, 38, 114, 100 % );
    alternate-urgent-foreground: @urgent-foreground;
    background-color:            transparent;
    alternate-active-foreground: @active-foreground;
    active-background:           rgba ( 39, 40, 34, 0 % );
    selected-active-background:  rgba ( 20, 20, 17, 100 % );
}

/*****-- Elements Font Size -----*****/
element-text {
  font: "JetBrainsMono Nerd Font SemiBold 13";
}

window {
    border-color:     darkgray/30%;
    background-color: black/50%;
    border:           2px;
    padding:          0px;
    border-radius:    10px;
    padding:          0.5em;
    spacing:          0px;

    anchor:         north;
    location:       center;
    y-offset:       -15.5em;


    children: [ inputbar, message, wrapper-mode-switcher, listview , pagerbox ];
}

pagerbox {
    expand: false;
    orientation: horizontal;
    children: [ icon-left, pad, icon-right ];
}

pad {
  expand: true;
}

icon-left {
    expand: false;
    filename: "go-previous";
    size: 24;
    vertical-align: 0.5;
    action: "kb-page-prev";
}

icon-right {
    expand: false;
    filename: "go-next";
    size: 24;
    vertical-align: 0.5;
    action: "kb-page-next";
}

wrapper-mode-switcher {
    orientation: horizontal;

    expand:     false;
    spacing:    0;
    children: [ icon-ms-ic1, mode-switcher, icon-ms-ic2 ];
}
icon-ms-ic1 {
    filename: "go-previous";
}
icon-ms-ic2 {
    filename: "go-next";
}
icon-ms-ic1,icon-ms-ic2 {
    size: 16;
    vertical-align: 0.8;
    expand:        false;
    border:       0px 0px 2px ;
    border-color: @separatorcolor;
}

mode-switcher {
    border:  0px;
    spacing: 0px;
    expand: true;
}

button {
    padding:      2px;
    border:       0px 0px 2px ;
    border-color: @separatorcolor;
    text-color: dimgrey;
}
button selected.normal {
    text-color: white;
    background-color: black/50%;

    border:       2px 2px 0px ;
    border-color: @separatorcolor;
    border-radius:    10px 10px 0 0;
}


sidebar {
    expand: false;
}

message {
    text-color:       black;
    background-color: lightgrey / 50%;
    border-color:     grey;
    border:           2px;
    border-radius:    5px;
    padding:          4px;
    margin:           0px 0px 0.5em;
    expand:           false;
}

listview {
    enabled:                     true;
    columns:                     2;
    lines:                       10;
    spacing:      2px ;
    scrollbar:    false;
    padding:      0.5em;
    background-color: black/50%;

    expand:       true;
    border:       0px 2px 2px ;
    border-color: @separatorcolor;
    border-radius: 0px 0px 10px 10px;
}
element {
    border:  1;
    border-color: transparent;
    padding: 12px ;
}
element-text {
    background-color: inherit;
    text-color:       inherit;
}
element.normal.normal {
    background-color: @normal-background;
    text-color:       @normal-foreground;
}
element.normal.urgent {
    background-color: @urgent-background;
    text-color:       @urgent-foreground;
}
element.normal.active {
    background-color: @active-background;
    text-color:       @active-foreground;
}
element.selected.normal {
    border:  1;
    border-color: grey/80%;
    background-color: @selected-normal-background;
    text-color:       @selected-normal-foreground;
}
element.selected.urgent {
    border:  1;
    border-color: grey/80%;
    background-color: @selected-urgent-background;
    text-color:       @selected-urgent-foreground;
}
element.selected.active {
    border:  1;
    border-color: grey/80%;
    background-color: @selected-active-background;
    text-color:       @selected-active-foreground;
}
element.alternate.normal {
    background-color: @alternate-normal-background;
    text-color:       @alternate-normal-foreground;
}
element.alternate.urgent {
    background-color: @alternate-urgent-background;
    text-color:       @alternate-urgent-foreground;
}
element.alternate.active {
    background-color: @alternate-active-background;
    text-color:       @alternate-active-foreground;
}

element-text selected {
    background-color: @selected-active-background;
    text-color:       @selected-active-foreground;
}

/* ---- Scrollbar ---- */
scrollbar {
  border:			0px;
  border-radius:	10px;
  background-color:	@selected-normal-background;
  handle-color: 	@separatorcolor;
  handle-width: 	2px ;
  padding:      	0;
}
sidebar {
    border:       2px 0px 0px ;
    border-color: @separatorcolor;
}
inputbar {
    text-color: @normal-foreground;
    padding: 0px 0px 0.5em;
	children:   [ wrapper ];   
}
case-indicator {
    text-color: @normal-foreground;
}

wrapper {
    orientation: horizontal;
    text-color:       black;
    background-color: white / 75%;
    border-color:     grey;
    border: 2px;
    border-radius: 5px;
    padding: 4px;
    children:   [ icon-k, entry, icon-paste];
    spacing:  0.5em;
}
button-paste {
    expand: false;
    str: "gtk-paste";
    size: 24;
    vertical-align: 0.5;
    action: "kb-cancel";
}
icon-paste {
    expand: false;
    filename: "gtk-paste";
    size: 24;
    vertical-align: 0.5;
    action: "kb-primary-paste";
}
icon-k {
    expand: false;
    filename: "input-keyboard";
    size: 24;
    vertical-align: 0.5;

}
entry {
    enabled: true;
    expand: true;
	background-color: white / 75%;
    placeholder: " 🖥️ Search ";
    vertical-align: 0.5;
    border-radius: 5px;
    padding: 4px;
}


/*****----- Message -----*****/
error-message {
    background-color: darkred/20%;
    border-radius: 10px;
    border: 2px;

}
textbox {
    padding: 5px;
    background-color: darkred/10%;
    vertical-align: 0.5;
    horizontal-align: 0.5;
}


