* {
	border: none;
	border-radius: 17px;
	font-family: NotoSans Nerd Font Regular;
	font-size: 12px;
    font-weight: bolder;
	background: transparent;
	color: white;
	min-height: 0;
}

window#waybar {
	background: rgba(0, 0, 0, 0.1);
}

window#waybar #tray menu{
	background: rgba(0, 0, 0, 0.1);
}

#tray menu :hover {
    background: rgba(0, 0, 0, 0.1);
}

#tray menu :hover label { 
    background: rgba(0, 0, 0, 0.1);
}

tooltip {
	background: rgba(0, 0, 0, 0.1);
}

/* Workspace buttons are pills inset 4px from the bar's edge, so their 13px radius
   is concentric with the bar's 17px one. Everything GTK's theme draws on a button
   (border, shadows, hover gradient) is reset here, as it otherwise shows up as a
   square box on hover. */
#workspaces button {
	margin: 4px 0 4px 4px;
	padding: 0 6px;
	min-width: 16px;
	border: none;
	border-radius: 13px;
	outline: none;
	box-shadow: none;
	text-shadow: none;
	background-color: transparent;
	/* Active-workspace underline: 2px line that grows from the centre (see .active). */
	background-image: linear-gradient(white, white);
	background-repeat: no-repeat;
	background-position: 50% 92%;
	background-size: 0 2px;
	transition: background-size 200ms ease-out, background-color 150ms ease-out;
}

#workspaces button:hover {
	background-color: rgba(255, 255, 255, 0.12);
}

#tray window decoration{
   border-style: none;
   box-shadow: none;
}

#workspaces button.active {
	background-size: 10px 2px;
}

/* Workspaces with no windows are dimmed, unless it's the one you're on. The colour
   goes on the label because the `*` rule above gives every label its own white. */
#workspaces button label {
	transition: color 150ms ease-out;
}

#workspaces button.empty:not(.active) label {
	color: rgba(255, 255, 255, 0.4);
}

#clock, #tray, #custom-notifications, #custom-control-center {
	padding: 0 7px;
}

/* Notification count: a small white disc overlapping the bell's top right corner.
   The margins shrink it from the bar's full height to 12px; the negative left margin
   pulls it over the bell. Hidden by Waybar when there are no notifications. */
#custom-notifications-count {
	min-width: 6px;
	padding: 0 3px;
	margin: 7px 3px 17px -11px;
	border-radius: 6px;
	background: white;
	color: #18181c;
	font-size: 8px;
}

.imsh-cast-monitor.recording {
    color: #f00;
}

.imsh-cast-monitor.error {
    color: #ff0;
}

/* Control-center button: your logo as a pre-rendered 18px image.
   GTK stretches SVG backgrounds as pixels (which makes them blurry), so logo-18.png is
   rendered at exactly 18px, and logo-36.png is used automatically on 2x-scaled monitors. */
#custom-control-center {
    min-width: 18px;
    min-height: 18px;
    background-image: -gtk-scaled(url("file:///home/vizie/.config/waybar/logo-18.png"),
                                  url("file:///home/vizie/.config/waybar/logo-36.png"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    margin-right: 6px; /* gap between the logo and the end of the bar */
}