@import "../../_base.scss"

.conversation {
	$padding-top: 2%;
			
	height: calc(93% - $padding-top);

	padding-left: 2%;
	padding-top: $padding-top;

	display: grid;
	grid-template-columns: 75% 25%;
	grid-template-rows: 70% 1% 29%;
	cursor: pointer;

	.holder {
		display: flex;
		justify-content: center;
		align-items: center;

		grid-column: 1;
		grid-row: 2;
				
		color: darkgrey;
	}
			
	.room-events {
		display: flex;
		flex-flow: column;
		justify-content: flex-start;

		border: $border-style;
		background-color: #FFFFFF;

		ul {
			margin: 0;
			padding-left: 0;
		}

		li {
			list-style-type: none;
		}
		
		.room-event {
			display: flex;
			flex-flow: column;
			justify-content: space-between;

			padding-top: 1%;

			font-size: $font-size;

			.title {
				margin: 0;
			}

			.content {
				margin: 0;
				padding-left: 2%;
			}
		}
	}

	%selector-container {
		aspect-ratio: 1;
		
		grid-column: 2;
		
		display: grid;
		grid-template-columns: 10% 15% 50% 15% 10%;
		grid-template-rows: 80% 20%;

		.avatar-selector {
			grid-column-start: 1;
			grid-column-end: 6;
			aspect-ratio: 1;
		}

		.webcam {
			grid-column: 2;
			grid-row: 2;
			
			aspect-ratio: 1;
		}

		.arrow-icon {
			grid-column: 4;
			grid-row: 2;
			
			svg {
				path:last-child {
					fill: black;
				}
			}
		}
	}

	.other-avatar-selector-container {
		@extend %selector-container;

		grid-row: 1;
	}
			
	.my-avatar-selector-container {
		@extend %selector-container;
				
		grid-row: 3;
	}
			
	.edit-section {
		grid-row: 3;
	}
}