.snapcast {

	.group {
		& > .inner {
			padding-bottom: 5px;
			border-bottom: 1px solid $grey;

			& > .name {
				font-weight: bold;
			}
		}

		.clients {
			.client {

				&.disconnected {
					opacity: 0.5;
				}

				& > .inner {
					padding: 5px 5px 5px 20px;
					border-bottom: 1px solid $grey;
				}

				.name {
					padding: 6px 0 5px 0;
					display: block;
					width: 100%;
					box-sizing: border-box;
					border: 0;

					&.editing {
						background: transparent;
						color: inherit;
						font-family: inherit;
						font-size: 14px;
						letter-spacing: -0.01rem;
						text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
					}
				}

				.volume-control {
					.mute-control {
						display: inline-block;
						float: left;
						padding: 0 10px;
						border: 0;
					}

					.slider-wrapper {
						padding-left: 30px;
					}

					&.muted {
						.slider .progress {
							background: $mid_grey;
						}
					}
				}
			}
		}
	}
}