.container {
  display: flex;
  align-items: center;

  &.queued {
    text-shadow: var(--queued-item-text-shadow);

    .title {
      color: var(--queued-item-color);
    }
  }

  &.starred {
    .star {
      color: var(--song-item-btn-active-bg-color);
      filter: var(--song-item-btn-active-filter);
    }
 
    .starCount {
      color: var(--song-item-btn-active-color);
    }
  }
}

.animateGlow {
  animation: var(--animation-text-shadow-glow);
}

.duration {
  color: var(--song-duration-color);
  font-size: 12px;
  text-align: right;
  width: 40px;
}

.primary {
  cursor: pointer;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  margin-left: 14px;
}

.title {
  color: var(--song-title-color);
  font-size: 18px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.artist {
  color: #aaa;
  font-size: 15px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Buttons */
.btn {
  cursor: pointer;
  width: var(--song-item-btn-width);
  height: var(--song-item-btn-height);
  margin-right: var(--btn-margin);
  transition: opacity .3s;
}

.star {
  color: var(--song-item-btn-bg-color);
  height: var(--song-item-btn-height);
}

.starCount {
  position: relative;
  font-size: 13px;
  top: -28px;
  text-align: center;
  text-shadow: none;
  color: var(--text-color);
}

.animateStar {
  animation: var(--animation-bounce);
}

.info {
  color: var(--song-item-btn-active-bg-color);
  filter: var(--song-item-btn-active-filter);
}
