// Styling for the now-playing widget. Installed to
// /home/<KIOSK_USERNAME>/.config/eww/eww.scss by build-thin-client-iso.sh.
//
// eww compiles SCSS itself (bundled grass), so nothing on the image needs a Sass
// toolchain. eww.scss rather than eww.css because every eww release supports the
// former, while plain eww.css is only honoured by newer builds.

$bg: rgba(16, 16, 20, 0.88);
$fg: #e8e8ec;
$muted: #9a9aa6;

.np-root {
  background-color: $bg;
  border-radius: 12px;
  padding: 12px;
  color: $fg;
  font-family: sans-serif;
}

.np-art {
  border-radius: 8px;
}

.np-title {
  font-size: 15px;
  font-weight: 600;
  color: $fg;
}

.np-artist {
  font-size: 13px;
  color: $muted;
}

.np-controls {
  margin-left: 8px;
}

.np-btn {
  font-size: 20px;
  color: $fg;
  background-color: transparent;
  border: none;
  padding: 4px 8px;

  &:hover {
    background-color: rgba(255, 255, 255, 0.10);
    border-radius: 6px;
  }
}