// GENERAL STUFF ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
*{
	all: unset;
	/* font-family: CaskaydiaCove Nerd Font Mono; */
	font-family: JetBrains Mono NL;
	font-size: 14px;
}

$white: #c0caf5;
$lightgray: #c0caf5;
$gray: #797C7D;
$medgray: #414868;
$darkgray: #545c7e;
$black: #1a1b26;

$color1: #ff9e64;
$color2: #ffc777;
$color3: #ff9e64;
$color4: #ff9e64;
$color5: #9d7cd8;
$color6: #c0caf5;
$color7: #7aa2f7;
$color8: #c3e88d;
$color9: #c3e88d;
$color10:#41a6b5;
$color11: #bb9af7;
$color12: #bb9af7;
$color13: #bb9af7;
$color15: #9d7cd8;
$color16: #3d59a1;
$color14: #bb9af7;
$color17: #7aa2f7;
$color18: #b4f9f8;
$color19: #7dcfff;
$color20: #3b4261;
$color21: #1f2335;
$color22: rgba(13, 14, 25, 0.5);
$color23: rgba(26,27,38,0.8);
$color24: rgba(36, 40, 59, 0.5);
$color25: rgba(13, 14, 25, 0.2);
$color26: rgba(26, 27, 38, 0.2);

.main-container {
	background-color: $color23;
	border-radius: 14px;
	margin: 0px 8px 8px 0px;
	box-shadow: 1px 1px 3px 1px #151515;
}
button {
	color: $color10;
	padding: 6px;
}
button:hover {
	color: $color16;
}
tooltip {
	color: $lightgray;
	background-color: $color20;
	font-weight: bolder;
}

.dash {
	background-color: rgba(20, 22, 30, 0.6);
	margin: 4px 16px 2px 16px;
	padding: 2px;
}
.workspaces-box {
	padding: 6px;
}
.workspaces {
	background-color: $color24;
	border-radius: 10px;
	color: $color16;
	padding: 1px 5px 1px 5px;
}
.workspace-button {
	color: $color18;
}
.workspace-active {
	color:$color12;
}
.window-title {
	color: $gray;
	padding: 2px;
}
.info-box-left {
	padding: 4px;
}
.info-box-right {
	padding: 4px;
}
.info-icon {
	color: $color14;
}
.info-text {
	color: $color19;
}

.sys_win {
    border-radius: 10px;
}

.disk_temp {
    border-radius: 10px;
}
.sys_cpu {
  color: $color17;
  background-color: $color22;
  border-radius: 10px;
}

.sys_disk {
  color: $color9;
  background-color: $color22;
  border-radius: 10px;
}

.sys_tempe {
  color: $color4;
  background-color: $color22;
  border-radius: 10px;
}

.sys_mem {
  color: $color11;
  background-color: $color22;
  border-radius: 10px;
}

.sys_icon_cpu {
	font-size: 20;
	margin: 24px;
	color: $color17;
	padding-right: 4px;
}

.sys_icon_tempe {
	font-size: 20;
	margin: 24px;
	color: $color4;
}
.sys_icon_disk {
	font-size: 20;
	margin: 24px;
	color: $color9;
}

.sys_icon_mem {
	font-size: 20;
	margin: 24px;
	color: $color11;
	padding-right: 4px;
}
.sys_cpu_box {
    border-radius: 16px;
    margin: 10px 10px 10px 10px;
    padding-left: 20px;
}

.sys_tempe_box {
    border-radius: 16px;
    margin: 10px 10px 10px 10px;
    padding-right: 20px;
}

.sys_disk_box {
    border-radius: 16px;
    margin: 10px 10px 10px 10px;
    padding-left: 20px;
}

.sys_mem_box {
    border-radius: 16px;
    margin: 10px 10px 10px 10px;
    padding-right: 20px;
}
.mem_perc {
	color: $color11;
	padding-top: 6px;
}
.cpu_perc {
	color: $color17;
	padding-top: 6px;
}

.tempe_perc {
	color: $color4;
	padding-top: 6px;
}

.disk_perc {
	color: $color9;
	padding-top: 6px;
}

.network {
	padding: 5px 0px 5px 0px;
}
.network-label {
	color: $color18;
	font-size: 16px;
	font-weight: bold;
	padding: 10px 0px 4px 0px;
}
.network-up {
  color: $color14;
  font-size: 30px;
}
.network-down {
  color: $color17;
  font-size: 30px;
}
.network-graph-up {
	color: $color14;
	padding: 10px;
	background-color: rgba(203, 166, 247, 0.2);
}
.network-graph-down {
	color: $color17;
	padding-bottom: 10px;
	background-color: rgba(122, 162, 247, 0.2);
}

// CALENDAR ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
.cal-container {
	border-radius: 10px;
}
.cal-box {
	border-radius: 10px;
}
.cal-window {
	border-radius: 10px;
	padding-top: 10px;
}
.month-year {
		font-size: 12px;
		font-weight: bold;
		margin: 10px;
		padding: 1px;
		color: $lightgray;
}
.day-names {
		margin: 10px;
		font-size: 12px;
		font-weight: bold;
		color: $color10;
}
.date {
	color: $color17;
	font-size: 20px;
	font-weight: bold;
	border-radius: 10px;
}

.clock {
	font-size: 38px;
	font-weight: bold;
	color: $color13;
	border-radius: 10px;
	padding-top: 6px;
}

calendar {
	&:selected {
		color: $color9;
	}
	&:indeterminate {
		color: rgba(205, 219, 249, 0.3);
}}
calendar.button {
	color: $gray;
}
calendar.highlight {
	color: $color18;
	font-weight: bold;
	padding: 10px;
	margin: 10px;
}
.app-container {
	font-size: 28px;
}
.app-label {
	font-size: 18px;
	color: $color17;
}
.app-box {
	font-size: 32px;
	color: $color5;
	padding-bottom: 6px;
}
.quote-container {
	padding-top: 10px;
}
.quote-label {
	font-size: 16px;
	font-weight: bold;
	color: $color9;
}
.quote {
	font-size: 12px;
	font-weight: bold;
	color: $white;
	padding: 10px;
}
.function-label {
	font-size: 20px;
	color: $color17;
}
.function-box {
	font-size: 32px;
	color: $color1;
	padding-bottom: 10px;
}

// WEATHER ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
.weather-container {
	border-radius: 10px;
}
.weather-window {
	padding: 6px;
}
.weather-box {
	padding-top: 2px;
}
.weather-icon {
	color: $color18;
	font-size: 34px;
	font-weight: bold;
	padding-right: 14px;
}
.weather-temp {
	color: $color18;
	font-size: 30px;
	font-weight: bold;
}
.weather-feel {
	color: $color14;
	font-size: 14px;
	padding-bottom: 6px;
}
.weather-desc {
	color: $color7;
	font-size: 16px;
}

.logout {
	font-size: 54px;
}

// MUSIC ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

.player-art {
	border-radius: 12px;
	padding: 6px;
	margin-left: 4px;
}
.player-info {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 12px;
}
.player-tint {
	background: linear-gradient(to right, rgb(25, 25, 25, 0.9), rgba(38, 38, 38, 0.4));
	border-radius: 12px;
}
.player-title {
	font-size: 16px;
	font-weight: bolder;
	padding: 8px 0px 4px 2px;
}
.player-artist {
	color: $white;
	padding: 2px 0px 20px 2px;
}
.player-bar scale trough highlight {
	all: unset;
    background-image: linear-gradient(to right, $color17, $color12);
	border-radius: 24px;
}
.player-bar scale trough {
	all: unset;
	background-color: $darkgray;
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);
	border-radius: 24px;
	min-height: 5px;
	min-width: 150px;
}
.player-position {
	color: $lightgray;
	font-weight: 500;
	padding: 2px;
}
.player-time {
	font-size: 12px;
	padding: 4px;
}
.player-controls {
	background: $color25;
	padding: 2px 0px 2px 0px;
	border-radius: 10px;
	margin: 10px 10px 2px 10px;
}
.player-toggle {
	font-size: 32px;
	color: $color9;
}
.player-previous,
.player-next {
	font-size: 25px;
	color: $lightgray;
}
.player-toggle:hover,
.player-previous:hover,
.player-next:hover {
	color: $color16;
}
.player-shuffle {
	font-size: 16px;
	padding-right: 10px;
	color: $lightgray;
}
.player-loop {
	font-size: 16px;
	color: $lightgray;
}
.player-shuffle:hover,s
.player-loop:hover {
	color: $color15;
}
.music-loop-color,
.music-shuffle-color {
	color: $color3;
}
.vol-text {
	color: $color5;
	padding-left: 10px;
}
.vol-label {
	color: $gray;
	padding-right: 10px;
}
.vol-text {
	color: $gray;
	padding-left: 10px;
}
// scale & Metric  ;;;;;;;;;;;;;;;;;;;;;;;;;;

.scale trough {
	all: unset;
	background-color: $black;
	min-width: 150px;
	min-height: 10px;
	border-radius: 10px;
}
.scale trough highlight {
	background-color: $color5;
	border-radius: 10px;
}
.metric {
	font-size: 12px;
	font-weight: bold;
	color: $color5;
	padding-left: 10px;
}
.metric scale trough highlight {
	background: linear-gradient(90deg, #69a0c4 0%, #4e68be  50%, #684fad 100%);
	border-radius: 6px;
}
.metric scale trough {
	background-color: rgba(20, 22, 30, 0.5);
	border-radius: 6px;
	min-height: 10px;
	min-width: 80px;
	margin-left: 4px;
	margin-right: 4px;
}

// POWER WINDOW ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
.powerframe {
	background-color: $black;
	border-radius: 10px;
	min-width: 108px;
	min-height: 384px;
}
.powermenu {
	border-radius: 10px;
	font-size: 24px;
	padding: 10px;
}
.logout {
	color: $color1;
}
.reboot {
	color: $color2;
}
.poweroff {
	color: $color1;
}
.idle {
	color: $color2;
}
.screenshot {
	color: $color3;
}
.wallpaper {
	color: $color4;
}
.keybind {
	color: $color4;
}

