/* Please refer to GTK4 CSS specification */

/* https://docs.gtk.org/gtk4/css-properties.html */
$bg:     #161616;
$fg:     #FFFFFF;
$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;

	.icon {
		color: $fg;

		-gtk-icon-style: symbolic;
	}

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

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

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

	scale {
		trough {
			/* Slider Bar */
			background-color: lighter($bg);
			border-radius: 10px;

			slider {
				/* Slider Knob */
				padding: 0;

				border: none;
				border-radius: 2px;

				background-color: $accent;
			}

			highlight {
				/* Slider Bar Filled */
				background-color: $accent;

				border: none;
				border-radius: 10px;

				margin: 1px;

				transition: background-color 300ms;
			}

			fill {
				/* Slider Peak */
				background: none;

				border-radius: 10px;

				margin: 0px;
			}
		}
	}

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

		scale {
			trough {
				slider {
					/* Slider Knob */
					background: shade($accent, 0.5);
				}

				highlight {
					/* Slider Bar Filled */
					background: shade($accent, 0.5);
				}
			}
		}
	}
}

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

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

	.icon {
		padding-right: 13px;

		-gtk-icon-size: 16px;
	}

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

	scale {
		trough {
			/* Slider Bar */
			min-height: 4px;

			slider {
				/* Slider Knob */
				min-height: 14px;
				min-width: 6px;

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

			fill {
				/* Slider Peak */
				border-top: 1px solid rgba($accent, 0.8);
				border-bottom: 1px solid rgba($accent, 0.8);
			}
		}
	}

	&.muted {
		scale {
			trough {
				fill {
					/* Slider Peak */
					border-top: 1px solid shade($accent, 0.5);
					border-bottom: 1px solid 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.vertical {
	&.new {
		animation: client-add-vertical 300ms ease;
	}

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

	.icon {
		padding-bottom: 5px;

		-gtk-icon-size: 20px;
	}

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

	scale {
		trough {
			/* Slider Bar */
			min-width: 4px;

			margin-top: 10px;

			slider {
				/* Slider Knob */
				margin-left: -7px;
				margin-right: -7px;

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

			fill {
				/* Slider Peak */
				border-left: 1px solid rgba($accent, 0.8);
				border-right: 1px solid rgba($accent, 0.8);
			}
		}
	}

	&.muted {
		scale {
			trough {
				fill {
					/* Slider Peak */
					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;
	}
}