* {
	all: unset;
	font-family: 'SF Pro';
	font-size: 18px;
	font-feature-settings: 'tnum';
	color: #FFF;
}

.bar {
	background-color: rgba(43, 48, 59, 0.5);
	border-bottom: 3px solid rgba(100, 114, 125, 0.5);
}

.end {
	> box {
		padding: 0 8px;

		> label:first-child {
			padding-right: 16px;
		}
	}

	box:not(:last-child) > label:last-child {
		margin-right: 12px;
	}
}

.cal {
	$bg: rgba(43, 48, 59, 1);
	$blue: #9CDCFE;
	$yellow: #F0E68C;

	font-size: 28px;

	.button {
		-gtk-icon-source: none;
	}

	.view {
		background-color: $bg;
		border-radius: 4px;
		border: 3px solid rgba(100, 114, 125, .5);
	}

	.highlight {
		color: $blue;
		font-weight: bold;
	}

	:indeterminate {
		color: #999;
	}

	:selected {
		background-color: #414859;
		border-radius: 4px;
	}
}

.workspaces button {
	label {
		padding: 0 13px;
	}

	&:hover {
		background: rgba(0, 0, 0, 0.2);
	}

	&.active {
		background: rgba(0, 0, 0, 0.4);
	}

	&:hover, &.active {
		box-shadow: inset 0 -3px #FAA14F;
	}
}