/*********** NEVER USE filter: !!! GIVES RANDOM ARTIFACTS ALL OVER THE PLACE **************/

#mixer {
	z-index: 28;
	background: radial-gradient(#252525, #0a0a0a);
}

#mixer-channels {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 0;
}

#mixer-channel-overlay {
	background: #000;
	position: fixed;
	z-index: 30;
	top: calc(2rem + 2px);
	right: 0;
	height: calc(100% - 2 * 2rem - 2 * 1px);
}

/* ease drawing a bit for the poor GPU; we do it via narrower widths/heights instead and let the background shine through */
.mixer-channels slider {
	border: none;
}

body.audio #mixer-channels {
	white-space: nowrap;
	overflow: hidden; /* we handle scrolling ourselves to avoid hardware "acceleration" and rubberbanding */
}
body:not(.audio) #mixer-channels {
	box-sizing: border-box;
	padding: 1vw;
	overflow: auto;
}

button.group {
	width: 100%;
	display: block;
}

.ui button:not(.toggle).fx-empty {
	background: #252525;
}
body.ui-mouse .ui button:not(.toggle).fx-empty:hover {
	filter: none;
}

.mixer-channels button {
	border: none;
	margin: 1px 0;
}

.mixer-channels > div {
	font-size: 0;
	/* speed up scrolling etc. */
/*	transform: translate3d(0, 0, 0);*/
	/**/
}

body.audio .mixer-channels > div {
	width: 6rem; /* also update App.config.channelWidth */
	background: #000;
	border-right: solid #000 1px;
	border-left: solid #000 1px;
}
body.audio .mixer-channels > div.dummy {
	background: transparent;
	border: none;
}

body.audio #mixer-channels > div {
	position: absolute;
	top: 0;
	height: calc(var(--app-height) - 2rem);
}

body:not(.audio) .mixer-channels > div {
	display: inline-block;
	width: 17.5vw;
	margin: 1vw;
	vertical-align: top;
	border: solid #000 1px;
	box-sizing: border-box;
}

body.audio #mixer-channels > div.master {
	position: fixed;
	right: 0;
	top: 2rem;
	z-index: 20;
	border-left: solid 2px #000;
	background: #000;
}

.channel-name, .channel-instrument-name {
	font-size: 0.7rem;
	line-height: 1;
	white-space: nowrap;
	padding: 8px 0;
	position: relative;
}
.channel-name {
	box-sizing: border-box;
	color: #fff;
	padding-left: 8px;
	padding-right: 1.5rem;
	overflow: hidden;
}
.mixer-channels > div.selected .channel-name {
	color: #000;
}

.channel-midi-led {
	position: absolute;
	top: 9px;
	right: 8px;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 100%;
	background: #000;
}
.channel-midi-led div {
	opacity: 0;
	position: absolute;
	top: 1px;
	left: 1px;
	right: 1px;
	bottom: 1px;
	border-radius: 100%;
}

body.audio #mixer-channels > div.selected {
	z-index: 10;
	box-shadow: 0 0 1rem 0 #000;
}
body:not(.audio) #mixer-channels > div.selected {
	outline: solid #ccc 0.1rem;
}

body.audio #mixer-channels div.channel-selected {
	position: absolute;
	top: calc(0.7rem + 2 * 8px);
	left: 0;
	width: 100%;
	bottom: 0;
	background: #fff1;
	mix-blend-mode: screen;
	pointer-events: none;
}

.channel-instrument-name {
	background: #222;
	color: #aaa;
	padding: 8px;
	display: flex;
}
.channel-instrument-name > span {
	overflow: hidden;
	display: block;
	padding-right: 0.85rem;
	flex-grow: 1;
	flex-shrink: 0;
}

/* busy spinner */
.channel-instrument-name.loading, button.insert.loading {
}
.channel-instrument-name.loading abbr, button.insert.loading abbr {
	animation: rotating 2s linear infinite;
	line-height: 0.92em;
	width: 0.75em;
	height: 0.83em;
	font-size: 1.4em;
	display: block;
	position: absolute;
	top: calc(50% - 0.38em);
	left: calc(50% - 0.35em);
}
@keyframes rotating {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(1turn);
	}
}
/**/

.channel-channel {
	color: #888;
	flex-shrink: 1;
	overflow: hidden;
}
.channel-inserts {
	overflow-x: hidden;
	overflow-y: auto;
}
.channel-inserts button.insert img {
	position: absolute;
	right: 8px;
	top: calc(50% - 0.6em);
}

.channel-channel abbr.local-audiobus {
	font-size: 0.6rem;
	vertical-align: -0.03em;
	margin-right: 0.3em;
	opacity: 0.5;
}
.channel-channel img, .channel-inserts button.insert img { /* for au icon */
	height: 1.2em;
	width: 1.2em;
	vertical-align: middle;
	border: none;
	margin: 0 -2px 0 0;
}

div.radio button abbr.local-audiobus {
	font-size: 0.8rem;
	margin-right: 0.3em;
	opacity: 0.8;
}

.channel-buttons {
	font-size: 0;
	margin: 0.5px 0 1px 0;
}
.ui .channel-buttons button {
	width: calc(50% - 0.5px);
	box-shadow: none;
	padding: 0;
	border-width: 0.5px;
}
.ui .channel-buttons button, .ui .channel-inserts button {
	color: #aaa;
}
.mixer-channels .channel-buttons button:nth-child(odd), .channel-inserts > button {
	margin-right: 0.5px;
}
.mixer-channels .channel-buttons button:nth-child(even), .channel-inserts > button {
	margin-left: 0.5px;
}

/* toggle buttons that can take an instrument color as a div overlay (and then the text as span) */
.channel-inserts button.insert,
.channel-buttons button.solo,
.mixer-channels button.group
{
	position: relative;
	border-left: none;
	border-right: none;
}

button.colored {
	position: relative;
}
button.colored span {
	z-index: 10;
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.mixer-channels > div .channel-inserts > button.insert.active { color: #fff; }
.mixer-channels > div.selected .channel-inserts > button.insert.active { color: #000; }

.channel-inserts > button.insert.active.ui-touch { filter: brightness(1.25); }

.channel-inserts > button.insert.parallel > span:before,
.channel-inserts > button.insert.in-parallel > span:before
{
	display: inline-block;
	margin-left: -8px;
	margin-right: 8px;
	width: 1rem;
	text-align: center;
}
.channel-inserts > button.insert.parallel > span:before {
	content: 'a';
	color: transparent;
	background: linear-gradient(64deg, transparent calc(50% - 0.7px), #000, transparent calc(50% + 0.7px));
}
.channel-inserts > button.insert.in-parallel > span:before {
	content: '↓';
	display: inline-block;
	border-right: solid #000 1px;
}

/* toggle buttons that can take an instrument color as a div overlay (and then the text as span) */
button.colored > div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0.07;
}
.channel-inserts > button.insert > span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	text-align: left;
	padding-left: 8px;
	/*padding-right: 1.5rem*/;
	padding-right: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.7rem; /* to match font size of instrument title etc. */
}
button.colored.on > div,
.channel-inserts > button.insert.active > div
{
	opacity: 0.87;
}

.popups-shade > menu#mixer-channels-menu {
	width: 33rem;
	box-sizing: border-box;
	padding-bottom: 3rem;
}

.popups-shade > menu .popup-buttons.fixed {
	position: absolute;
	bottom: 0;
	left: 0;
	margin-bottom: 0;
}

#mixer-channels-menu-colors {
	position: relative;
	display: inline-block;
	height: 2rem;
	vertical-align: top;
}

#mixer-channels-menu-colors button {
	border: none;
	box-shadow: none;
	position: absolute;
	top: 0;
	height: 100%;
}
#mixer-channels-menu-colors button.active {
	outline: solid 2px #fff;
	z-index: 1;
}

/* mostly for MIDI icon */
#mixer-channels-menu-midi-id abbr,
#mixer-channels-menu-midi-id-button abbr,
#arranger-tracks-menu-source-midi-id-button abbr,
#arranger-tracks-menu-midi-id-options abbr,
#transport-sync-source-buttons abbr,
#transport-sync-source abbr,
#settings-midi-sources-buttons abbr,
#midi-import-instrument-midi-destination-buttons abbr,
#settings-tick-midi-id-buttons abbr
{
	font-size: 0.75rem;
	margin-right: 0.3rem;
	opacity: 0.5;
}
button.toggle.icon-with-text abbr /* could've spared ourselves all of the above */
{
	font-size: 0.75rem;
	margin-right: 0.3rem;
}

.channel-audio {
	width: 100%;
}
.channel-mute {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #0008;
/*	transform: translate3d(0, 0, 0);*/
	display: none;
	pointer-events: none;
}
.mixer-channels > div.mute .channel-mute {
	display: block;
}

#mixer-channels-menu-controller-pages {
	width: 80%;
	overflow: hidden;
	display: inline-block;
	white-space: nowrap;
	position: relative;
}
#mixer-channels-menu-controller-pages > div {
	transform: translate3d(0, 0, 0);
	transition: transform 0.2s;
}

.channel-inserts > button:not(.toggle) {
	width: 100%;
	display: block;
	margin-left: 0;
	margin-right: 0;
}

.channel-faders {
	position: relative;
}

.collapse {
	transition: height 0.15s;
	overflow: hidden;
}

.channel-faders canvas { /* meter */
	position: absolute;
	bottom: 1.5px;
	height: calc(100% - 2px);
	width: 3px;
}
.channel-faders canvas.left {
	left: calc(30% - 4px);
}
.channel-faders canvas.right {
	right: calc(30% - 4px);
}

.ui button.add-channel {
	padding: 0;
	color: #888;
	height: calc(4.25rem + 17px);
	line-height: 1.5;
}
.ui button.add-channel abbr {
	color: #fff;
	font-size: 1.5rem;
}
body.audio button.add-channel {
	height: 100%;
}

#mixer-menu {
	direction: rtl;
}

#mixer-menu-button {
	position: absolute;
	border-bottom: none;
	border-left: none;
	bottom: 0;
	left: 0;
	z-index: 30;
	border-top-right-radius: 100%;
	padding: 0.2rem 0.9rem 0 0.5rem;
}
body:not(.audio) #mixer-menu-button {
	display: none;
}

.channel-midi-placeholder {
	height: calc(100% - 5rem);
	box-sizing: border-box;
	background: #1a1a1a;
	text-align: center;
	position: relative;
}
.channel-midi-placeholder abbr.local {
	opacity: 0.1;
	position: absolute;
	top: calc(50% - 0.5em - 2.5rem);
	line-height: 1;
	left: 0%;
	width: 100%;
	display: block;
	text-align: center;
}

.channel-send-placeholder {
	position: absolute;
	width: calc(30% - 5px);
	background: #1c1c1c;
}

.channel-fader-placeholder {
	background: #222;
}

span.send-pre {
	font-size: 0.5rem;
	text-transform: uppercase;
}

#mixer-channels-menu-midi-id-options {
	overflow: auto;
}

ul.cpu-list {
	font-size: 0.8rem;
	color: #fff;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.cpu-list li {
	margin: 0;
	padding: 0.2em 0;
	display: flex;
	justify-content: space-between;
}

ul.cpu-list li span {
	display: block;
	width: 15%;
	text-align: right;
}

ul.cpu-list li span:first-child {
	width: 70%;
	text-align: left;
}