/* Copyright Ayers Electronics Inc. All rights reserved. */

/* A playlist's cover card (js/playlist-card.js): the first four posters of what the list keeps, laid
   in a .poster that fills the card's picture box (.card-art), which the square card sheet shapes. A
   list with nothing in it wears the title face the .art-missing slot already paints. */

.card.pl-cover .pl-quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--panel);
}

.card.pl-cover .pl-quad img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* One poster stretches the row it is on, so a list holding a single title still reads as a cover
   rather than a quarter-filled square. */
.card.pl-cover .pl-quad img:only-child {
  grid-column: span 2;
  grid-row: span 2;
}

/* The name field, on the playlist screen and in the panel: the approved keypad opens under it on a
   television, so the field itself is only a line to read what has been typed. */
.playlist-rename {
  width: 100%;
  min-height: var(--control-min-height);
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-size: var(--type-body);
}