/* The pills, and the way they move.
 *
 * Geometry from idea1: modules are rounded capsules grouped into clusters,
 * with gaps between clusters and none inside one, so the bar reads as a few
 * objects rather than a continuous strip.
 *
 * Motion from idea2: background and colour cross-fade on hover over 0.3s.
 * That is the whole effect. No keyframes anywhere, because GTK's CSS engine
 * supports transitions on these properties directly and an animation would
 * run forever whether or not anyone is looking at it.
 */

/* Every pill. Shared geometry lives here exactly once; modules.css only says
 * what is different about each one. */
#image.launcher,
#clock.date,
#clock.time,
#workspaces,
#custom-vmdot,
#taskbar,
#custom-privacy_dots,
#volume,
#tray,
#image.idle,
#image.lang {
	background: @main-bg;
	color: @main-fg;
	border-radius: 14px;
	padding: 2px 12px;
	margin: 4px 0;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover. The one rule that makes the bar feel alive, and the reason every
 * pill declares a transition above. */
#image.launcher:hover,
#clock.date:hover,
#clock.time:hover,
#custom-vmdot:hover,
#custom-privacy_dots:hover,
#volume:hover,
#tray:hover,
#image.idle:hover,
#image.lang:hover {
	background: @hover-bg;
	color: @hover-fg;
}

/* Clusters.
 *
 * Neighbours inside a cluster sit flush and share one outline; only the ends
 * of a cluster round off. The gap between clusters is a margin on the last
 * pill of each, so adding a module to a cluster means editing one rule.
 */

/* Left: launcher | date time | workspaces | vm dots */
#image.launcher {
	margin-left: 6px;
	margin-right: 6px;
}

#clock.date {
	border-radius: 14px 0 0 14px;
	padding-right: 8px;
}

#clock.time {
	border-radius: 0 14px 14px 0;
	padding-left: 8px;
	margin-right: 6px;
}

#workspaces {
	padding: 2px 6px;
	margin-right: 6px;
}

/* Right: privacy | volume | tray | presentation | language */
#custom-privacy_dots {
	margin-right: 6px;
}

#volume {
	margin-right: 6px;
}

#tray {
	margin-right: 6px;
}

#image.idle {
	margin-right: 6px;
}

#image.lang {
	margin-right: 6px;
}

/* Center: the taskbar is one pill holding a row of buttons. */
#taskbar {
	padding: 2px 6px;
}