/* Copyright Ayers Electronics Inc. All rights reserved. */
/* the cover art an audio item shows where its picture would be. */

/* Over the player's own black surface and under every control on it: the gestures, the buffering
   ring, the captions and the banner all sit above z-index 0, and the layer takes no pointer so a
   tap on the picture still reaches the gesture under it. Up only for an item that has art
   (js/cover-art.js sets data-art) and only while an item is what is playing. */
#coverArt {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  place-items: center;
  background: #000;
  pointer-events: none;
}
body.playing-item #coverArt[data-art] {
  display: grid;
}
/* The art whole, never cropped and never stretched past its own size: the shorter side of the stage
   is the ceiling, so a wide stage pillarboxes it the way the picture letterboxes. */
#coverArtImage {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* No art of its own: the image gives up its place and the title face (css/components/tiles.css
   .art-missing.stock) takes it instead, sized the way the art itself would be. */
#coverArtImage[data-missing="1"] {
  display: none;
}
#coverArtImage[data-missing="1"] ~ #coverArtMissing {
  display: block;
  width: min(60vh, 60vw);
  height: min(60vh, 60vw);
}