@use "sass:color";

@import "./colors.scss";

window.Bar {
	border: none;
	box-shadow: none;
	/* background-color: $bg; */
	color: $fg;
	font-size: 0.77em;
	font-weight: normal;

	.BlurBox {
		background-color: #00000000;
		margin-top: 2px;
	}

	button {
		all: unset;
		background-color: transparent;

		&:hover label {
			text-shadow:
				0 0 5px color.adjust($fg, $alpha: -0.44),
				0 0 10px color.adjust($fg, $alpha: -0.44);
		}
	}

	.WorkspaceBox {
		background-color: color.adjust($fg, $alpha: -0.93);
		border: 1.5px solid transparent;
		background:
			linear-gradient($bg, $bg) padding-box,
			$border-gradient border-box;
		border-radius: $radius;
		font-size: 0.88em;
		margin: 4px;
	}

	.Workspaces {
		padding: 0px 7px;
		font-size: 0.88em;
	}

	.WorkspaceButton {
		background-color: $fg;
		font-size: 0.44em;
		margin: 7px 3px 7px 3px;
		border-radius: 8px;
	}

	label {
		transition: 200ms;
		margin: 2px;
		border-radius: $radius;
		font-size: 1em;
		border: 1pt solid transparent;
	}

	.TimeBox {
		background-color: color.adjust($fg, $alpha: -0.93);
		border: 1.5px solid transparent;
		background:
			linear-gradient($bg, $bg) padding-box,
			$border-gradient border-box;
		border-radius: $radius;
		margin: 4px;
		padding: 0px 4px;
	}

	.Focused {
		color: color.adjust($fg, $alpha: -0.47);
		background-color: color.adjust($fg, $alpha: -0.97);
		border: 1.5px solid transparent;
		background:
			linear-gradient($bg, $bg) padding-box,
			$border-gradient border-box;
		border-radius: $radius;
		margin: 4px 4px 4px 0px;
		padding: 0px 4px;
	}

	.MusicLabel {
		color: color.adjust($fg, $alpha: -0.47);
	}

	.Battery label {
		padding-left: 0;
		margin-left: 0;
	}

	.SysUtilsArea {
		background-color: color.adjust($fg, $alpha: -0.93);
		border: 1.5px solid transparent;
		background:
			linear-gradient($bg, $bg) padding-box,
			$border-gradient border-box;
		border-radius: $radius;
		margin: 4px 4px 4px 0;
		padding: 0 8px 0 8px;
	}

	.MusicVisBox {
		background-color: color.adjust($accent, $alpha: -0.34);
		font-size: 0.44em;
		margin: 6px 0 6px 0;
		border-radius: 8px;
	}

	.TrayButton {
		margin: 2px 6px 0 6px;
	}
}
