Iris/src/scss/components/_output-control.scss

.output-control {
	position: relative;

	&.disabled {
		& > .control {
			opacity: 0.2;
			cursor: not-allowed;
		}
	}

	&__items {
		position: absolute;
		bottom: 48px;
		right: -150px;
		width: 300px;
		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;

		@include theme('dark') {
			color: colour('white');
			background: lighten(colour('grey'), 4%);

			&:after {
				background: lighten(colour('grey'), 4%);
			}
		}

		@include theme('light') {
			color: colour('darkest_grey');
			background: colour('white');

			&:after {
				background: colour('white');
			}
		}

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

		.no-results {
			font-size: 1rem;
			text-align: center;
			opacity: 0.5;
			font-weight: normal;
		}
	}

	&__item {
		padding: 12px 18px 8px;
		position: relative;

		&--commands {
			@include clearfix();
			//background: rgba(0,0,0,0.1);
		}

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

		&__controls {
			display: flex;
			align-items: center;

			.dropdown-field {
				flex-grow: 0;

				&__label {
					padding: 2px !important;
					text-align: center;

					.icon {
						font-size: 0.9em;
					}
        }

        &__options {
          top: auto;
          bottom: 20px;
          right: auto;
          left: 0px;

          &:before {
            top: auto;
            right: auto;
            bottom: -3px;
            left: 9px;
          }
        }
			}
		}

		&__volume {
			padding-top: 6px;
			padding-left: 10px;
			flex-grow: 1;
		}

		&__mute.control {
			@include click_feedback(rgba(0,0,0,0.5));
			padding: 2px;
			float: left;
			flex-grow: 0;

			.icon {
				font-size: 1em;
			}
		}
	}

	@include responsive($bp_medium){
		position: absolute;
		top: -8px;
		right: 0px;
		bottom: auto;
		width: 100vw;

		& > .control {
			display: none;
		}

		&__items {
			top: auto;
			right: 0;
			bottom: 0;
			left: 0;
			width: auto;
			padding: 0;
			border-radius: 0;
			max-height: 50vh;

			@include theme('dark') {
				box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.6);
			}

			@include theme('light') {
				box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.1);
			}

			&:after {
				display: none;
			}

			&--no-results {
				display: none;
			}
		}

		&__item {
			@include clearfix();
			padding: 10px 18px 6px;

			&:not(:first-child){
				border-color: rgba(128,128,128,0.05);
			}

			&__name {
				font-weight: 400;
				width: 30%;
				float: left;
				font-size: 12px;
				padding-top: 2px;
			}

			&__controls {
				width: 70%;
				float: right;
			}
		}
	}
}