AudioPost {
  display: flex;
  margin-top: 10px;
  background: transparent;
  border: 3px solid transparent;
  transition: border-color 0.2s, background-color 0.2s;
  margin-bottom: 30px;

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

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

  -playing, -waiting {
    border-color: #488448;
    background-color: #344c34;
    box-shadow: 0 0 4px #000;

    div.main {
      div.display {

        div.progress {
          background-color: #d9f75f
        }

        svg {
          rect {
            fill: #EEE
          }
        }
      }
    }
  }

  div.artwork {
    height: 160px
    width: 160px
    background: linear-gradient(100deg, #7B7B7B, transparent)
    background-size: cover
    background-position: 50% 50%
  }

  div.main {
    display: flex
    flex-direction: column
    flex: 1
    padding: 10px
    min-width: 0;

    div.title {
      display: flex
      a.play {
        display: block
        height: 30px
        width: 30px
        background-image: svg(playIcon)
        background-repeat: no-repeat
        background-position: center
        margin-left: 3px
      }
      header {
        min-width: 0;
        margin-left: 10px
        flex: 1
        a.feedTitle {
          display: block
          -webkit-user-select: text
          color: #BBB
          font-size: 90%
        }
        a.title {
          display: block
          -webkit-user-select: text
          color: #EEE
          font-size: 130%
        }
      }
      div.timestamp {
        color: #999
        font-size: 90%
      }
    }

    div.display {
      flex: 1
      position: relative
      margin: 15px 0

      svg {
        position: absolute
        top: 0; bottom: 0; left: 0; right: 0
        height: 100%;
        width: 100%;

        rect {
          fill: #f4c0fb
          transform: translate(0, -50%)
        }
      }

      div.progress {
        position: absolute
        pointer-events: none
        top: 0; bottom: 0; left: 0
        background-color: #FFF
        opacity: 0.4
      }

      span {
        position: absolute
        color: #CBD8CB
        padding: 4px
        background: rgb(47, 47, 47)
        font-family: monospace
      }

      span.position {
        bottom: 0
        left: 0
      }

      span.duration {
        bottom: 0
        right: 0
      }
    }

    div.options {
      display: flex
      height: 24px
      a {
        padding: 4px 6px
        margin-right: 5px
        border: 1px solid #656363
        border-radius: 4px
        background: #444444
        color: #C5C5C5
        white-space: nowrap

        :hover {
          text-decoration: none
          color: white
          border-color: #888
        }

        -active {
          background-color: #004605;
          border-color: #61e66c !important;
          box-shadow: inset 0px -2px 10px #4ab157;
          color: white;
          border-width: 2px;
          margin-right: 4px;
        }
      }

      div.status {
        text-align: right
        flex: 1
        font-color: #AAA
        overflow: hidden

        span {
          display: inline-block
          padding: 4px 5px
          white-space: nowrap
          -peers {
            background: #555
            border-radius: 4px
          }
        }
      }
    }
  }
}