/* Seti UI by  */
@define-color base00 #151718;
@define-color base01 #282a2b;
@define-color base02 #3B758C;
@define-color base03 #41535B;
@define-color base04 #43a5d5;
@define-color base05 #d6d6d6;
@define-color base06 #eeeeee;
@define-color base07 #ffffff;
@define-color base08 #Cd3f45;
@define-color base09 #db7b55;
@define-color base0A #e6cd69;
@define-color base0B #9fca56;
@define-color base0C #55dbbe;
@define-color base0D #55b5db;
@define-color base0E #a074c4;
@define-color base0F #8a553f;

* {
    /* `otf-font-awesome` is required to be installed for icons */
    font-family: '{{ host.system_mono_font }}', 'Font Awesome 6 Free';
    font-size: 13px;
}

window#waybar {
    {# background: rgba(@base00, 0.5); #}
    background: rgba(0x15, 0x17, 0x18, 0.5);
}

.modules-left {
    padding-left: 4px;
}
.modules-right {
    padding-right: 4px;
}

button {
    /* Use box-shadow instead of border so the text isn't offset */
    box-shadow: inset 0 -3px transparent;
    /* Avoid rounded borders under each button name */
    border: none;
    border-radius: 0;
}

/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
button:hover {
    background: inherit;
    text-shadow: none;
}

.module {
    padding: 0 5px;
    margin: 4px 0;
    color: @base05;
    background: @base01;
    border-radius: 6px;
}

#workspaces {
    padding: 0;
}

#workspaces button {
    padding: 0 5px;
    color: @base05;
}

#workspaces button.empty {
    color: @base03;
}

#workspaces button:hover {
    color: @base02;
}

#workspaces button.active {
    color: @base04;
}

#workspaces button.urgent {
    color: @base08;
}

.warning {
    box-shadow: 0 -2px 0 @base0A;
}

.critical {
    box-shadow: 0 -2px 0 @base08;
}

#network.disconnected, .muted {
    color: @base03;
}