#music-header
  text-align: center

  h1
    color: white
    font:
      size: 34px
      weight: bold

#music-list-section
  .music-list
    position: relative
    +transition(background, 200ms)

    &:hover
      cursor: pointer
      background: #f0f0f0

  .music-list-header
    margin: 10px 0

.now-playing-list,
.music-list ol
  margin-left: 15px
  margin-right: 15px
  color: $text-color

  li
    +transition(background, 200ms)

    &:hover
      background: #f0f0f0
      cursor: pointer

      a
        color: $main-color

    &.selected
      background: #e0e0e0

      a
        color: $main-color

  li,
  a
    display: block
    +size(100% 100%)
    padding: 8px 5px
    color: $text-color
    text-decoration: none
    +transition(color, 200ms)

#music-player-card
  .mejs-container
    width: 100%

  .mejs-container,
  .mejs-mediaelement,
  .mejs-controls
    background: transparent

.album-art
  width: 100%

.music-album
  +transition(background, 200ms)

  &:hover
    background: #f0f0f0
    cursor: pointer

    a
      color: $main-color

  &.selected
    background: #e0e0e0

    a
      color: $main-color