.peer {
	position: relative;
	display: flex;
	align-items: center; 
	gap: 0px;
	padding: 4px 5px 4px 4px;
	border-radius: var(--radius-big);
	/* cursor: pointer; */
}
.peerVU {
    --vu: 0;
    contain: paint;

    position: relative;
    width: 60px;
    height: 60px;

    border-radius: 50%;
    overflow: hidden;   /* important */

    outline: 3.25px solid light-dark(white, var(--color-mid-grey));
    outline-offset: -3px;
}
.peerVU.disabled {
    outline: 3px solid black;
	outline-offset: -3px;
}
.peerStream {
	/* position: absolute; */
    display: block;
    width: 60px;
    height: 60px;

    border-radius: 50%;
    overflow: hidden; 
    object-fit: cover;
}
/* .peerVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
} */
.peerLabel {
	flex:1;
	color: light-dark(var(--color-mid-grey), var(--color-light-grey));
	overflow-y: hidden;
	word-wrap: normal;
	height:fit-content;
	max-height: 38px;
	margin-left:5px;
}
.peer-options {
	flex:0;
	width:20px;
	cursor: pointer;
}
.peer:active {
	background-color: light-dark(var(--color-light-white), var(--color-mid-grey));
}
@media (hover: hover) and (pointer: fine) {
  .peer:hover {
	background-color: light-dark(var(--color-light-white), var(--color-mid-grey));
  }
}
.peerVU::before {
    content: "";
    position: absolute;
    inset: 0px;

    background: linear-gradient(
		to top,
        var(--color-blue) calc(var(--vu) * 1%),
        transparent 0
    );

    -webkit-mask: radial-gradient(circle, transparent 63%, black 64%);
            mask: radial-gradient(circle, transparent 63%, black 64%);

    pointer-events: none;
}
.peerVU.muted {
    outline: 3px solid red;
	outline-offset: -3px;
}

.peerVU.muted::before {
    display: none;
}
.peerVU.micOffline {
    outline: 3px solid black;
	outline-offset: -3px;
}

.peerVU.micOffline::before {
    display: none;
}
/* 
.peerVU.disabled::before {
    display: none;
} */
 .peer.dimmed {
  opacity: 0.25;
  pointer-events: none;
}

.peer {
  transition: opacity 0.2s ease;
}