/* Catppuccin Mocha theme for Wofi with transparency and rounded corners */

/* === Catppuccin Mocha Palette === */

/* Background / Base */
@define-color crust      #11111b;
@define-color mantle     #181825;
@define-color base       #1e1e2e;
@define-color base-alpha rgba(30, 30, 46, 0.9);

/* Surface */
@define-color surface0   #313244;
@define-color surface1   #45475a;
@define-color surface2   #585b70;

/* Overlays */
@define-color overlay0   #6c7086;
@define-color overlay1   #7f849c;
@define-color overlay2   #9399b2;

/* Subtext & Text */
@define-color subtext0   #a6adc8;
@define-color subtext1   #bac2de;
@define-color text       #cdd6f4;

/* Accents */
@define-color rosewater  #f5e0dc;
@define-color flamingo   #f2cdcd;
@define-color pink       #f5c2e7;
@define-color mauve      #cba6f7;
@define-color red        #f38ba8;
@define-color maroon     #eba0ac;
@define-color peach      #fab387;
@define-color yellow     #f9e2af;
@define-color green      #a6e3a1;
@define-color teal       #94e2d5;
@define-color sapphire   #74c7ec;
@define-color blue       #89b4fa;
@define-color lavender   #b4befe;

        * {
    background-color: transparent;
    color: @text;
    font-family: "JetBrainsMono Nerd Font", monospace;
    font-size: 12pt;
}

#main {
    background-color: @base;
    border: 1px solid @surface0;
    border-radius: 30px; /* Rounded corners */
    padding: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

#input {
    background-color: @surface0;
    color: @text;
    border: 1px solid @surface1;
    border-radius: 30px; /* Rounded corners */
    padding: 5px 10px;
    margin-bottom: 10px;
}

#entry {
    background-color: rgba(
        200,
        200,
        200,
        0.2
    ); /* very light grey, very transparent */
    color: @text;
    border-radius: 30px;
    padding: 5px 10px;
    margin: 2px 0;
}

#entry:focus {
    background-color: @surface1;
    color: @lavender;
    border-radius: 30px; /* Rounded corners */
    background:
        linear-gradient(@base-alpha, @base-alpha) padding-box,
        linear-gradient(45deg, @blue, @green) border-box;
}

#entry:selected {
    background-color: @surface2;
    color: @text;
    border-radius: 30px; /* Rounded corners */
}

#scrollbar {
    background-color: @surface0;
    border-radius: 30px; /* Rounded corners */
    width: 8px;
}

#scrollbar.handle {
    background-color: @blue;
    border-radius: 30px; /* Rounded corners */
}