* {
  rosewater: #f5e0dc;
  flamingo: #f2cdcd;
  pink: #f5c2e7;
  mauve: #cba6f7;
  red: #f38ba8;
  maroon: #eba0ac;
  peach: #fab387;
  yellow: #f9e2af;
  green: #a6e3a1;
  teal: #94e2d5;
  sky: #89dceb;
  sapphire: #74c7ec;
  blue: #89b4fa;
  lavender: #b4befe;
  text: #cdd6f4;
  subtext1: #bac2de;
  subtext0: #a6adc8;
  overlay2: #9399b2;
  overlay1: #7f849c;
  overlay0: #6c7086;
  surface2: #585b70;
  surface1: #45475a;
  surface0: #313244;
  base: #1e1e2e;
  mantle: #181825;
  crust: #11111b;
}
* {
    background-color: transparent;
    text-color: #cdd6f4;
    font: "JetBrainsMono Nerd Font 12";
}

window {
    width: 408px;
	height: 728px;
    background-color: @base;
    border: 2px solid;
    border-color: @sapphire;
    border-radius: 12px;
    padding: 20px;
    
    /* Center on screen */
    location: center;
    anchor: center;
    x-offset: 0;
    y-offset: 0;
    
    background-image: url("~/.config/rofi/smoking_girl.png", both);
	background-color: rgba(0, 0, 0, 0.5);
}

mainbox {
    spacing: 15px;
    children: [ "inputbar", "message", "listview" ];
}

inputbar {
    padding: 12px;
    border-radius: 8px;
    background-color: @mantle;
    children: [ "prompt", "entry" ];
    spacing: 10px;
}

prompt {
    text-color: @sky;
    font: "JetBrainsMono Nerd Font Bold 13";
}

entry {
    placeholder: "Search networks...";
    placeholder-color: @surface2;
    text-color: @text;
}

message {
    padding: 10px;
    border-radius: 8px;
    background-color: @mantle;
    text-color: @text;
}

listview {
    lines: 10;
    scrollbar: true;
    spacing: 5px;
    padding: 5px;
}

scrollbar {
    width: 4px;
    handle-width: 4px;
    handle-color: @blue;
    border-radius: 4px;
    background-color: @mantle;
}

element {
    padding: 12px 15px;
    border-radius: 2px;
    background-color: rgba(30, 30, 46, 0.6);
    text-color: @text;
    spacing: 12px;
}

element selected {
    background-color: @blue;
    border: 2px solid;
    border-color: @teal;
    text-color: @mantle;
}

element-text {
    background-color: transparent;
    text-color: inherit;
    vertical-align: 0.5;
}

element-icon {
    size: 20px;
    background-color: transparent;
}

/* Active/Connected network highlight */
element selected.active {
    background-color: @sapphire;
    border-color: @sky;
}

/* Urgent (disconnected/error) state */
element.urgent {
    background-color: @red;
}

element selected.urgent {
    background-color: @red;
    border-color: @peach;
}