$button-size: 100px;

.play-pause {
  box-sizing: border-box;
  width: $button-size;
  height: $button-size;
  position: relative;
  
  &__pause {
    &:before, &:after {
      display: block;
      width: 33%;
      content: "";
      background-color: black;
      height: 100%;
      position: absolute;
    }
    
    &:before {
      left: 0;
      top: 0;
    }
    
    &:after {
      right: 0;
      top: 0;
    }
  }
  
  &__play {
    &:before {
      display: block;
      content: "";
      height: 100%;
      position: absolute;
      width: 0; 
      height: 0; 
      border-top: 50px solid transparent;
      border-bottom: 50px solid transparent;
      border-left: $button-size solid black;
    }
  }
}

.down-arrow {
  position: relative;
  width: 100px;
  height: 100px;
  background: #ccc;
  
  &:before {
    content: "\02D1";
    display: block;
    font-size: 5em;
    text-align: center;
    line-height: 1.5em;
  }
}