/*    GRUVBOX DARK PALETTE
      --------------------
*/

@define-color bg        #282828;
@define-color gray1     #928374;
@define-color red1      #cc241d;
@define-color red2      #fb4934;
@define-color green1    #98971a;
@define-color green2    #b8bb26;
@define-color yellow1   #d79921;
@define-color yellow2   #fabd2f;
@define-color blue1     #458588;
@define-color blue2     #83a598;
@define-color purple1   #b16286;
@define-color purple2   #d3869b;
@define-color aqua1     #689d6a;
@define-color aqua2     #8ec07c;
@define-color gray2     #a89984;
@define-color fg        #ebdbb2;
@define-color bg0_h     #1d2021;
@define-color bg0       @bg;
@define-color bg1       #3c3836;
@define-color bg2       #504945;
@define-color bg3       #665c54;
@define-color bg4       #7c6f64;
@define-color bg-gray   @gray1;
@define-color bg0_s     #32302f;
@define-color fg4       #a89984;
@define-color fg3       #bdae93;
@define-color fg2       #d5c4a1;
@define-color fg1       @fg;
@define-color fg0       #fbf1c7;
@define-color orange1   #d65d0e;
@define-color orange2   #af3a03;

/*    GRUVBOX LIGHT PALETTE
      ---------------------     */
/* @define-color bg        #fbf1c7; */
/* @define-color gray1     #928374; */
/* @define-color red1      #cc241d; */
/* @define-color red2      #9d0006; */
/* @define-color green1    #98971a; */
/* @define-color green2    #79740e; */
/* @define-color yellow1   #d79921; */
/* @define-color yellow2   #b57614; */
/* @define-color blue1     #458588; */
/* @define-color blue2     #076678; */
/* @define-color purple1   #b16286; */
/* @define-color purple2   #8f3f71; */
/* @define-color aqua1     #689d6a; */
/* @define-color aqua2     #427b58; */
/* @define-color gray2     #7c6f64; */
/* @define-color fg        #3c3836; */
/* @define-color bg0_h     #f9f5d7; */
/* @define-color bg0       @bg; */
/* @define-color bg1       #ebdbb2; */
/* @define-color bg2       #d5c4a1; */
/* @define-color bg3       #bdae93; */
/* @define-color bg4       #a89984; */
/* @define-color bg-gray   @gray1; */
/* @define-color bg0_s     #f2e5bc; */
/* @define-color fg4       #7c6f64; */
/* @define-color fg3       #665c54; */
/* @define-color fg2       #504945; */
/* @define-color fg1       @fg; */
/* @define-color fg0       #282828; */
/* @define-color orange1   #d65d0e; */
/* @define-color orange2   #af3a03; */


/*	COLOR BINDS
	-----------			*/
@define-color waybar            @bg;
@define-color text-main         @fg;
@define-color text-opposite     @bg;
@define-color text-alert        @red2;
@define-color alert             @red1;
@define-color warning           @orange1;
@define-color ok                @aqua2;
@define-color workspaces        @yellow1;
@define-color workspaces-hover  @yellow2;
@define-color day               @orange1;
@define-color time              @orange2;
@define-color date              @orange1;
@define-color backlight         @bg-gray;
@define-color network           @bg4;
@define-color audio             @bg3;
@define-color battery           @bg2;


/*      ELEMENT SETTINGS
	----------------	*/
.modules-left > widget:first-child > #workspaces {margin: 0}
.modules-right > widget:last-child > #workspaces {margin: 0}

* {
    font-family: Symbols Nerd Font Mono, VictorMono Nerd Font;
    font-size: 12;
    color: @text-main;
    background-color: @waybar;
    border: none;
    border-radius: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
    text-shadow: none;
    icon-shadow: none;
}

workspaces button label,
#window,
widget label,
#tray {
    padding: 0 .5em;
}


/*	ANIMATION
	---------		*/
@keyframes text-blink {
    to {
        color: @text-alert;
    }
}

@keyframes gradient-blink {
    from {
        color: @text-alert;
        background: linear-gradient(to right, @battery 100%, @alert);
    }
    to {
        color: @text-opposite;
        background: linear-gradient(to right, @battery 15%, @alert);
    }
}

/* Attention */
#mode,
#battery.below20.discharging {
    animation-name: text-blink;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
#battery.below20.discharging {
    color: transparent
}

/* Warning */
#pulseaudio.muted,
#network.disconnected/*,
#battery.below20.discharging*/ {
    color: @text-alert;
}

/* Critical */
#battery.below10.discharging {
    animation-name: gradient-blink;
    animation-duration: .75s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}


/*	LEFT MODULES
	------------		*/
#workspaces button label {
    background: @workspaces;
}
#workspaces button:hover label {
    transition: background-color .5s;
    background: radial-gradient( @workspaces-hover, @workspaces 60%);
}
#workspaces button.urgent {
    transition: background-color .5s;
    background: radial-gradient( @alert, @workspaces 80%);
    transition: color .5s;
    color: @text-alert;
}

#mode {
    font-style: italic;
    font-weight: bold;
    padding: 0;
    margin: 0 .5em;
    color: transparent;
    background-color: @waybar;
    box-shadow:
	0 .2em @alert inset,
	0 -.2em @alert inset;
}


/*	CENTER MODULES
	--------------		*/
#scratchpad.empty {
    color: @waybar;
}

#clock {
    color: @text-opposite;
}
#clock.day {
    background-color: @day;
}
#clock.time {
    background-color: @time;
}
#clock.date {
    background-color: @day;
}

#scratchpad.invisible {
    color: @waybar;
}


/*	RIGHT MODULES
	-------------		*/

#tray {
    background-color: @bg;
}
#tray > .passive {
    -gtk-icon-effect: dim;
}
#tray > .needs-attention {
    -gtk-icon-effect: highlight;
}

#backlight {
    background-color: @backlight;
}

#network {
    background-color: @network;
}

#pulseaudio {
    background-color: @audio;
}

#battery {
    background-color: @battery;
}
#battery.charging {
    background: linear-gradient(to right, @battery 30%, @ok);
}
#battery.discharging {
    background: linear-gradient(to right, @battery 30%, @alert);
}


/*	ARROWS
	------			*/
#custom-arrow-right,
#custom-arrow-left {
    padding: 0;
    font-family: Hack Nerd Font Mono;
    font-size: 1.4em;
}

#custom-arrow-right.workspaces {
    color: @workspaces;
    background-color: transparent;
}
#custom-arrow-right.time {
    color: @time;
    background-color: @date;
}
#custom-arrow-right.date {
    color: @date;
    background-color: transparent;
}

#custom-arrow-left.battery {
    color: @battery;
    background-color: @audio;
}
#custom-arrow-left.audio {
    color: @audio;
    background-color: @network;
}
#custom-arrow-left.network {
    color: @network;
    background-color: @backlight;
}
#custom-arrow-left.backlight {
    color: @backlight;
    background-color: transparent;
}
#custom-arrow-left.time {
    color: @time;
    background-color: @day;
}
#custom-arrow-left.day {
    color: @day;
    background-color: transparent;
}