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

/* The info screen's one row of actions (pages/on-demand.html): the watch slot in words, every other
   action a square icon, one line that never wraps. The row's height is fixed the moment the page
   draws: the buttons' own height plus the caption's room under them, so naming an icon or the late
   arrival of Remind Me and Watch Live moves nothing. The ring's room is padding taken back as margin,
   so no ring is cut; the air between buttons is a margin, the television floor having no flex gap. */
.details-play-row {
  --details-name-h: 20px;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  box-sizing: content-box;
  height: var(--info-button-h);
  padding: var(--focus-ring-width) var(--focus-ring-width) calc(var(--focus-ring-width) + var(--details-name-h));
  margin: calc(10px - var(--focus-ring-width)) calc(-1 * var(--focus-ring-width)) calc(-1 * var(--focus-ring-width));
}
.details-play-row > button {
  flex: none;
  height: var(--info-button-h);
  margin: 0 8px 0 0;
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--type-label);
}
/* A 960 television's words column is about 684 px: the watch slot's words take 12 px sides there, so
   the slot and every icon stay on the one line. */
@media screen and (min-width: 900px) and (max-width: 1279px) {
  .details-play-row > button:not(.icon-btn) {
    padding-left: 12px;
    padding-right: 12px;
  }
}
/* The watch button keeps the width of its widest face (js/details-icons.js holdWidth). */
#detailsPlayBtn {
  min-width: var(--details-watch-w, 0px);
}
/* An icon: a square the buttons' height, its drawing centred at the grid's own 24 px. */
.details-play-row > .icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--info-button-h);
  padding: 0;
}
.icon-btn > .ico {
  flex: none;
  width: 24px;
  height: 24px;
}
/* On: a favourite, a watched title, a queued title, a set reminder, a hidden title. The filled drawing
   in the theme's accent takes the outlined one's place, so on differs from off by more than colour. */
.icon-btn > .when-on,
.icon-btn[aria-pressed="true"] > .when-off {
  display: none;
}
.icon-btn[aria-pressed="true"] > .when-on {
  display: block;
}
/* A play control (the player bar's, Now Playing's) draws Pause while the music plays. */
.icon-btn[data-playing="true"] > .when-off {
  display: none;
}
.icon-btn[data-playing="true"] > .when-on {
  display: block;
}
.icon-btn[aria-pressed="true"] {
  color: var(--accent-text);
  border-color: var(--accent);
}
/* WATCH LIVE greyed ahead of its own time: present and readable, not yet the one to press. */
.details-play-row > button:disabled {
  opacity: 0.5;
  cursor: default;
}
/* The focused icon's name: one box under the row, placed under the icon and kept inside the row by
   js/details-icons.js. It is out of the row's flow, so a name never moves a button. Its type is the
   control bar's word under a face (css/player/transport-controls.css .iconic .label). */
.details-action-name {
  position: absolute;
  left: var(--details-name-x, 0px);
  top: calc(var(--focus-ring-width) + var(--info-button-h) + 4px);
  height: 16px;
  font-size: var(--type-micro);
  line-height: 16px;
  letter-spacing: 0.08em;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
}