<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')
})