/* --- 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;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}


/* ---------GROUPS------------------------------------------------ */

/* --- Group-level theming --- */
#hardware,
#workspaces,
#sporadic,
#audio,
#tray,
#datestuff,
#system,
#notifications,
#connections {
    color: @text;
    font-weight: bold;
    border-radius: 30px;
    /* --- Option 1 Green blue filled
    background:
        linear-gradient(transparent, transparent) padding-box,
        linear-gradient(45deg, @blue, @green) border-box;
    border: 2px solid transparent;
    --- */
    /* --- Option 2 default background green blue border
    background:
        linear-gradient(@base, @base) padding-box,
        linear-gradient(45deg, @blue, @green) border-box;
    border: 2px solid transparent;
    */
    /* --- Option 3 NO background, no border */
    background: transparent;
    border: 2px solid transparent;
     /* --- Option 5 Solid border
    background: transparent;
    border: 2px solid @border;
    --- */
    margin: 0px 3px;
    padding: 1px 4px;
}

/* --- Group-level label padding --- */
#hardware label,
#workspaces label,
#sporadic label,
#audio label,
#tray label,
#datestuff label,
#system label,
#notifications label,
#connections label {
    padding: 0px 5px;
    transition: padding 0.2s ease;
}

/* --- Group anchors default visible --- */
#custom-hardware-anchor,
#custom-tray-anchor,
#custom-system-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,
#tray:hover #custom-tray-anchor,
#system:hover #custom-system-anchor,
#connections:hover #custom-connections-anchor {
    opacity: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
}

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

#workspaces {
    border: none;
    background: none;
}

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

/*  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;
}

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 4px;
    margin: 0;
    min-width: 140px;
}
#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;
    margin: 0;
    padding: 0;
}
#pulseaudio-slider trough {
    min-height: 10px;
    min-width: 120px;
    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 */
#custom-notifications.notification,
#custom-notifications.dnd-notification,
#idle_inhibitor.activated {
    background: linear-gradient(45deg, @blue, @green);
    border: 2px solid transparent;
    color: @base;
    border-radius: 30px;
}

#battery.charging {
    color: @green;
}

#batterywarn {
    color: @red;
    animation: blink 0.5s linear infinite alternate;
    border-radius: 30px;
    border: 2px solid transparent;
}

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

#custom-batterywarn {
    margin: 0 5px;
    padding: 0 10px;
    color: @red;
    animation: blink 0.5s linear infinite alternate;
}

@keyframes blink {
    to {
        background-color: #ffffff;
        color: @base;
        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;
}