/*//////////////////////////////////////////////////////////
//  _      __          __                  __       __    //
// | | /| / /__ ___ __/ /  ___ _____  ___ / /___ __/ /__  //
// | |/ |/ / _ `/ // / _ \/ _ `/ __/ (_-</ __/ // / / -_) //
// |__/|__/\_,_/\_, /_.__/\_,_/_/   /___/\__/\_, /_/\__/  //
//             /___/                        /___/         //
////////////////////////////////////////////////////////////
*/

@define-color bg #181825;
@define-color fgi #7f849c;
@define-color fga #b4befe;
@define-color bgm rgba(39,39,68, 0.65);

/*Main settings.*/
* {
	font-family: RobotoMonoNerdFont;
	font-size: 13px;
	font-weight: Bold;
	}

window#waybar {
	background: rgba(0,0,0, 0);
	transition-property: background-color;
	transition-duration: .5s;
	}

window#waybar > box{	
	color: @fgi;
	background: @bg;
	transition-property: background-color;
	transition-duration: .5s;
	border-radius: 55px;
	margin-bottom: 10px;
	margin-top: 10px;
	margin-left: 14px;
	margin-right: 14px;
	}


.modules-right {
	border-radius: 7;
	margin: 6 6 6 0px;
	padding: 0 1 0 2px;
	}


.modules-center {
	border-radius: 7;
	margin: 6 6 6 6px;
	padding: 0 2 0 2px;
	}


.modules-left {
	border-radius: 7;
	margin: 6 0 6 6px;
	padding: 0 2 0 0px;
	}


/*Modules setting.*/

/*1. Workspace switcher module.
Main.*/
#workspaces {
	background-color: @bgm;
	padding: 6 5 6 5px;
	border-radius: 30px;
	}

/*1.1. Inactive workspace button.*/
	#workspaces button {
		color: @fgi;
		border-radius: 30px;
		transition: all 0.3s ease;
		padding: 0 14 0 8px;
		}

/*1.2. Inactive workspace hover button.*/
	#workspaces button:hover {
		box-shadow: inherit;
		color: #cdd6f4;
		text-shadow: inherit;
		transition: all 0.3s ease;
		}

	#workspaces button.focused,
/*1.3. Active workspace button.*/
	#workspaces button.active {
		color: @fga;
		transition: all 0.3s ease;
		animation: colored-gradient 10s ease infinite;
		}

/*1.4. Warning workspace button.*/
	#workspaces button.urgent {
		color: #f38ba8; 
		transition: all 0.3s ease;
		}


/*2. Keyboard layout module.*/
#language { 
	background-color: @bgm;
	color: @fga;
	padding: 8 15 7 13px;
	border-radius: 30px;
	margin: 0 7 0 7px;
	}

/*3. PulseAudio control module.*/
#pulseaudio.audio {
	background-color: @bgm;
	color: @fga;
	border-radius: 30px;
	padding: 8 15 7 15px;
	}

/*5. PulseAudio muted status module3*/
#pulseaudio.audio.muted {
	color: @fgi;
	font-size: 15px; 
	padding: 8 14 8 15px;
	}

/*6. Batteries capacity monitoring module.*/
#battery {
	background-color: @bgm;
	padding: 8 15 8 15px;
	border-radius: 30px;
	}

#custom-clockicon {
	padding: 0 6 0 10px;
	font-size: 14px;
	}

#custom-tempicon {
	background-color: @bgm;
	padding: 8 0 8 14px;
	font-size: 14px;
	border-radius: 30 0 0 30px;
	}

#custom-separator {
	padding: 0 3 2 3px;
	}

#temperature {
	/*padding: 0 10 0 2px;*/
	background-color: @bgm;
	padding: 8 15 8 15px;
	border-radius: 30 30 30 30px;
	}

#battery.bat2 {
	margin: 0 7 0 0px;
	padding: 8 15 8 15px;
	}

/*7. Batteries charging status monitoring module.*/
#battery.bat2.charging, #battery.bat2.plugged {
	margin: 0 7 0 0px;
	padding: 8 15 8 15px;
	}

#battery.charging, #battery.plugged {
	background-color: @bgm;
	color: @fga;
	padding: 8 15 8 15px;
	animation: gradient 5s linear infinite;
	transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
	}

/*8. Date and time module.*/
#clock {
	border-radius: 30px;
	padding: 8 15 8 15px;
	background-color: @bgm;
	margin: 0 7 0 0px;
	}