.output-control {
	position: relative;

	.outputs {
		position: absolute;
		bottom: 40px;
		right: -150px;
		width: 300px;
		background: $white;
		color: $black;
		font-size: 14px;
		font-weight: 600;
		text-align: left;
		border-radius: 3px;
		box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
		z-index: 9;

		&:after {
			content: '';
			display: block;
			width: 6px;
			height: 6px;
			background: $white;
			-ms-transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
			position: absolute;
			bottom: -3px;
			right: 159px;
		}

		.output {
			padding: 16px 20px 12px;

			&:not(:first-child) {
				border-top: 1px solid rgba(0,0,0,0.05);
			}

			.name {
				display: block;
				padding-bottom: 5px;
			}

			.volume-control {
				display: block;
				position: relative;
				padding-left: 22px;

				.mute-control {
					position: absolute;
					top: -2px;
					left: -2px;
					padding: 2px;
					color: $black;
				}
			}
		}
	}

	@include responsive($bp_medium){
		.outputs {
			width: 86vw;
			right: 0;

			&:after {
				right: 9px;
			}
		}
	}
}