.container
	.source
		a(target="blank" href="https://dribbble.com/shots/5925052-Google-Bottom-Bar-Navigation-Pattern")
			span inspered from 
			| Aurélien Salomon
	.phone
		.phone-footer
			.nav
				each item in ["Home", "Likes", "Search", "Profile"]
					.nav-item
						label(for=item)
						input(
							type="radio"
							name="nav"
							value=item
							id=item
							checked=(item === 'Home')
						)
						span= item

// variables
$body-bg-color: #414361
$phone-bg-color: #f3f3f3
$phone-footer-bg-color: #fff

$item-colors: (1: #5b37b7, 2: #b73892, 3: #eda600, 4: #1194aa)

// base
html, body
	height: 100%
	font-family: monospace
	margin: 0
	padding: 0

// grid
.container
	width: 100%
	height: 100%
	display: flex
	justify-content: center
	align-items: center

// source
.source
	position: fixed
	right: 2rem
	bottom: 2rem
	a
		color: #fff
		text-decoration: none
		span
			opacity: .32

// phone
.phone
	display: flex
	width: 25em
	height: 25em
	background-color: $phone-bg-color
	border-radius: 32px
	overflow: hidden

// phone footer
.phone-footer
	display: flex
	justify-content: center
	align-items: center
	width: 100%
	height: 6em
	padding-left: 2em
	padding-right: 2em
	background-color: $phone-footer-bg-color
	margin-top: auto

// nav
.nav
	display: flex
	width: 100%
	justify-content: space-between
	&-item
		position: relative
		display: flex
		padding: 8px
		border-radius: 16px
		@each $index, $color in $item-colors
			&:nth-child(#{$index})
				background-color: lighten($color, 46%)
				label
					background-color: $color
				span
					color: $color
					&:before
						background-color: $color
		*
			cursor: pointer
		label
			position: relative
			display: inline-block
			width: 1em
			height: 1em
			background-color: inherit
			border-radius: 50%
			&:before
				content: ""
				position: absolute
				top: -100%
				left: -100%
				width: 300%
				height: 300%
				background-color: transparent
		span
			font-size: .875em
			margin-left: 0
			max-width: 0
			overflow: hidden
			transition-property: max-width, margin-left
			transition-duration: .32s
			transition-timing-function: ease
			&:before
				content: ""
				opacity: 0
				position: fixed
				z-index: -1
				top: 50%
				margin-top: -100rem
				left: 50%
				margin-left: -100rem
				width: 200rem
				height: 200rem
				transform-origin: center
				transform: scale(.1)
				border-radius: 50%
				transition-property: opacity, transform
				transition-duration: .32s
				transition-timing-function: ease
		input
			position: absolute
			top: 0
			left: 0
			visibility: hidden
			&:checked + span
				max-width: 100vw
				margin-left: 4px
				&:before
					opacity: 1
					transform: scale(1)