/* Copyright Ayers Electronics Inc. All rights reserved. */
/* the transport rows phone/md/lg bands and the touch target floor. */
/* The phone band draws LIVE, rewind, play, forward, Full Screen and MORE; MORE's fly-up lists the
   rest (row-law.js MORE_LIST). The overlay's side margin is narrowed so MORE clears a 360 px phone. */
#transport[data-band="sm"] {
  margin-left: -16px;
  margin-right: -16px;
}
#transport[data-band="sm"] #tpChUp,
#transport[data-band="sm"] #tpChDown {
  display: none;
}

#tpMore {
  display: none;
}
#transport[data-band="md"] .mag-divider {
  margin: 0 5px;
}
#transport[data-band="md"] .vds-controls-group.row > * + .mag-divider {
  margin-left: 13px;
}
#transport[data-band="sm"] .vds-controls-group.row {
  flex-wrap: nowrap;
  padding-left: 0;
  padding-right: 0;
}
#transport[data-band="sm"] .vds-controls-group.row > * + * {
  margin-left: 2px;
}
#transport[data-band="sm"] .iconic .label {
  display: none;
}
#transport[data-band="sm"] #tpStartOver,
#transport[data-band="sm"] #tpAudioCc,
#transport[data-band="sm"] #tpInfo,
#transport[data-band="sm"] #tpGuide,
#transport[data-band="sm"] #tpOnDemand,
#transport[data-band="sm"] #tpAssistant,
#transport[data-band="sm"] .mag-divider {
  display: none;
}
#transport[data-band="sm"] #tpSettings {
  display: none;
}

#transport[data-band="sm"] #tpMore {
  display: inline-flex;
}

#moreFlyup .audio-card {
  min-width: 220px;
}

/* ---- touch: the row's controls clear the 44 floor ----
   base.css's floor is on button/input/select; the library's faces are custom elements
   (media-play-button and kin) it never matched, and the rule above cancels it for the three real
   buttons on purpose. A finger needs the floor either way; a remote or a mouse does not, and the
   television's row keeps its measured 38 px faces, keyed off <html data-tv> since a set's WebView
   can report a coarse pointer. */
@media (pointer: coarse) {
  html:not([data-tv]) #transport button.vds-button,
  html:not([data-tv]) #transport button.vds-live-button,
  html:not([data-tv]) media-seek-button,
  html:not([data-tv]) media-play-button,
  html:not([data-tv]) media-fullscreen-button,
  html:not([data-tv]) media-caption-button {
    min-width: var(--control-min-height, 44px);
    min-height: var(--control-min-height, 44px);
  }
  /* The scrub is dragged by the finger itself, so its bars take the same floor. */
  html:not([data-tv]) media-slider,
  html:not([data-tv]) media-time-slider {
    min-height: var(--control-min-height, 44px);
  }
}

/* A touch tablet keeps every face at the 44 px floor on one line. At 768 px the faces and the live
   word leave 32 px for the spacing, so the faces sit flush (the drawn icon is 70% of its box, which
   still reads as a step between them) and each divider keeps 2 px either side. */
@media (pointer: coarse) and (min-width: 768px) and (max-width: 1024px) {
  html:not([data-tv]) #transport .vds-controls-group.row > * + * {
    margin-left: 0px;
  }
  html:not([data-tv]) #transport .vds-controls-group.row > * + .mag-divider {
    margin-left: 2px;
  }
  html:not([data-tv]) #transport .mag-divider {
    margin-right: 2px;
  }
}