* {
    transparent: #00000000;
    foreground: #F2F2F2FF;
    background-selected: #F2F2F245;
    background-active: #F2F2F230;
    background-white: #F2F2F211;
    background-black: #00000000;
    urgent: #E91E6366;
    urgent-selected: #E91E6377;
    border-radius: 18px;
}

window {
    background-color: @transparent;
    text-color: #6e6a86;
    x-offset: 5px;
    y-offset: -50px;
}

prompt {
    enabled: false;
}

button {
    action: "ok";
    str: " ";
    font: "FiraCode Nerd Font Mono 16";
    expand: false;
    text-color: #6e6a86; background-color: @transparent; vertical-align: 0.5;
    horizontal-align: 0.5;
}

entry {
    font: "FiraCode Nerd Font 14";
    background-color: #26233a;
    text-color: #6e6a86;
    expand: true;
    vertical-align: 0.5;
    horizontal-align: 0;
    placeholder: "Global Search";
    placeholder-color: @foreground;
    blink: true;
}

entry-wrapper {
    orientation: horizontal;
    margin: 0 12px 0 12px;
    spacing: 24px;
    vertical-align: 0.5;
    background-color: #26233a;
    children: [ button, entry ];
}

inputbar {
    padding: 14px;
    background-color: #26233a;
    text-color: @foreground;
    expand: false;
    border-radius: 12px;
    position: north;
    children: [ entry-wrapper ];
}

listview {
    background-color: #26233aFB;
    padding: 12px 0 12px 0;
    spacing: 0;
    cycle: true;
    dynamic: true;
    scrollbar: true;
}

mainbox {
    width: 200px;
    expand: true;
    spacing: 12px;
    padding: 5px;
    background-color: @background-black;
    children: [ inputbar, listview ];
}

scrollbar {
    background-color: @background-white;
    handle-width: 0;
    margin: 0 0 5px 0;
    border-radius: 9px;
}

element {
    background-color: @transparent;
    text-color: @foreground;
    orientation: horizontal;
    border: 0;
    border-color: @background-white;
    border-radius: 9px;
    spacing: 24px;
    margin: 0px 12px 0px 12px;
    padding: 10px 24px 10px 24px;
}

element-icon {
    size: 24px;
    border: 0;
    border-color: @transparent;
    background-color: transparent;
}

element-text {
    font: "FiraCode Nerd Font Mono 12";
    expand: true;
    horizontal-align: 0;
    vertical-align: 0.5;
    color: #4AA19B;
    background-color: transparent;
}

element normal.urgent,
element alternate.urgent {
    background-color: @urgent;
    text-color: @foreground;
    border-radius: 9px;
}

element normal.active,
element alternate.active {
    background-color: @background-active;
    text-color: @foreground;
}

element selected {
    background-color: #403d5220;
    text-color: @foreground;
}

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

element selected.active {
    background-color: #403d5220;
    color: @foreground-selected;
}