$bg: #100F0F;
$bg2: #1C1B1A;
$ui: #282726;
$ui2: #343331;
$ui3: #403E3C;
$tx3: #575653;
$tx2: #878580;
$tx: #CECDC3;

$re: #D14D41;
$or: #DA702C;
$ye: #D0A215;
$gr: #879A39;
$cy: #3AA99F;
$bl: #4385BE;
$pu: #8B7EC8;
$ma: #CE5D97;

$re2: #AF3029;
$or2: #BC5215;
$ye2: #AD8301;
$gr2: #66800B;
$cy2: #24837B;
$bl2: #205EA6;
$pu2: #5E409D;
$ma2: #A02F6F;

* {
	all: unset;
}

.bar {
	background-color: transparent;
	color: $tx;
	font-family: 'FiraCode Nerd Font';
}

.title {
	background-color: $bg;
	border-radius: 999px;
	padding: 0 16px;
}

.status {
	background-color: $bg;
	border-radius: 999px;
	padding: 0 1px;
}

.status > * {
	margin: 0 8px;
}

.volume { color: $re; }
.network { color: $or; }
.brightness { color: $ye; }
.battery { color: $gr; }
.clock { color: $bl; }
.menu {
	color: $pu;
	font-size: 1.3em;
}

.tags {
	background-color: $bg;
	border-radius: 999px;
	padding: 8px;
}

.tags button {
	color: $tx;
	border: 2.5px solid $ui3;
	border-radius: 999px;
	padding: 8px 8px;
	margin: 0 3px;
}

.tags .focused {
	border-color: $ui3;
	background-color: $ui3;
}

.tags .occupied.focused {
	border-color: $bl;
	background-color: $bl;
}

.tags .occupied {
	border-color: $bl;
}

scale {
	padding: 0 16px;
}

scale trough {
	min-width: 100px;
	background-color: $re;
}

.powermenu {
	background-color: rgba(0 0 0 / 20%);
}

.powermenu-buttons {
	margin: 420px 200px;
}

.powermenu button {
	background-color: $bg;
	font-size: 20px;
}
.powermenu label {
	margin-top: 8px;
	font-size: 1.25rem;
}