/* Please refer to GTK4 CSS specification */

/* https://docs.gtk.org/gtk4/css-properties.html */
@define-color bg     #161616;
@define-color fg     #DDDDDD;
@define-color accent #684EFF;

* {
	all: unset;
}

window {
	border: 1px @accent solid;
	border-radius: 10px;

	background-color: @bg;
}

.main {
	margin: 20px;
}

.client {
	color: @fg;
	font-family: 'Noto Sans';
	font-size: 1.1em;
}

.client .icon {
	color: @fg;

	-gtk-icon-style: symbolic;
}

/* Hide Application Name
.client > .name {
	font-size: 0;
} */

/* Hide Application Description
.client > .description {
	font-size: 0;
} */

/* Numeric Volume Level */
.client .volume {
	color: @fg;
}

/* Slider Bar */
.client scale > trough {
	background-color: lighter(@bg);
	border-radius: 10px;
}

/* Slider Knob */
.client scale > trough > slider {
	padding: 0;

	border: none;
	border-radius: 2px;

	background: @accent;
	transition-duration: 400ms;
}

/* Slider Knob */
.client scale > trough > slider:hover {
	background-color: shade(@accent, 1.1);
}

/* Slider Knob */
.client:active scale > trough > slider {
	background-color: shade(@accent, 1.1);
	transform: scale(1.1);
}

/* Slider Bar Filled */
.client scale > trough > highlight {
	background-color: @accent;

	border: none;
	border-radius: 10px;

	margin: 1px;

	transition: background-color 300ms;
}

/* Slider Peak */
.client scale > trough > fill {
	background: none;

	border-radius: 10px;

	margin: 0px;
}

/* Numeric Volume Level */
.client.muted .volume {
	text-decoration: line-through;
}

/* Slider Knob */
.client.muted scale > trough > slider {
	background: shade(@accent, 0.5);
}

/* Slider Bar Filled */
.client.muted scale > trough > highlight {
	background: shade(@accent, 0.5);
}

@keyframes client-add-horizontal {
	from {
		transform: translateX(-200px);
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes client-remove-horizontal {
	from {
		opacity: 1;
	}
	to {
		transform: translateX(-200px);
		opacity: 0;
	}
}

.client.horizontal.new {
	animation: client-add-horizontal 300ms ease;
}

.client.horizontal.new.removed {
	animation: client-remove-horizontal 300ms ease;
}

.client.horizontal .icon {
	padding-right: 13px;

	-gtk-icon-size: 16px;
}

/* Numeric Volume Level */
.client.horizontal .volume {
	padding-left: 15px;
	padding-bottom: 2px;
}

/* Slider Bar */
.client.horizontal scale > trough {
	min-height: 4px;
}

/* Slider Knob */
.client.horizontal scale > trough > slider {
	min-height: 14px;
	min-width: 6px;

	margin-top: -7px;
	margin-bottom: -7px;
}

/* Slider Peak */
.client.horizontal scale > trough > fill {
	border-top: 1px solid alpha(@accent, 0.8);
	border-bottom: 1px solid alpha(@accent, 0.8);
}

/* Slider Peak */
.client.horizontal.muted scale > trough > fill {
	border-top: 1px solid shade(@accent, 0.5);
	border-bottom: 1px solid shade(@accent, 0.5);
}

.client.vertical.new {
	animation: client-add-vertical 300ms ease;
}

.client.vertical.removed {
	animation: client-remove-vertical 300ms ease;
}

.client.vertical .icon {
	padding-bottom: 5px;

	-gtk-icon-size: 20px;
}

/* Numeric Volume Level */
.client.vertical .volume {
	padding-top: 10px;
}

/* Slider Bar */
.client.vertical scale > trough {
	min-width: 4px;

	margin-top: 10px;
}

/* Slider Knob */
.client.vertical scale > trough > slider {
	margin-left: -7px;
	margin-right: -7px;

	min-height: 6px;
	min-width: 14px;
}

/* Slider Peak */
.client.vertical scale > trough > fill {
	border-left: 1px solid alpha(@accent, 0.8);
	border-right: 1px solid alpha(@accent, 0.8);
}

/* Slider Peak */
.client.vertical.muted scale > trough > fill {
	border-left: 1px solid shade(@accent, 0.5);
	border-right: 1px solid shade(@accent, 0.5);
}

@keyframes client-add-vertical {
	from {
		transform: translateY(200px);
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes client-remove-vertical {
	from {
		opacity: 1;
	}
	to {
		transform: translateY(200px);
		opacity: 0;
	}
}