/* What is different about each module.
 *
 * The icons for the workspaces, the clock pair, the launcher and the language
 * live here rather than in the config, because waybar's format-icons takes
 * text and not paths. @ICONS@ is substituted by install.sh with the icon
 * theme's absolute path, so the theme can move without editing this file.
 */

/* ------------------------------------------------------------------ *
 * Launcher: the one always-coloured pill, and the desktop's identity. *
 * ------------------------------------------------------------------ */

/* The mark itself is the image module's own content, so this only draws the
 * pill it sits in. The horizontal padding is wider than the vertical so the
 * pill reads as a capsule like its neighbours rather than a circle: an image
 * module sizes to its icon, where the others size to their text. */
#image.launcher {
	background: @accent;
	padding: 2px 14px;
	min-width: 20px;
}

/* The accent pill inverts on hover rather than lightening: it is already the
 * brightest thing on the bar. */
#image.launcher:hover {
	background-color: @main-bg;
}

/* ---------------------------------------------- *
 * Clock: the only text, each with a leading icon. *
 * ---------------------------------------------- */

#clock.date,
#clock.time {
	background-repeat: no-repeat;
	background-position: 10px center;
	background-size: 16px 16px;
	padding-left: 32px;
}

#clock.date {
	background-image: url("@ICONS@/mimetypes/22/x-office-calendar.svg");
}

#clock.time {
	background-image: url("@ICONS@/categories/22/clock.svg");
}

/* ------------------------------------------------------------- *
 * Workspaces: eight themed icons, one per button, set by CSS.    *
 *                                                               *
 * The module's labels are empty (see the module config), so each *
 * button is an icon-sized box and nothing else.                  *
 * ------------------------------------------------------------- */

#workspaces button {
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	min-width: 26px;
	min-height: 26px;
	margin: 0 1px;
	border-radius: 10px;
	/* Dim by default; the active workspace is the one at full strength. */
	opacity: 0.45;
	transition: opacity 0.3s ease, background-color 0.3s ease;
}

#workspaces button:hover {
	background-color: @hover-bg;
	opacity: 0.8;
}

#workspaces button.active,
#workspaces button.focused {
	background-color: @hover-bg;
	opacity: 1;
}

#workspaces button.urgent {
	background-color: @critical;
	opacity: 1;
}

/* The eight. Generic names, so the bar does not lie when the application on a
 * workspace changes. */
#workspaces button:nth-child(1) { background-image: url("@ICONS@/categories/22/web-browser.svg"); }
#workspaces button:nth-child(2) { background-image: url("@ICONS@/categories/22/utilities-terminal.svg"); }
#workspaces button:nth-child(3) { background-image: url("@ICONS@/categories/22/text-editor.svg"); }
#workspaces button:nth-child(4) { background-image: url("@ICONS@/devices/22/network-server.svg"); }
#workspaces button:nth-child(5) { background-image: url("@ICONS@/actions/22/document-edit.svg"); }
#workspaces button:nth-child(6) { background-image: url("@ICONS@/categories/22/applications-graphics.svg"); }
#workspaces button:nth-child(7) { background-image: url("@ICONS@/categories/22/internet-chat.svg"); }
#workspaces button:nth-child(8) { background-image: url("@ICONS@/devices/22/input-gaming.svg"); }

/* ------------------------------------------------ *
 * Language: a flag, shipped by this repo.           *
 *                                                   *
 * An image module, not hyprland/language: that one   *
 * has no per-language CSS class, so the flag could   *
 * not be selected. wb-lang picks the file instead.   *
 * ------------------------------------------------ */

#image.lang {
	padding: 2px 10px;
	min-width: 22px;
}

/* ------------------------------------------- *
 * Dots: coloured by their scripts, not by CSS. *
 * ------------------------------------------- */

/* The privacy pill only exists while something is capturing: an empty label
 * would otherwise leave a bare capsule sitting on the bar. */
#custom-privacy_dots {
	padding: 2px 10px;
}

#custom-privacy_dots.mic-off.cam-off.loc-off.scr-off {
	padding: 0;
	margin: 0;
	opacity: 0;
}

#custom-vmdot {
	padding: 2px 10px;
}

/* ---------------------------------------- *
 * Volume: a drawer, the microphone hidden.  *
 * ---------------------------------------- */

#volume {
	padding: 2px 8px;
}

#volume image {
	padding: 0 4px;
}

/* --------------------------------------------------------- *
 * Taskbar: application icons, with the idea2 underline.      *
 * --------------------------------------------------------- */

#taskbar button {
	background: transparent;
	padding: 0 8px;
	margin: 0 1px;
	border-bottom: 3px solid transparent;
	transition: border-bottom-color 0.3s ease-out, background-color 0.3s ease;
}

#taskbar button:hover {
	background: @hover-bg;
	border-bottom-color: @accent;
}

#taskbar button.active {
	border-bottom-color: @accent;
}

/* --------------------------- *
 * Tray and presentation mode.  *
 * --------------------------- */

#tray {
	padding: 2px 10px;
}

#tray menu {
	background: @main-bg;
	color: @main-fg;
	border: 1px solid @outline;
	border-radius: 8px;
}

#image.idle {
	padding: 2px 10px;
	min-width: 22px;
}