@import "../common/scss/colors.scss";

* {
	all: unset;
	transition: 60ms ease-in; 
}

@keyframes gradient_f {
	0% {
		background-position: 0% 200%;
	}
    50% {
        background-position: 200% 0%;
    }
	100% {
		background-position: 400% 200%;
	}
}

tooltip {
	color: #B8BDC9;
	background-color: $bg;
	border: 1px solid $gray;
}

.bar {
	font-family: Noto Sans, "Font Awesome 6 Free";
	background-color: $bg;
  margin: 10px 5px 15px 5px;
	border-radius: 12px;
	padding: 4px;
}

.left-bar, .right-bar {
}

.start-box {
	margin-left: 0.5rem;
}

.start-eventbox {
	font-size: 16px;
	color: $bg;
	background-color: $blue;
	border-radius: 8px;
	transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.68);
}

.start-eventbox:hover {
	color: $bg;
	background-color: $teal;
}

.start-btn {
	padding: 0.45rem 1.1rem;
}

.works {	
	font-size: 18px;
	font-family: "Font Awesome 6 Free Solid";
	border-radius: 8px;

	button:hover {
		color: $mauve;
	}
	
	.0 , .01, .02, .03, .04, .05, .06,
	.011, .022, .033, .044, .055, .066 {
	}

	/* Unoccupied */
	.0 {
		color: #313547;
	}

	/* Occupied */
	.01,
	.02,
	.03,
	.04,
	.05,
	.06,
	.07,
	.08,
	.09, 
	.010 {
		color: $dark-blue;
	}

	/* Focused */
	.011,
	.022,
	.033,
	.044,
	.055,
	.066,
	.077,
	.088,
	.099,
	.01010 {
		color: $blue;
	}
}

.window-box {
	font-size: 14px;
	font-weight: bold;
	background-color: $blue;
	color: $bg;
	border-radius: 8px;
	padding: 0.25rem 0.6rem;
	transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.68);
}

.window-name-label {
	transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.68);
}

// .icon-module__icon {
// 	transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.68);
// }

// .window-name::before {
// 	content: "hello";
// }
// .window-name::after {
// 	content: "hello";
// }

.cava {
	font-family: NotoSansMono Nerd Font;
	color: #B8BDC9;
	background-color: $raisin-black;
	border-radius: 8px;
	padding: 0.1rem 0.5rem;
}

.cava-label {
}

.updates {
	font-size: 14px;
	font-weight: bold;
	background-color: $blue;
	color: $bg;
	border-radius: 8px;
	padding: 0.225rem 0.6rem;
}

.sys {
	font-size: 14px;
	background-color: $blue;
	color: $bg;
	border-radius: 8px;
	padding: 0.44rem 0.6rem;

	box {
		padding: 0.4rem 0.6rem;
	}

	.wifi-on {
		color: $bg;
	}

	.wifi-off {
		color: $gray;
	}
}

.sys:hover {
	background-color: #679df5;
}

.ram {
	font-size: 14px;
	font-weight: bold;
	background-color: $blue;
	color: $bg;
	border-radius: 8px;
	padding: 0.25rem 0.6rem;
}

.nvidia {
	font-size: 14px;
	font-weight: bold;
	background-color: $blue;
	color: $bg;
	border-radius: 8px;
	padding: 0.235rem 0.6rem;
}

.cpu {
	font-size: 14px;
	font-weight: bold;
	background-color: $blue;
	color: $bg;
	border-radius: 8px;
	padding: 0.235rem 0.6rem;
}

.disk {
	font-size: 14px;
	font-weight: bold;
	background-color: $blue;
	color: $bg;
	border-radius: 8px;
	padding: 0.23rem 0.6rem;
}

.notifs-eventbox {
	font-weight: bold;
	color: $bg;
	background-color: $blue;
	border-radius: 8px;
}

.notifs-eventbox:hover {
	background-color: #679df5;
	color: $bg;
}

.notifs-label {
	padding: 0.285rem 0.7rem;
}

.bat-box {
	color: $bg;

	.bat-icon.high {
		background-color: $blue;
	}

	.bat-icon.med {
		background-color: $yellow;
	}

	.bat-icon.low {
		background-color: $red;
	}

	.bat-label {
		font-weight: bold;
	}

	.bat-dark {
		color: $bg;
	}

	.bat-light {
		color: $light-gray;
	}

	scale.bat-scale trough {
		all: unset;
		background-color: $gray;
		border-radius: 8px;
		min-height: 26px;
		min-width: 60px;
	}

	scale.bat-scale.high trough {
		background-color: $blue;
	}

	scale.bat-scale.med trough {
		background-color: $yellow;
	}

	scale.bat-scale.low trough {
		background-color: $red;
	}


	.bat-scale.high trough highlight {
		background-color: $teal;
		border-radius: 8px;
	}

	.bat-scale.med trough highlight {
		background-color: $yellow;
		border-radius: 8px;
	}

	.bat-scale.low trough highlight {
		background-color: $red;
		border-radius: 8px;
	}
}

.time-box {
	margin-right: 0.5rem;
}

.time-eventbox {
	font-weight: bold;
	font-size: 14px;
	color: $bg;
	background-color: $blue;
	border-radius: 8px;
}

.time-eventbox:hover {
	color: $bg;
	background-color: $blue;
}

.time-label {
	padding: 0.25rem 0.6rem;
}

