@define-color background {{ ui_background }};
@define-color dark {{ background }};
@define-color light {{ white2 }};
@define-color warning {{ orange }};
@define-color critical {{ red }};
@define-color mode {{ grey3 }};
@define-color workspaces {{ blue }};
@define-color workspacesoccupied {{ yellow }};
@define-color workspacesfocused {{ cyan }};
@define-color workspacesurgent {{ red }};
@define-color mpd {{ purple }};
@define-color battery {{ blue }};
@define-color pulseaudio {{ cyan }};
@define-color temp {{ green }};
@define-color cpu {{ yellow }};
@define-color memory {{ orange }};
@define-color network {{ red }};
@define-color weather {{ background }};
@define-color date {{ grey3 }};
@define-color time {{ white2 }};

/* -----------------------------------------------------------------------------
 * Keyframes
 * -------------------------------------------------------------------------- */

@keyframes blink-warning {
    70% {
        color: @dark;
    }

    to {
        color: @dark;
        background-color: @warning;
    }
}

@keyframes blink-critical {
    70% {
        color: @dark;
    }

    to {
        color: @dark;
        background-color: @critical;
    }
}

/* -----------------------------------------------------------------------------
 * Styles
 * -------------------------------------------------------------------------- */

/* Reset all styles */
* {
    border: none;
    border-radius: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    min-height: 0;
}

/* The whole bar */
#waybar {
    background: @background;
    color: @light;
    font-family: {{ term_font }}, {{ cjk_font }};
    font-size: {{ font_size }}pt;
    font-weight: bold;
}

/* Each module */
#clock,
#custom-weather,
#network,
#memory,
#cpu,
#temperature,
#pulseaudio,
#battery,
#mpd,
#tray,
#custom-media,
#mode {
    padding-left: 8px;
    padding-right: 8px;
}

#bluetooth {
    padding-right: 8px;
}

/* Each blink module */
#battery {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* Each critical module */
#temperature.critical,
#memory.critical,
#cpu.critical {
    color: @critical;
}

/* Each critical that should blink */
#battery.critical.discharging {
    animation-name: blink-critical;
    animation-duration: 2s;
}

/* Each warning */
#memory.warning,
#cpu.warning {
    color: @warning;
}

/* Each warning that should blink */
#battery.warning.discharging {
    animation-name: blink-warning;
    animation-duration: 2s;
}

#mode {
    color: @light;
    background: @mode;
}

#workspaces button {
    padding-left: 4px;
    padding-right: 4px;
    color: @dark;
    background: @workspaces;
}

#workspaces button.focused {
    background: @workspacesfocused;
}

#workspaces button.urgent {
    background: @workspacesurgent;
}

#window {
    font-weight: normal;
    margin-right: 20px;
    margin-left: 20px;
}

#mpd {
    background: @mpd;
    color: @dark;
}

#battery {
    background: @battery;
    color: @dark;
}

#pulseaudio {
    background: @pulseaudio;
    color: @dark;
}

#temperature {
    background: @temp;
    color: @dark;
}

#cpu {
    background: @cpu;
    color: @dark;
}

#memory {
    background: @memory;
    color: @dark;
}

#network {
    background: @network;
    color: @dark;
}

#custom-weather {
    background: @weather;
    color: @light;
}

#clock.date {
    background: @date;
    color: @light;
}

#clock.time {
    background: @time;
    color: @dark;
}

/* -----------------------------------------------------------------------------
 * Arrows
 * -------------------------------------------------------------------------- */

#custom-arrow1,
#custom-arrow2,
#custom-arrow3,
#custom-arrow4,
#custom-arrow5,
#custom-arrow6,
#custom-arrow7,
#custom-arrow8,
#custom-arrow9,
#custom-arrow10,
#custom-arrow11 {
    font-size: {{ (font_size + 5) | float }}pt;
}

#custom-arrow1 {
    color: @workspaces;
    background: transparent;
}

#custom-arrow2 {
    color: @mpd;
    background: transparent;
}

#custom-arrow3 {
    color: @battery;
    background: @mpd;
}

#custom-arrow4 {
    color: @pulseaudio;
    background: @battery;
}

#custom-arrow5 {
    color: @temp;
    background: @pulseaudio;
}

#custom-arrow6 {
    color: @cpu;
    background: @temp;
}

#custom-arrow7 {
    color: @memory;
    background: @cpu;
}

#custom-arrow8 {
    color: @network;
    background: @memory;
}

#custom-arrow9 {
    color: @weather;
    background: @network;
}

#custom-arrow10 {
    color: @date;
    background: @weather;
}

#custom-arrow11 {
    color: @time;
    background: @date;
}
