/* Copyright Ayers Electronics Inc. All rights reserved. */
/* the transport rows focus ring, hover labels and live/go-live paint. */
/* One focus mark, in our accent, and shaped like the control it marks: the ring is a box-shadow
   that follows the element's own border-radius, so the pill gets a pill and the faces get circles.
   base.css also draws an outline on :focus; in this row that would be a second mark in a second
   colour, so the row keeps the ring alone. */
#transport {
  --media-focus-ring-color: var(--focus-ring);
  /* Hover paints the pill and nothing else: the library's 5% grow on hover would move a face. */
  --media-button-hover-transform: none;
}
#transport .vds-controls {
  box-shadow: none !important;
}
/* The library draws this ring inside :where(), which the television WebViews' floor does not know,
   so the row draws it on plain :focus. LIVE rings its word's pill instead (#tpLive below). */
#transport .vds-button:focus {
  outline: none;
  box-shadow: var(--media-focus-ring);
}
#transport .vds-live-button:focus {
  outline: none;
  box-shadow: none;
}
#transport .vds-live-button {
  border-radius: var(--media-live-button-border-radius, 2px);
}

/* The word under a face: it rides the accessible name always and shows on hover or focus. It hangs
   below the control rather than sitting inside it, so a face is centred in its own box exactly as
   the library draws it and the row's controls all sit on one line. */
.iconic {
  position: relative;
}
.iconic .label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  font-size: var(--type-micro);
  line-height: var(--type-micro);
  height: var(--type-micro);
  letter-spacing: 0.08em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 160ms ease-out;
}
.iconic:hover .label {
  opacity: 1;
  transition: opacity 160ms ease-in 600ms;
} /* the study's 600 ms rest, for the pointer only */
.iconic:focus .label {
  opacity: 1;
  transition: opacity 160ms ease-in;
} /* the word at once under the ring */
/* The transport row stands at the screen's foot, so its word hangs above the focused face instead,
   clear of the ring by the same 8px. */
#transport .iconic .label {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .iconic .label {
    transition: none;
  }
}

/* The Magpie button's face is the watermark's bird: a picture at the size the library gives every
   glyph, turned to the watermark's greys and lifted so its light parts read as white as the glyphs
   beside it, slightly translucent. Focus changes nothing but the ring, as on every other face. */
.iconic > img.vds-icon {
  width: var(--media-button-icon-size, 70%);
  height: var(--media-button-icon-size, 70%);
  object-fit: contain;
}
#tpAssistant > img.vds-icon,
#headAskMagpie > img.vds-icon {
  opacity: 0.9;
  filter: grayscale(1) brightness(1.35);
}

/* The live word sizes to itself and never gives up its width: every other control in the row is a
   fixed square, so a shrinkable pill is the only thing a tight row can crush, and the word is wider
   than the library's token reserves. */
#tpLive {
  width: auto;
  min-width: 0;
  max-width: none;
  flex: 0 0 auto;
}
/* One width in both states: LIVE and GO LIVE are different lengths, and a pill that resized as the
   picture crossed the edge moved every control beside it. Sized for the longer of the two words, so
   neither state is cramped and nothing shifts. The height is the pill's own and the word is centred
   in it, so no vertical padding is left to split unevenly. */
#tpLive .vds-live-button-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 72px;
  height: 28px;
  padding: 0 8px;
  white-space: nowrap;
}
/* LIVE is the one word in the row, because it says where the picture is. Once the edge is known on a
   channel it is lit with the live colour: at the edge LIVE is a mark that takes no press or pointer
   (nowhere nearer live to go), behind it GO LIVE is the press back to live. Before the edge is known
   and on an item it is an unlit outline. */
#tpLive .vds-live-button-text {
  color: var(--muted);
  border: 1px solid currentColor;
}
#tpLive.lit .vds-live-button-text {
  background: var(--live);
  color: var(--on-live);
  border-color: var(--live);
}
#tpLive[aria-disabled="true"] {
  pointer-events: none;
  cursor: default;
}
/* Focus reads the accent from across a room on the unlit LIVE and the lit GO LIVE.
   The ring rides .vds-live-button-text (the real 2px rectangle); #tpLive's own radius is 9999%, which
   is a circular ring, so it never carries the mark. A dark gap then the ring separates it from GO
   LIVE's red fill. Plain :focus, as every remote-driven stop is (css/base.css). */
#tpLive:focus .vds-live-button-text {
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 5px var(--focus-ring);
}
/* LIVE and GO LIVE are capitals with nothing under the baseline, so the font's line frame, which keeps
   room for descenders, would centre them high. The word's box is trimmed to its capitals and baseline,
   and the pill's centring then puts the letters themselves on its middle. */
#tpLive .golive-word {
  display: block;
  text-box: trim-both cap alphabetic;
}

/* A finger needs a bigger mark than a pointer does: the library draws a 38px control and the
   estate's floor is 44 (tokens.css --control-min-height, mirrored in parity.spacing). Growing the
   drawn control to 44 costs the phone row more width than it has - seven controls and the live word
   do not fit 372 px - so the FACE keeps its size and the TARGET grows around it. */
/* The row's targets stand above the bar's own box, which is taller than the track it draws: without
   this a finger just above a control at the row's right end lands on the slider instead. */
#transport .vds-controls-group.row {
  position: relative;
  z-index: 1;
}
#transport .vds-controls-group.row .vds-button,
#transport .vds-controls-group.row .vds-live-button {
  position: relative;
}
#transport .vds-controls-group.row .vds-button::after,
#transport .vds-controls-group.row .vds-live-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Only taller, never wider: at the phone's pitch a 44 px wide target would reach past its
     neighbour's centre and take the tap meant for it. */
  width: 100%;
  height: var(--control-min-height, 44px);
}
/* An off-air channel has no timeline (js/chrome-scrub.js setLiveState): the scrub, LIVE, the
   transport, Start Over and Audio and CC leave the row with their dividers; the channel steps and
   the pages stay. */
#transport[data-off-air] .vds-controls-group.scrub,
#transport[data-off-air] #tpLive,
#transport[data-off-air] #tpLive + .mag-divider,
#transport[data-off-air] #tpRew,
#transport[data-off-air] #tpPlay,
#transport[data-off-air] #tpFwd,
#transport[data-off-air] #tpStartOver,
#transport[data-off-air] #tpStartOver + .mag-divider,
#transport[data-off-air] #tpAudioCc {
  display: none;
}