.player
  .player__list
    .player__icon.player__icon-list.icon-list
  .player__volume
    .player__icon.player__icon-volume.icon-volume
  .player__meta
    .player__song Queenie Eye
    .player__artist Paul McCartney — New
  .player__bg(style="background-image: url(https://images.unsplash.com/photo-1534531173927-aeb928d54385?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);")
  .player__controls
    .player__controls-bg(style="background-image: url(https://images.unsplash.com/photo-1534531173927-aeb928d54385?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);")
    .player__repeat
      .player__icon.player__icon-repeat.icon-repeat
    .player__prev
      .player__icon.player__icon-prev.icon-prev
    .player__play
      .player__icon.player__icon-play.icon-play
    .player__next
      .player__icon.player__icon-next.icon-next
    .player__shuffle
      .player__icon.player__icon-shuffle.icon-shuffle

html,
body
  min-height: 100%
  
body
  background: radial-gradient(ellipse at center, #ffc200 0%, #e0ad00 100%)

.player
  box-shadow: 0 2px 4px -4px rgba(0, 0, 0, .4), 0 50px 45px -20px rgba(0, 0, 0, .2)
  border-radius: 30px
  height: 400px
  margin: 50px auto
  overflow: hidden
  position: relative
  width: 400px
  
  &__meta
    box-sizing: border-box
    font-size: 24px
    padding: 50px 20px
    position: absolute
    text-align: center
    text-shadow: 0 1px 1px rgba(255, 255, 255, .4)
    top: 0
    width: 100%
    z-index: 1
  
  &__artist
    font-weight: 300
  
  &__bg
    background-position: bottom center
    background-size: cover
    height: 100%
    position: absolute
    width: 100%
  
    &:before,
    &:after
      content: ''
      display: block
      height: 100%
      position: absolute
      width: 100%
    
    &:after
      background: linear-gradient(to top, #000, #fff)
      opacity: .2
      mix-blend-mode: soft-light
  
  &__controls
    background-color: rgba(255, 255, 255, .2)
    bottom: 0
    box-shadow: inset 0 1px rgba(255, 255, 255, .3)
    height: 80px
    position: absolute
    width: 100%
    
    &:before,
    &:after
      content: ''
      height: 100%
      display: block
      pointer-events: none
      position: absolute
      width: 100%
  
    &:before
      box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, .6)
      mix-blend-mode: soft-light

    // &:after
    //  background-color: rgba(0, 0, 0, .1)
  
    &-bg
      background-position: bottom center
      background-size: cover
      height: 100%
      filter: blur(30px)
      overflow: hidden
      position: absolute
      width: 100%
      
      &:before
        background: linear-gradient(to top, #000, #fff)
        content: ''
        display: block
        height: 100%
        opacity: .08
        mix-blend-mode: soft-light
        position: absolute
        width: 100%
  
  &__play,
  &__prev,
  &__next
    background: rgba(255, 255, 255, .01)
    border-radius: 60px
    bottom: 0
    box-shadow: 0 -2px 4px 0 rgba(255, 255, 255, .1)
    cursor: pointer
    left: 0
    margin: auto
    position: absolute
    right: 0
    top: 0
    transition: background .15s linear
  
    .player__icon
      transition: transform .05s linear
  
    &:before,
    &:after
      border-radius: 60px
      content: ''
      display: block
      height: 100%
      position: absolute
      width: 100%
  
    &:before
      background: linear-gradient(to top, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04))
      box-shadow: 0 -1px 1px 0 rgba(255, 255, 255, .6)
      mix-blend-mode: overlay
    
    &:after
      box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .6)
      mix-blend-mode: soft-light
    
    &:hover
      background: radial-gradient(ellipse at center, rgba(12, 11, 23, .4) 0%, rgba(86, 76, 132, .1) 60%, rgba(255, 255, 255, .2) 100%)

      .player__icon
        transform: scale(.9)

  &__play
    height: 60px
    width: 60px
  
  &__prev,
  &__next
    height: 40px
    width: 40px

  &__prev
    right: 120px
  
  &__next
    left: 120px
  
  &__icon
    bottom: 0
    color: rgba(0, 0, 0, .8)
    cursor: pointer
    height: 1em
    left: 0
    margin: auto
    position: absolute
    right: 0
    top: 0
    width: 1.4em
    
    &:before
      text-shadow: 0 1px 1px rgba(255, 255, 255, .2)
    
    &-play
      font-size: 30px
      width: 1.2em
    
    &-prev,
    &-next
      width: 1.4em
  
  &__repeat
    left: .5em
    width: 1.4em

  &__shuffle
    right: .5em
    width: 2em
  
  &__repeat,
  &__shuffle
    bottom: 0
    color: #1A0C1D
    height: 1.2em
    font-size: 30px
    margin: auto
    position: absolute
    top: 0
  
  &__list
    height: 1.2em
    font-size: 20px
    left: 20px
    position: absolute
    top: 30px
    width: 1.4em
    z-index: 1

  &__volume
    height: 1.2em
    font-size: 26px
    right: 20px
    position: absolute
    top: 30px
    width: 1.4em
    z-index: 1