<div class="button button--play">
	<div class="button__shape button__shape--one"></div>
	<div class="button__shape button__shape--two"></div>
</div>

//usual reset stuff
*,
*:before,
*:after,
ul,
li,
a,
button,
input,
h1,
h2,
h3,
h4,
h5,
h6,
p,
img,
image,
svg,
path,
g,
canvas {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background-color: transparent;
	border: none;
	text-decoration: none;
	font-family: 'Roboto';
	user-select: none;
	list-style: none;
	position: relative;
}

@mixin size($width:inherit, $height:inherit) {
	width: $width;
	height: $height;
}

@mixin flex($vertical, $horizontal, $direction:row) {
	display: flex;
	align-items: $vertical;
	justify-content: $horizontal;
	flex-direction: $direction;
}

@mixin border-radius($topLeft:50%, $topRight:50%, $botLeft:50%, $botRight:50%) {
  border-top-left-radius: $topLeft;
  border-top-right-radius: $topRight;
  border-bottom-left-radius: $botLeft;
  border-bottom-right-radius: $botRight;
}

$deepBlue-5: #f1f3f4;
$deepBlue-10: #e4e6ea;
$deepBlue-20: #CCCED5;
$deepBlue-40: #999EAC;
$deepBlue-60: #666D82;
$deepBlue-80: #333D59;
$deepBlue-90: #192445;
$deepBlue-100: #000C2F;
$deepBlue-120: #000923;

$blue: #2E90EB;
$salmon: #f56b72;

$swipes-shadow-one: 0 1px 3px rgba(0, 0, 0, 0.06),
0 1px 2px rgba(0, 0, 0, 0.12);
$swipes-shadow-two: 0 3px 6px rgba(0, 0, 0, 0.16),
0 3px 6px rgba(0, 0, 0, 0.23);
$swipes-shadow-three: 0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
$swipes-shadow-four: 0 14px 28px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.22);
$swipes-shadow-five: 0 19px 38px rgba(0, 0, 0, 0.30),
0 15px 12px rgba(0, 0, 0, 0.22);

html,
body {
	@include size(100%);
	min-height: 100vh;
	@include flex(center, center);
	margin: 0;
	padding: 0;
	background-color: #FAFAFA;
	font-family: 'Roboto';
}

.button {
	@include size(150px, 150px);
	@include flex(center, center);
	// transform: scale(.5);
	border: 3px solid #1e90ff;
	
	&--play {
		border-radius: 50%;
	}
	
	&--play & {
		&__shape {
			width: 25px;
			height: 75px;
			background: #1e90ff;
			transition: .3s ease-in-out;

			&--one {
				-webkit-clip-path: polygon(0 0, 100% 25%, 100% 75%, 0% 100%);
				transform: translateX(5px)
			}

			&--two {
				-webkit-clip-path: polygon(0 25%, 100% 50%, 100% 50%, 0 75%);
				transform: translateX(4.9px)
			}
		}
		
	}
	
	&--play#{&}--active & {
		&__shape {
			
			&--one {
				-webkit-clip-path: polygon(0 15%, 50% 15%, 50% 85%, 0% 85%);
				transform: translateX(0px)
			}
			
			&--two {
				-webkit-clip-path: polygon(50% 15%, 100% 15%, 100% 85%, 50% 85%);
				transform: translateX(0px)
			}
		}
	}
}

const playButton = document.querySelector('.button--play');

playButton.addEventListener('click', () => {
	console.log('yo')
	playButton.classList.toggle('button--active')
})