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

.audio-modules {
	position: relative;
	/* in the module editor case, we don't want the plugin popup's padding (16px), because it looks stupid if it cuts off the modules during movement / scrolling. */
	margin: -16px;
	overflow: auto;
}
#plugins .popups-shade > menu.fullscreen .audio-modules {
	overflow: visible;
	margin: 25px 0 -16px -15px;
}

.audio-modules-scroller {
}

.audio-module {
	white-space: nowrap;
	width: 7rem;
}
.audio-module:not(.audio-insert) {
	position: absolute;
}

.audio-insert {
	margin: 0 auto;
	/* inserts always have a sidebar */
	padding-right: 2rem;
	/* because buttons in sidebar need to fit */
	min-height: 7rem;
}
.audio-insert.bypass {
	opacity: 0.5;
}

.ui menu .audio-module div.label {
	font-size: 0.45rem;
}

/******** layout exceptions for certain modules ***********/

.audio-module.module-env,
.audio-module.module-delay,
.audio-module.module-delaySimple,
.audio-module.module-compressor,
.audio-module.module-overdrive,
.audio-module.module-sparkle,
.audio-module.module-multiCompressor,
.audio-module.module-sampleMulti,
.audio-module.module-reverb,
.audio-module.module-spectralEq,
.audio-module.module-convolver
{
	width: auto;
}

/**/

.audio-insert-toolbar {
	width: calc(100% + 32px);
	margin: 16px 0 -16px -16px;
}

.audio-module.mute {
	opacity: 0.4;
}

.audio-module.edit {
	min-width: 5rem;
	min-height: 3.5rem;
	outline: solid #000 1px;
}

.audio-module.edit slider, .audio-module.edit button:not(.edit-module-button), .audio-module.edit .audio-meter {
	visibility: hidden;
	pointer-events: none;
}

.audio-module button {
	margin: 0;
	padding-left: 0;
	padding-right: 0;
}

.ui .audio-module button {
	font-size: 0.6rem;
}

.audio-module slider.vertical {
	width: 2.1rem;
}

.audio-module .edit-module {
	position: absolute;
	top: 1rem;
	left: 0;
	right: 0;
	bottom: 0;
	background: #222a;
}

.audio-module.edit button.edit-module-button {
	position: absolute;
	top: calc(50% - 1.2rem);
	left: calc(50% - 1.5rem);
	padding: 0;
	width: 3rem;
}

.audio-module .module-title {
	color: #aaa;
	font-size: 0.55rem;
	padding: 0.2em 0.5em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.audio-module.edit .module-title {
	background: #000;
}

.audio-module .module-title abbr {
	font-size: 0.5rem;
	margin-left: 0.5em;
}

.audio-module .module-title span {
	color: #777;
	margin-left: 0.5em;
}

.audio-module.top {
	z-index: 10;
}
.audio-module.edit.drag.top {
	outline-color: #fff;
}
.audio-module.edit.drag.top .module-title {
	background: #fff;
	color: #000;
}
.audio-module.edit.top .module-title {
	background: #ccc;
	color: #000;
}
.audio-module.edit.top {
	outline-color: #ccc;
}

.edit-module .module-inputs, .edit-module .module-outputs {
	position: absolute;
	top: 50%;
	transform: translateY(-55%);
}

.edit-module .module-inputs { left: 0.25rem; }
.edit-module .module-outputs { right: 0.25rem; }

.edit-module .module-port {
	width: 1.5rem;
	height: 1.5rem;
	background: #fffa;
	border-radius: 100%;
	margin: 0.7rem 0;
	font-size: 0.5rem;
	color: #000;
	line-height: 1.5rem;
	text-align: center;
	box-shadow: 0 0 0.5rem 0 #000;
	opacity: 1;
	transition: opacity 0.2s;
}
.edit-module .module-port.edit {
	background: #777a;
}
.edit-module .module-port.edit.blink {
	background: #fff;
}
.edit-module .module-port.hidden {
	opacity: 0.3;
	pointer-events: none;
}

.edit-module .module-port abbr.local {
	filter: invert(1);
}

.audio-modules canvas.module-connections {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.audio-spectrum {
	width: 30rem;
	height: 15rem;
	position: relative;
	margin-bottom: 0.5rem;
}

.audio-spectrum canvas, .audio-spectrum .audio-spectrum-filters {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 22px);
	overflow: hidden;
}

.audio-spectrum canvas.audio-spectrum-spectrum {
	background: #000;
}

.audio-spectrum canvas.audio-spectrum-grid {
	height: 100%;
}

.audio-spectrum-filters > div {
	position: absolute;
	width: 4rem;
	height: 4rem;
	margin: -2rem 0 0 -2rem;
	border-radius: 100%;
	font-size: 0.7rem;
	text-align: center;
	line-height: 4.2rem;
}

.xui slider.vertical.thin.left slider-bar {
	mask-image: linear-gradient(to left, #00000018 92%, #ffff 92%);
}

.xui slider.vertical.thin.right slider-bar {
	mask-image: linear-gradient(to right, #00000018 92%, #ffff 92%);
}

/*********** non-segmented meters *************/
.audio-meter .meter {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: scale3d(1, 0, 1);
	transform-origin: bottom left;
}
.audio-meter.reduction .meter {
	transform-origin: top left;
}
.audio-meter.line .meter {
	height: 1px;
	transform: none;
}
.audio-meter.line.horizontal .meter {
	width: 1px;
	height: 100%;
	left: 50%;
	transform: none;
}

.audio-meter .min-label,
.audio-meter .mid-label,
.audio-meter .max-label {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 0.4rem;
	mix-blend-mode: difference;
	line-height: 1;
}
.audio-meter .clip {
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	border-bottom: solid 1px #fff;
	backdrop-filter: saturate(0) brightness(1.7); /* man this is so fucking lazy, I know... */
	z-index: 30;
}

.audio-meter div.leds {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: translate3d(0, 0, 0); /* convert to 3d layer so it is "unified" in the pipeline with the meter below */
}

.audio-meter .min-label { bottom: 0.5em; }
.audio-meter .mid-label { top: calc(50% - 0.5em); }
.audio-meter .max-label { top: 0.5em; }

.channel-audio .audio-meter.left {
	left: calc(30% - 4px);
}
.channel-audio .audio-meter.right {
	right: calc(30% - 4px);
}

.audio-meter {
	width: 0.7rem;
	position: relative;
}
.audio-meter.horizontal {
	width: 100%;
	height: 0.7rem;
}

.channel-audio .audio-meter {
	position: absolute;
	bottom: 1px;
	height: calc(100% - 1px);
	width: 3px;
}

/************* segmented meters ****************
.audio-meter .meter {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
}

.audio-meter .min-label,
.audio-meter .mid-label,
.audio-meter .max-label {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 0.4rem;
	mix-blend-mode: difference;
	line-height: 1;
}

.audio-meter .min-label { bottom: 0.5em; }
.audio-meter .mid-label { top: calc(50% - 0.5em); }
.audio-meter .max-label { top: 0.5em; }

.channel-audio .audio-meter.left {
	left: calc(30% - 4px);
}
.channel-audio .audio-meter.right {
	right: calc(30% - 4px);
}

.audio-meter {
	width: 0.7rem;
	position: relative;
}

.channel-audio .audio-meter {
	position: absolute;
	bottom: 1.5px;
	height: calc(100% - 2px);
	width: 3px;
}
*/

menu.modules {
	width: 35rem;
	text-align: left;
}

menu.wave {
	width: 5rem;
}

.audio-modules-color-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	mix-blend-mode: overlay;
	opacity: 0.25;
	pointer-events: none;
}