MiniAudioPost {
  overflow: hidden
  display: flex
  border: 1px solid transparent
  transition: border 0.2s, background-color 0.2s
  padding: 5px 10px
  border-radius: 5px
  height: 60px

  :hover {
    div.image {
      a.play {
        opacity: 0.5
      }
    }
  }

  -waiting, -playing {
    div.image {
      a.play {
        opacity: 0.5
      }
    }
  }

  -playing {
    div.image {
      a.play {
        background-image: svg(pauseIcon)
      }
    }
  }

  -waiting {
    div.image {
      a.play {
        background-image: svg(waitingIcon)
        animation: playIconSpin 2s infinite linear
      }
    }
  }

  div.image {
    overflow: hidden;
    height: 50px;
    width: 50px;
    background: linear-gradient(100deg, #c7af84, #669ba7);
    background-size: cover;
    background-position: 50% 50%;
    display: flex

    a.play {
      transition: opacity 0.2s
      opacity: 0
      display: block
      flex: 1
      border-radius: 30px

      background-color: rgba(0, 0, 0, 0.5)
      background-image: svg(playIcon)
      background-repeat: no-repeat
      background-position: center

      :hover {
        opacity: 1
      }
    }
  }
  div.main {
    padding: 3px 10px
    min-width: 100px
    flex: 1
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 90%, rgba(0,0,0,0))

    div.displayName {
      white-space: nowrap
      font-size: 90%
      color: #CCC
    }
    div.title {
      white-space: nowrap
      color: #CFF
      font-size: 110%;
    }
    div.info {
      color: #888
      span {
        color: #BBB
      }
    }
  }
  :hover {
    border-color: #444
    background-color: rgba(255, 255, 255, 0.18);
  }
}