@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');


body{
	font-family: 'Sawasdee', sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-color: #99ccff;
}
h1{
	text-align: center;
	text-transform:uppercase;
}
.tab-nav-container{
	background-color: #fff;
	border-bottom-right-radius: 30px;
	border-bottom-left-radius: 30px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	display: flex;
	justify-content: space-between;
	padding: 30px;
	width:450px;
}

.tab{
	background: #ffffff;
	border-radius:50px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content:center;
	padding: 0 20px;
	margin: 0 10px;
	transition: background 0.4 linear;
}

.tab i{
	font-size: 1.2em;
}

.tab p{
	font-weight:bold;
	overflow: hidden;
	max-width:0;
}

.tab.active p{
	margin-left:10px;
	max-width: 200px;
	transition: max-width 0.4s linear;
}
.tab.active.purple{
	background-color: rgba(91, 55, 183, 0.2);
	color: rgba(91,55,183,1);
}
.tab.active.pink{
	background-color: rgba(201, 55, 157, 0.2);
	color: rgba(201, 55, 157, 1);
}
.tab.active.yellow{
	background-color: rgba(230, 169, 25, 0.2);
	color: rgba(230, 169, 25, 1);
}
.tab.active.teal{
	background-color: rgba(28, 150, 162, 0.2);
	color: rgba(28, 150, 162, 1);
}

@media (max-width: 450px){
	.tab-nav-container{
		padding: 20px;
		width: 350px;
	}
	
	.tab {
		padding: 0 10px;
		margin: 0;
	}
	
	.tab i{
		font-size: 1em;
	}
}

const tabs = document.querySelectorAll('.tab');

tabs.forEach(clickedTab =>{
	clickedTab.addEventListener('click', () =>{
		tabs.forEach(tab => {
			tab.classList.remove('active');
		});
		clickedTab.classList.add('active');
	});
});