/*--------------------------------------------------------------
# MIXER
--------------------------------------------------------------*/

.satus-section--mixer {
	position: relative;

	overflow: hidden;
	flex-direction: column;

	width: calc(100% - 32px);
	height: 128px;
	margin: 8px 16px 0;

	border: unset;
	border-radius: 10px;
	background-color: #000;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

	flex: unset;
	align-items: flex-start;
}

.satus-section--mixer::before {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	content: '';

	background: rgba(0, 0, 0, .5);
}

.satus-section--mixer .satus-h1 {
	font-size: 14px;

	position: absolute;
	bottom: 0;
	left: 0;

	margin: 16px;

	transition: 200ms;

	color: #fff;
	text-shadow: 0 0 1px rgb(0, 0, 0, .4);
}

.satus-section--mixer:hover .satus-h1 {
	opacity: 0;
}

.satus-section--mixer>.satus-section {
	position: absolute;
	bottom: 0;

	visibility: hidden;

	width: 100%;
	margin: 0;
	padding: 4px 0;

	transition: 200ms;
	transform: translateY(32px);

	opacity: 0;
	border: unset;
	border-radius: unset;
	background: #fff;
}

.satus-section--mixer:hover>.satus-section {
	visibility: visible;

	transform: translateY(0);

	opacity: 1;
}

.satus-section--mixer.noconnection>.satus-section>div {
	visibility: hidden;

	pointer-events: none;
}

.satus-section--mixer.noconnection>.satus-section::after {
	font-size: 18px;
	font-weight: 500;

	position: absolute;
	top: 50%;

	width: 100%;

	content: attr(data-no-connection-label);
	transform: translateY(-50%);
	text-align: center;

	opacity: .8;
}

.satus-section--mixer .satus-slider {
	width: 100%;
	padding: 4px 12px;
}