@define-color foreground rgba(228, 228, 239, 1);
@define-color foreground-active rgba(175, 215, 255, 1);
@define-color foreground-disabled rgba(70, 70, 70, 1);
@define-color background rgba(0, 0, 0, 0.88);

* {
    font-family: DejaVu Sans Mono;
    font-size: 12px;
	min-height: 0;
    padding: 0.1rem;
    margin: 0;
}

window#waybar {
    color: @foreground;
    background-color: @background;
}

.module {
	padding: 0rem 0.6rem;
}

#custom-separator {
	padding: 0 0.2rem;
}

#workspaces button {
    padding: 0 0.3rem;
    color: @foreground;
	transition: color 0.1s;

	border: transparent; /* Disable default border when hovered */
}

#workspaces button.empty {
	color: @foreground-disabled;
}

#workspaces button.active {
	color: @foreground-active;
}

#workspaces button:hover,
#workspaces button.*:hover {
	color: @foreground-active;

	box-shadow: none; /* Remove predefined box-shadow */
	text-shadow: none; /* Remove predefined text-shadow */
	background: none; /* Remove predefined background color (white) */
}