@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];700&display=swap');


// Resets
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: 0;
}

button {
	border: 0;
	background-color: transparent;
	cursor: pointer;
}



// Variables
$gray-9: hsl(0, 0%, 13%);
$gray-8: hsl(0, 0%, 26%);
$gray-7: hsl(0, 0%, 38%);
$gray-6: hsl(0, 0%, 46%);
$gray-5: hsl(0, 0%, 62%);
$gray-4: hsl(0, 0%, 74%);
$gray-3: hsl(0, 0%, 88%);
$gray-2: hsl(0, 0%, 93%);
$gray-1: hsl(0, 0%, 96%);
$white: hsl(0, 0%, 100%);
$primary: hsl(226, 56%, 54%);
$primary-darker: hsl(226, 56%, 35%);
$secondary: hsl(46, 56%, 54%);
$secondary-darker: hsl(46, 56%, 35%);
$green: hsl(120, 100%, 26%);



// Global scope classes to use with JS
div.minimize {
	height: 40px;
}

div.list--active {
	transform: translateX(0);

	@media (max-width: 500px) {
		transform: translateX(50%);
	}
}



// Everything else
body {
	height: 100vh;
	position: relative;
	font-family: "Poppins", sans-serif;
	overflow-y: hidden;
	background: linear-gradient(305deg, hsl(178, 84%, 43%) 0%, hsl(284, 92%, 74%) 100%);
}



.mask {
	width: 300px;
	height: 400px;
	overflow: hidden;
	position: absolute;
	bottom: 0;
	right: 5rem;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	animation: appear 1s ease-in 0s;
	box-shadow: 0 10px 20px hsla(0, 0%, 0%, .15), 0 3px 6px hsla(0, 0%, 0%, .10);
	transition: height 400ms cubic-bezier(.65,.05,.36,1);

	@media (max-width: 500px) {
		right: 0;
		width: auto;
		height: 100%;
		border-radius: 0;
	}
}



.container {
	width: 600px;
	height: 400px;
	display: flex;
	flex-direction: row;
	transform: translateX(-300px);
	transition: transform 500ms cubic-bezier(.65,.05,.36,1);

	@media (max-width: 500px) {
		width: 100%;
		height: 100%;
		transform: translateX(0);
	}
}



.btn {
	width: 40px;
	height: 40px;
	transition: all 100ms ease-in-out;

	&:hover, &:focus {
		background-color: $primary;

		.btn__icon {
			color: $white;
		}
	}

	&__icon {
		width: 1.25rem;
		height: 1.25rem;
		color: $primary;
		vertical-align: middle;
	}

	&--send {
		border-radius: 3px;
		//flex-grow: 1;
	}
}



.list, .conversation {
	width: 300px;
	height: 400px;
	display: flex;
	flex-direction: column;

	@media (max-width: 500px) {
		width: 100vw;
		height: 100vh;
	}
}



.header {
	min-height: 40px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid $gray-3;
	background-color: $gray-1;

	&__actions {
		display: flex;
		flex-direction: row;
	}

	&__info {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		flex-grow: 1;
		padding-left: 0.8rem;
		color: hsl(226, 48%, 27%);
		border-left: 1px solid hsl(210, 14%, 83%);
	}

	&__status {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: hsl(97, 81%, 48%);
		margin-right: 0.4rem;
	}

	&__name {
		font-weight: 700;
		color: $primary;
	}
}



.messages {
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0.8rem;
	overflow-y: auto;
	background-color: $gray-2;

	&__bubble {
		display: inline-flex;
		flex-direction: row;
		margin-bottom: 0.8rem;
	}

	&__bubble--left {
		position: relative;
		justify-content: start;

		&:before {
			content: '';
			position: absolute;
			z-index: 0;
			bottom: -7px;
			left: 0;
			width: 8px;
			height: 8px;
			border-bottom-right-radius: 10px;
			background-color: $primary-darker;
		}
	
		.messages__text {
			position: relative;
			z-index: 1;
			max-width: 85%;
			color: $gray-1;
			background-color: $primary;
			border-bottom-left-radius: 0;
		}
	}
	
	&__bubble--right {
		position: relative;
		justify-content: end;

		&:before {
			content: '';
			position: absolute;
			z-index: 0;
			bottom: -7px;
			right: 0;
			width: 8px;
			height: 8px;
			border-bottom-left-radius: 10px;
			background-color: $secondary-darker;
		}
	
		.messages__text {
			position: relative;
			z-index: 1;
			max-width: 85%;
			color: $gray-9;
			background-color: $secondary;
			border-bottom-right-radius: 0;
		}
	}

	&__text {
		border-radius: 3px;
		padding: 0.6rem;
		overflow-wrap: break-word;
	}
}



.footer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0.8rem;
	border-top: 1px solid $gray-3;
	background-color: $gray-1;
	
	&__input {
		width: 80%;
		padding: 0.4rem 0.4rem 0.4rem 0.6rem;
		border-radius: 3px;
		border: 1px solid $gray-3;
		font-family: 'Poppins', sans-serif;
		transition: all 100ms ease-in-out;

		@media (max-width: 500px) {
			width: 100%;
			margin-right: 1rem;
		}
		
		&:focus {
			border: 1px solid $primary;
			box-shadow: inset 0 0 3px hsla(0, 0%, 13%, .6);
		}
	}	
}



.list {
	& .header {
		padding-left: 0.8rem;
	}
}



.chatlist {
	height: 100%;
	background-color: $gray-2;
	overflow-y: auto;
	padding: 0.8rem;
}



.chat {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: start;
	padding: 0.8rem;
	margin-bottom: 1rem;
	font-family: 'Poppins', sans-serif;
	background-color: $gray-1;
	box-shadow: 0 1px 1px hsla(0, 0%, 0%, .2);
	border-radius: 3px;
	border: 1px solid $gray-3;
	cursor: pointer;
	transition: all 100ms ease-in-out;
	
	&:hover, &:focus {
		border: 1px solid $primary;
		box-shadow: 0 1px 3px hsla(0, 0%, 0%, .3);
	}

	&__user {
		display: block;
		font-size: 1rem;
		font-weight: 700;
		color: $gray-9;
	}
	
	&__message {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		font-size: 1rem;
		font-weight: 400;
		color: $gray-7;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	&__sent {
		display: flex;
		flex-direction: row;

		svg {
			width: 1rem;
			height: 1rem;
			stroke: $green;
		}
	}
	
	&__sent svg:last-of-type {
		margin: 0 0.3rem 0 -0.7rem;
	}
}



@keyframes appear {
	1% {
		transform: translateY(30px);
		opacity: 0;
	}

	25% {
		transform: translateY(-15px);
	}

	65% {
		transform: translateY(10px);
		opacity: 1;
	}

	80% {
		transform: translateY(-5px);
	}
	
	100% {
		transform: translateY(0);
	}
}