.player
  .artwork
  .ui-upper
    .indicator
    .time
      .completed 1:37
      .total 3:45
  .ui-lower
    .play
      .icon
    .info
      .song small axe
      .artist Bob Marley
    .controls
      .repeat
      .previous
      .next

$artwork = 'http://images.fineartamerica.com/images-medium-large/2-bob-marley-1979-chris-walter.jpg'

*
  box-sizing border-box
  
body
  background radial-gradient(violet,indigo)
  color #ccc
  font-family roboto
  display flex
  align-items center
  justify-content center
  height 100vh
  width 100vw
  
.player
  background-color red
  border-radius 1rem
  box-shadow 1rem 1rem 2rem rgba(indigo, .5)
  display flex
  flex-direction column
  height 215px
  width 280px
  overflow hidden
  
.artwork
  background url($artwork), linear-gradient(45deg, red, gold, green)
  background-size cover
  background-blend-mode screen
  height 60%
  
  
.ui-upper
  background-color white
  height 10%
  
.indicator
  background linear-gradient(90deg, magenta, violet)
  height 2px
  width 50%
  
.time
  //background-color yellow
  color #666
  font-weight 100
  display flex
  justify-content space-between
  font-size .8rem
  padding .5rem 1rem
  
.completed
  //color magenta
  
.total
  //color magenta
  
.ui-lower
  background-color white
  height 30%
  display flex
  //align-items center
  align-items center
  justify-content space-around
  
.play
  background-color #333
  border-radius 50%
  height 2.5rem
  width 2.5rem
  display flex
  align-items center
  justify-content center
  
  &:hover
    background-color violet
    
    .icon
      background-color violet
      width 0
      height 0
      border-top 5px solid transparent
      border-left 10px solid white
      border-bottom 5px solid transparent
      border-right 0
      
  .icon
    background-color #333
    border-left 3px solid white
    border-right 3px solid white
    height .8rem
    width .75rem
    
.info
  color #333
  font-family 'roboto condensed'
  
  .song
    font-size 1.25rem
    font-weight 600
    text-transform capitalize
    
  .artist
    color #bbb
    
.controls
  display flex
  align-items center
  justify-content space-around
  width 28%
  
  
.repeat
  border 1px solid #333
  height .75rem
  width 1.4rem
  position relative
  
  &:hover
    border-color violet
    
    &::before
      border-left: 6px solid violet
    &::after
      border-right: 6px solid violet

  &::before
    content: ''
    position absolute
    top -5px
    right 3px

    width 0
    height 0
    border-top 4px solid transparent
    border-left 6px solid #333
    border-bottom 4px solid transparent

  &::after
    content: ''
    position absolute
    bottom -5px
    left 3px

    width 0
    height 0
    border-top 4px solid transparent
    border-right 6px solid #333
    border-bottom 4px solid transparent


.previous
  display flex
  align-items center
  justify-content center
  //background-color #333
  //border-radius 50%
  height 1.25rem
  width 1.25rem
  position relative
  
  &:hover
    border-color violet
    
    &::before, &::after
      border-right: 8px solid violet


  &::before
    content: ''
    width 0
    height 0
    border-top 5px solid transparent
    border-right 8px solid #333
    border-bottom 5px solid transparent

  &::after
    content: ''
    width 0
    height 0
    border-top 5px solid transparent
    border-right 8px solid #333
    border-bottom 5px solid transparent

.next
  display flex
  align-items center
  justify-content center
  //background-color #333
  //border-radius 50%
  height 1.25rem
  width 1.25rem
  position relative
  
  &:hover
    border-color violet
    
    &::before, &::after
      border-left 8px solid violet

  &::before
    content: ''
    width 0
    height 0
    border-top 5px solid transparent
    border-left 8px solid #333
    border-bottom 5px solid transparent

  &::after
    content: ''
    width 0
    height 0
    border-top 5px solid transparent
    border-left 8px solid #333
    border-bottom 5px solid transparent