/* --- This file has been auto-generated. For permanent changes alter the appropriate block in the README.org. --- */
@import url("file:///home/henrov/.config/shared/Colors.css");

/* --- Global --- */
   * {
    font-family:
        Aporetic Sans Mono,
        Iosevka Nerd Font,
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    font-size: 13px;
}

window#waybar {
    background-color: transparent;
    color: @text;
}

/* --------------------------------------------------------- */

/* --- Group anchors default visible --- */
#custom-hardware-anchor,
#custom-connections-anchor {
    min-width: 80px;
    padding: 0 5px;
    margin: 0 2px;
    opacity: 1;
    transition: opacity 0.2s ease, min-width 0.2s ease, padding 0.2s ease;
}

/* --- Hide anchors on hover of the group --- */
#hardware:hover #custom-hardware-anchor,
#connections:hover #custom-connections-anchor {
    opacity: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
}

#hardware:hover,
#connections:hover {
    min-width: 80px;
}

/* MODULES */
.modules-left > widget,
.modules-center > widget,
.modules-right > widget {
    min-width: 80px;
    color: @text;
    font-weight: bold;
    border-radius: 30px;
    background:
        linear-gradient(@base-alpha, @base-alpha) padding-box,
        linear-gradient(45deg, @blue, @green) border-box;
    border: 2px solid transparent;
}

.modules-left > box + box,
.modules-center > box + box,
.modules-right > box + box {
    margin-left: 5px;
}

.modules-left > widget label,
.modules-left > label ,
.modules-center > widget label,
.modules-center > label,
.modules-right > widget label,
.modules-right > label {
    padding: 0px 5px;
    transition: padding 0.2s ease;
}

/* -----------------------------
   WORKSPACES / WINDOWS MODULE
----------------------------- */

/*  Disable hover effects completely */
#workspaces button,
#workspaces button:hover {
    border: 2px solid transparent;
    padding: 0 6px;
    margin: 0;
    border-radius: 30px;
    transition: none;      /* disable hover animation */
}

/*  Active vs inactive workspace colors */
#workspaces  button.active {
    background: linear-gradient(45deg, @blue, @green);
    color: @base;
}

activeworkspaces:not(.active) {
    background: linear-gradient(@base-alpha, @base-alpha);
    border: 2px solid transparent;
    color: @text-muted;     /* inactive text color */
}

label#custom-windows.module {
    font-size: 14px;
    color: @base;
    padding: 0 8px;
    border-radius: 30px;
    transition: all 0.3s ease;
}

label#custom-windows.active {
    background: linear-gradient(45deg, alpha(@blue, 0.5), alpha(@green, 0.5));
}

label#custom-windows:not(.active) {
    background: transparent;
    color: transparent;
}

/* ---- Media ---*/

#custom-media {
    padding: 0 8px;
    color: @text;
}

#custom-media.inactive {
    background: transparent;
    color: transparent;
    opacity: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

/* ---- Pulseaudio ---*/

#pulseaudio-slider {
    padding: 0;
    margin: 0;
}
#pulseaudio-slider slider {
    min-height: 0px;
    min-width: 0px;
    opacity: 0;
    border-radius: 30px;
    background: linear-gradient(45deg, @blue, @green);
    border: none;
    box-shadow: none;
}
#pulseaudio-slider trough {
    min-height: 10px;
    min-width: 80px;
    border-radius: 30px;
    background: transparent;
}
#pulseaudio-slider highlight {
    min-width: 10px;
    border-radius: 30px;
    background: linear-gradient(45deg, @blue, @green);
    border: 2px solid transparent;
}

/* --------------------------------------------------------- */
/* STATES / SPECIALS */
#idle_inhibitor.activated {
    background: linear-gradient(45deg, @blue, @green);
    border: 2px solid transparent;
    color: @base;
    border-radius: 30px;
}

#battery.charging {
    color: @green;
}

#battery.warning:not(.charging) {
    color: white;
    animation: blink 0.5s linear infinite alternate;
    border-radius: 30px;
    border: 2px solid transparent;
}

#custom-battery-warn {
    margin: 0 5px;
    padding: 0 10px;
    color: white;
    animation: blink 0.5s linear infinite alternate;
}

@keyframes blink {
    to {
        background-color: #ffffff;
        color: black;
        border-radius: 30px;
        border: 2px solid transparent;
    }
}

#network.disconnected {
    background-color: @red;
    border-radius: 30px;
    border: 2px solid transparent;
}

#temperature.critical {
    background-color: @red;
    border-radius: 30px;
    border: 2px solid transparent;
}

/* --------------------------------------------------------- */
/* GLOBAL MODULE SPACING */
#clock,
#idle_inhibitor,
#battery:not(.warn),
#cpu,
#memory,
#temperature,
#network,
#pulseaudio,
#tray {
    margin: 0 5px;
    padding: 0 10px;
}