/* Styles */

@define-color bar-back rgba(40, 40, 40, 0.2);
@define-color widget rgba(40, 40, 40, 0.8);
@define-color warning 	@bryellow;
@define-color critical	red;
@define-color mode	black;
@define-color unfocused	@widget;
@define-color active rgba(100, 40, 40, 0.7);
@define-color focused	red;/*rgba(100, 40, 40, 0.7);*/
@define-color inactive	purple;
@define-color fg1 rgba(0, 0, 255, 1);
@define-color fg2 rgba(255, 0, 0, 1);

/* Reset all styles */
* {
	border: none;
	border-radius: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	box-shadow: none;
	text-shadow: none;
	-gtk-icon-shadow: none;
}

/* The whole bar */
#waybar {
	background: @bar-back; 
  /*
  background: rgba(0, 0, 0, 0);
  */
  /*background-image: linear-gradient(to left, rgba(255, 100, 100, 100), rgba(255, 100, 100, 0));*/
  background: linear-gradient(90deg, rgba(0,212,255,0.19089642693014708) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 75%, rgba(248,0,255,0.2105042700674019) 100%);
	color: @white;
	font-family: JetBrains Mono;
	font-size: 13pt;
}

/* Each module */
#battery,
#clock,
#cpu,
#language,
#memory,
#mode,
#network,
#pulseaudio-slider,
#temperature,
#tray,
#backlight,
#wireplumber,
#idle_inhibitor,
#disk,
#user,
#keyboard-state,
#workspaces button,
#custom-os-icon,
#mpris {
  background: @widget;
  margin: 0 0.2em 0 0.2em;
  padding: 0em 0.3em 0em 0.3em;
  border-radius: 0.35em;
}

#custom-os-icon {
  min-width: 0.8em;
  padding: 0 0.5em 0 0.1em; /*Otherwise the icon is not centered properly*/
}

#tray {
  min-width: 0.8em;
}

#keyboard-state {
  min-width: 2em;
  color: white;
}

#workspaces button {
  opacity: 100;
  color: white;
}

/* Inactive (on unfocused output) */
#workspaces button.inactive {
  background: @inactive;
}

#workspaces button.active {
  background: @active;
}

#custom-os-icon {
  color: rgba(150, 150, 255, 1);
  margin: 0 1em 0 0.2em;
}

#wireplumber {
  /*color: @fg1;*/
  border-radius: 0 0.3em 0.3em 0;
}

#backlight {
  /*color: @fg2;*/
  border-radius: 0.3em 0 0 0.3em;
}


/* Active (on focused output) */
#workspaces button.focused {
  opacity: 100;
  background: @focused;
}

/* Contains an urgent window */
#workspaces button.urgent {
  background: @warning;

}

/* Style when cursor is on the button */
#workspaces button:hover {
  opacity: 110;
  background: @focused;
}

#clock.date {
  border-radius: 0.3em 0 0 0.3em;
  min-width: 7em;
}
#clock.time{
  /*border-radius: 0 0.3em 0.3em 0;*/
  border-radius: 0;
  min-width: 4em;
}