.player {
  width: 80%;
  background: #ddd;
  margin: 10px auto;
  text-align: center;
  padding-bottom: 10px;
}

.progress {
  width: 1px;
  height: 3px;
  background: #006B5A;
  transition: width .1s linear;
}

// Play/Pause Button
.togglePlay {
  font:0/0 a;
  background: #006B5A;
  color:transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px auto 0;
  width: 64px;
  height: 64px;
  border: 1px solid darken(#006B5A, 10%);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 150ms ease-out;
  
  &:after {
    box-sizing: border-box;
    display: block;
    content: '';
    width: 0;
    height: 0;
    margin-left: 8px;
    border-color: transparent;
    border-style: solid;
    border-top-width: 16px;
    border-bottom-width: 16px;
    border-left-width: 19px;
    border-left-color: rgba(255,255,255,0.9);
  }
  
  &:hover {
    transform: scale(1.05);
  }
  &.active{
    &:after {
      width: 21px;
      height: 26px;
      margin-left: 0;
      border-width:0 7px;
      border-color: rgba(255,255,255,0.9);
    }
  }
}