.content
	.mocked.mocked--heading
	.mocked.mocked--subtitle
	div
		- for (var i = 0; i < 4; i++)
			.mocked.mocked--line
	div
		- for (var i = 0; i < 4; i++)
			.mocked.mocked--line
	
	.corner-share
		|<svg class="icon" style="width:18px;height:18px" viewBox="0 0 24 24">
		|	<path fill="#FFF" d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z" />
		|</svg>
		a.corner-share__left
			|<svg class="icon" style="width:24px;height:24px" viewBox="0 0 24 24">
			|	<path fill="#FFF" d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" />
			|</svg>
		a.corner-share__right
			|<svg class="icon" style="width:24px;height:24px" viewBox="0 0 24 24">
			|	<path fill="#FFF" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
			|</svg>

body {
	background: #eee;
	font-size: 16px;
}

.content {
	box-sizing: border-box;
	position: relative;
	width: 90%;
	max-width: 800px;
	margin: 20px auto;
	padding: 30px;
	
	background: white;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mocked {
	display: block;
	background: #f4f4f4;
	
	width: 100%;
	height: 1em;
	
	&--heading {
		font-size: 3em;
	}
	
	&--subtitle {
		font-size: 1.5em;
		width: 50%;
		margin-top: 0.5em;
	}
	
	&--line {
		height: 1em;
		margin-top: 0.5em;
		
		&:first-child {
			margin-top: 1em;
		}
		
		&:last-child {
			width: 50%;
		}
	}
	
	&--image {
		width: 200px;
		height: 200px;
	}
}

.corner-share {
	$size: 60px;
	$hover-size: $size * 2;
	$speed: 0.4s;
	
	width: $size;
	height: $size;
	position: absolute;
	right: 0;
	bottom: 0;
	
	background: #75d0ff;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	overflow: hidden;
	
	transition: width, height, box-shadow;
	transition-duration: $speed;
	
	&:before {
		content: '';
		display: block;
		width: 100% * sqrt(2);
		height: 100% * sqrt(2);
		position: absolute;
		top: -70%;
		left: -70%;
		
		z-index: 1;
		background: white;
		//background-image: linear-gradient(to left, #ddd 0, #eee 5px, white 20px);
		box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
		transform: rotate(45deg);
		
		transition: box-shadow $speed;
	}
	
	&:hover {
		width: $hover-size;
		height: $hover-size;
		
		box-shadow: 0 0 18px rgba(0, 0, 0, 0.1);

		&:before {
			box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
		}
		
		.corner-share__left,
		.corner-share__right {
			opacity: 1;
		}
		
		& > .icon {
			opacity: 0;
		}
	}
	
	& > .icon {
		position: absolute;
		right: $size * 0.3;
		bottom: $size * 0.3;
		margin-right: -9px;
		margin-bottom: -9px;
		
		transition: opacity $speed;
	}
	
	&__left,
	&__right {
		display: block;
		width: 0.7 * $hover-size;
		height: 0.7 * $hover-size;
		position: absolute;
		bottom: 0;
		
		opacity: 0;
		transform: rotate(-45deg);
		
		transition: opacity $speed;
		
		.icon {
			position: absolute;
			bottom: 70%;
			margin-bottom: -14px;
			transform: rotate(45deg);
		}
	}
	
	&__left {
		background: #0080d1;
		right: 0;
		transform-origin: bottom right;
		
		.icon {
			left: 70%;
			margin-left: -14px;
		}
	}
	
	&__right {
		background: #38b2ff;
		left: 100%;
		transform-origin: bottom left;
		
		.icon {
			right: 70%;
			margin-right: -14px;
		}
	}
}