/* Copyright 2014 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

:host {
  align-items: center;
  background: #f5f5f5;
  bottom: 72px;  /* Room for the controls bar. */
  color: #3d3d3d;
  cursor: default;
  display: flex;
  flex-direction: column;
  font-family: Noto Sans UI, sans-serif;
  font-size: 10pt;
  justify-content: flex-start;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 0;
}

/* Track item. */
.track {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  height: 44px;
  justify-content: flex-start;
  padding-left: 20px;
  width: 100%;
}

:host(:not([expanded]):host) > .track:not([active]) {
  display: none;
}

/* In the expanded mode the selected track is highlighted. */
.track[active] {
  background-color: rgb(66, 129, 244);
}

/* Track data. */

.track .data {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  margin-left: 0;
  margin-right: 4px;
}

.track .data .data-title,
.track .data .data-artist {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track .data .data-title {
  color: #343434;
  font-weight: bold;
}

.track .data .data-artist {
  color: #969696;
}

.track[active] .data .data-title,
.track[active] .data .data-artist {
  color: #fff;
}