[data-component='Filmstrip'] {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;

	> .active-peer-container {
		width: 100%;
		height: 80vh;
		display: flex;
		justify-content: center;
		align-items: center;

		> .active-peer {
			width: 100%;
			padding: 1vmin;

			> [data-component='Peer'] {
				border: 5px solid rgba(255, 255, 255, 0.15);
				box-shadow: 0px 5px 12px 2px rgba(17, 17, 17, 0.5);
			}
		}
	}

	> .filmstrip {
		display: flex;
		background: rgba(0, 0, 0 , 0.5);
		width: 100%;
		overflow-x: auto;
		height: 20vh;
		align-items: center;

		> .filmstrip-content {
			margin: 0 auto;
			display: flex;
			height: 100%;
			align-items: center;

			> .film {
				height: 18vh;
				flex-shrink: 0;
				padding-left: 1vh;

				&:last-child {
					padding-right: 1vh;
				}

				> .film-content {
					height: 100%;
					width: 100%;
					border: 1px solid rgba(255,255,255,0.15);

					> [data-component='Peer'] {
						max-width: 18vh * (4 / 3);
						cursor: pointer;

						&.screen {
							max-width: 18vh * (2 * 4 / 3);
							border: 0;
						}
					}
				}

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

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