
.radio-accent { background-color: $base0D; }

// Now playing
.radio-now-playing {
  margin-bottom: $popup-scale * 8pt;
}

.radio-art {
  background-repeat: no-repeat;
  @include border-radius;
  @include background-base2;
  min-width: $popup-scale * 72px;
  min-height: $popup-scale * 72px;
}

.radio-art-icon {
  font-size: 2em;
  @include color-body;
}

.radio-song {
  font-size: 0.88em;
  font-weight: bold;
  @include color-base;
  margin-bottom: $popup-scale * 2pt;
}

.radio-artist {
  font-size: 0.74em;
  @include color-body;
}

// Controls
.radio-controls {
  margin-top: $popup-scale * 6pt;
}

.radio-ctrl-btn {
  font-size: 2em;
  padding: $popup-scale * 4pt $popup-scale * 20pt;
  @include border-radius;
  @include color-body;
  &:hover { @include background-active; @include color-base; }
}

// Station list
.station-list {}

scrollbar {
  background-color: transparent;
  border: none;
  min-width: 6px;
}
scrollbar trough {
  @include background-base2;
  @include border-radius;
  min-width: 6px;
}
scrollbar slider {
  background-color: $base04;
  @include border-radius;
  min-width: 6px;
  min-height: 20px;
  &:hover { background-color: $base05; }
}

.station-row {
  padding: $popup-scale * 4pt $popup-scale * 3pt;
  @include border-radius;
  &:hover { @include background-base2; }
}

.station-row-active {
  .station-name { @include color-accent; }
}

.station-icon {
  background-repeat: no-repeat;
  @include border-radius;
  @include background-base2;
  min-width: $popup-scale * 28px;
  min-height: $popup-scale * 28px;
  margin-right: $popup-scale * 8pt;
}

.station-name {
  font-size: 0.76em;
  @include color-body;
}
