* {
    bg-col: #1e1e2e;
    bg-col-light: #313244;
    border-col: #313244;
    selected-col: #313244;
    blue: #89b4fa;
    fg-col: #cdd6f4;
    fg-col2: #f38ba8;
    grey: #6c7086;
    mauve: #cba6f7;
    lavender: #b4befe;
    sapphire: #74c7ec;
    sky: #89dceb;
    teal: #94e2d5;
    green: #a6e3a1;
    yellow: #f9e2af;
    peach: #fab387;
    maroon: #eba0ac;
    red: #f38ba8;
}

configuration {
    modi: "drun,run,window,ssh";
    show-icons: true;
    display-drun: " ";
    display-run: " ";
    display-window: " ";
    display-ssh: " ";
    drun-display-format: "{icon} {name}";
    window-format: "{w} {c} {t}";
    font: "JetBrainsMono Nerd Font 12";
}

window {
    background-color: @bg-col;
    border: 2px;
    border-color: @lavender;
    border-radius: 10px;
    width: 600px;
    padding: 20px;
}

mainbox {
    background-color: transparent;
    children: [inputbar, listview];
    spacing: 15px;
}

inputbar {
    background-color: @bg-col-light;
    border-radius: 8px;
    padding: 12px 16px;
    children: [prompt, entry];
    spacing: 12px;
}

prompt {
    background-color: transparent;
    text-color: @lavender;
    font: "JetBrainsMono Nerd Font 14";
}

entry {
    background-color: transparent;
    text-color: @fg-col;
    placeholder: "Search...";
    placeholder-color: @grey;
    cursor: text;
}

listview {
    background-color: transparent;
    columns: 1;
    lines: 8;
    spacing: 8px;
    fixed-height: false;
    dynamic: true;
}

element {
    padding: 10px 16px;
    border-radius: 8px;
    spacing: 12px;
}

element-icon {
    size: 24px;
}

element-text {
    text-color: @fg-col;
    vertical-align: 0.5;
}

element normal.normal {
    background-color: @bg-col;
    text-color: @fg-col;
}

element selected.normal {
    background-color: @lavender;
    text-color: @bg-col;
}

element alternate.normal {
    background-color: @bg-col;
    text-color: @fg-col;
}

element normal.active {
    background-color: @bg-col;
    text-color: @green;
}

element selected.active {
    background-color: @green;
    text-color: @bg-col;
}

element alternate.active {
    background-color: @bg-col;
    text-color: @green;
}

element normal.urgent {
    background-color: @bg-col;
    text-color: @red;
}

element selected.urgent {
    background-color: @red;
    text-color: @bg-col;
}

element alternate.urgent {
    background-color: @bg-col;
    text-color: @red;
}

scrollbar {
    background-color: @bg-col-light;
    handle-color: @lavender;
    handle-width: 4px;
    border-radius: 2px;
}

mode-switcher {
    background-color: transparent;
}

button {
    background-color: @bg-col-light;
    text-color: @fg-col;
    padding: 8px 16px;
    border-radius: 8px;
}

button selected {
    background-color: @lavender;
    text-color: @bg-col;
}

message {
    background-color: @bg-col-light;
    border-radius: 8px;
    padding: 12px;
}

textbox {
    background-color: transparent;
    text-color: @fg-col;
}

error-message {
    background-color: @red;
    text-color: @bg-col;
}