.phone_wrapper
	header
		.speaker
			.mic
		nav
			.tab.tab1.active
				.block
			.tab.tab2
				.block
			.indicator
	main
		.tab_reel
			.tab_panel1
				.card.card_large
					figure
					.desc
						.block
						.block
				.card.card_list
					figure
					.desc
						.block
						.block
				.card.card_list
					figure
					.desc
						.block
						.block

				.card.card_list
					figure
					.desc
						.block
						.block
						
			.tab_panel2
				.card.card_list
					figure
					.desc
						.block
						.block
				.card.card_list
					figure
					.desc
						.block
						.block

				.card.card_list
					figure
					.desc
						.block
						.block
				.card.card_large
						figure
						.desc
							.block
							.block
		

@mixin size($w, $h)
	width: $w
	height: $h

@mixin flex($dis, $x, $y, $dir)
	display: $dis
	justify-content: $x
	align-items: $y
	flex-direction: $dir

$base: #282931

*
	box-sizing: border-box

body, html
	+size(100%, 100vh)
	display: flex
	align-items: center
	justify-content: center
	background: linear-gradient(to bottom, cornflowerblue, rgba(dodgerblue, 0.2))

.phone_wrapper
	+size(320px, 470px)
	+flex(flex, null, null, column)
	background: white
	box-shadow: 0px 40px 40px -20px rgba(black, 0.25)
	border-radius: 10px
	overflow: hidden
	header
		background: lighten(cornflowerblue, 20%)
		+size(100%, 75px)
		border-radius: 10px 10px 0 0
		+flex(flex, null, null, column)
		.speaker
			+size(100%, 40%)
			+flex(flex, center, center, null)
			
		.mic
			+size(15%, 7px)
			background: lighten(cornflowerblue, 10%)
			border-radius: 120px
		
		nav
			+size(100%, 60%)
			+flex(flex, null, null, null)
			position: relative
			.tab
				+size(50%, 100%)
				+flex(flex, center, center, null)
			.indicator
				+size(50%, 4px)
				position: absolute
				bottom: 0
				background: lighten(cornflowerblue, 7%)
				transition: 0.3s ease

		.block
			+size(85%, 40%)
			border-radius: 4px
			background: lighten(cornflowerblue, 10%)
			cursor: pointer
	
	
	
	main
		flex: 1
		+size(200%, 100%)
		.tab_reel
			+size(100%, null)
			+flex(flex, space-between, null, null)
			transition: 0.5s cubic-bezier(.18,1.14,.5,1.18)
			.tab_panel1, .tab_panel2
				+size(50%, null)
				padding: 10px
		.card
			+size(100%, auto)
			padding: 10px
			margin-bottom: 0.7rem
			border-radius: 6px
			background: white
			box-shadow: 0px 5px 15px rgba(cornflowerblue, 0.3)
	
		.card_large
			figure
				+size(100%, 100px)
				margin: 0
				background: lighten(cornflowerblue, 20%)
			.desc
				padding-left: 0px
		
		.card_list
			+flex(flex, null, center, row)
			figure
				+size(40px, 40px)
				border-radius: 120px
				background: lighten(cornflowerblue, 20%)
				margin: 0
			.desc
				flex: 1
			
		.desc
			+size(100%, null)
			padding: 10px
			.block
				+size(40%, 7px)
				margin-bottom: 5px
				background: lighten(cornflowerblue, 10%)
				&:nth-child(2)
					width: 35%
					margin-bottom: 0px
		

.tab1
	&.active
		~ .indicator
				left: 0

.tab2
	&.active
		~ .indicator
				left: 50%
		

const reel = document.querySelector('.tab_reel');
const tab1 = document.querySelector('.tab1');
const tab2 = document.querySelector('.tab2');
const panel1 = document.querySelector('.tab_panel1');
const panel2 = document.querySelector('.tab_panel2');

function slideLeft(e) {
	tab2.classList.remove('active');
	this.classList.add('active');
	reel.style.transform = "translateX(0%)"
}

function slideRight(e) {
	tab1.classList.remove('active');
	this.classList.add('active');
	reel.style.transform = "translateX(-50%)"
}

tab1.addEventListener('click', slideLeft);
tab2.addEventListener('click', slideRight);