// Variables ---------------------------------------------
@import "ui-variables";

// Rdio --------------------------------------------------
.rdio {
  display: inline-block;

  a { color: @text-color-subtle }
}

.rdio-container {
  display: none;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  &[data-initiated] { display: inline-block; }
}

// Sound bars --------------------------------------------
.rdio-sound-bars {
  display: inline-block;
  position: relative;
  margin-right: .4em;
  height: 14px;
  overflow: hidden;

  &[data-state="paused"] {
    .rdio-sound-bar {
      -webkit-animation-play-state: paused;
    }
  }

  &[data-hidden] { display: none }
}

.rdio-sound-bar + .rdio-sound-bar { margin-left: 1px }
.rdio-sound-bar {
  display: inline-block;
  width: 3px; height: 3px;
  background: @text-color-subtle;
  -webkit-animation: sound 400ms linear infinite alternate;
}

.rdio-sound-bar:nth-child(1) { -webkit-animation-duration: 274ms }
.rdio-sound-bar:nth-child(2) { -webkit-animation-duration: 233ms }
.rdio-sound-bar:nth-child(3) { -webkit-animation-duration: 207ms }
.rdio-sound-bar:nth-child(4) { -webkit-animation-duration: 258ms }
.rdio-sound-bar:nth-child(5) { -webkit-animation-duration: 200ms }


@-webkit-keyframes sound {
  0%   { opacity: .35; height: 3px; }
  100% { opacity: 1;   height: 14px; }
}
