[data-component='Peers'] {
	min-height: 100%;
	width: 100%;
	height: 100%;

	+desktop() {
		width: 100%;
		padding: 0px 0 0px 0;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	+mobile() {
		min-height: 100vh;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	> .peer-container {
		overflow: hidden;

		AppearFadeIn(1000ms);

		+desktop() {
			flex: 0 0 auto;
			margin: 6px;
			border: var(--peer-border);
			box-shadow: var(--peer-shadow);
			transition-property: border-color;
			transition-duration: 0.15s;

			&.active-speaker {
				border-color: var(--active-speaker-border-color);
			}

			&.selected {
				> .peer-content {
					border-color: var(--selected-peer-border-color);
				}
			}
		}

		+mobile() {
			flex: 100 100 auto;
			order: 2;
			min-height: 25vh;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			&.active-speaker {
				order: 1;
			}
		}
	}
}