/* Copyright Ayers Electronics Inc. All rights reserved. */
/* Music Mode's full-screen visualizer (js/visualizer.js): the canvas edge to edge on the page ground,
   the song small in the top left corner, the two buttons at the top right and the mini player's bar at
   the foot while the controls show (body.visualizer-controls). The bar stands one layer above. */

#visualizer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 39;
  background: var(--bg);
}
#visualizerCanvas {
  display: block;
  width: 100%;
  height: 100%;
}
.visualizer-corner {
  position: absolute;
  top: var(--page-margin-vertical);
  left: var(--page-margin);
  display: flex;
  align-items: center;
  max-width: 40%;
}
.visualizer-corner > * + * {
  margin-left: 12px;
}
#visualizerArt {
  flex: none;
  width: var(--info-button-h);
  height: var(--info-button-h);
  border-radius: var(--radius-small);
  object-fit: cover;
}
.visualizer-banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  pointer-events: none;
}
.visualizer-actions {
  position: absolute;
  top: var(--page-margin-vertical);
  right: var(--page-margin);
  display: flex;
}
.visualizer-actions > * + * {
  margin-left: 8px;
}
.visualizer-actions .icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--info-button-h);
  height: var(--info-button-h);
  padding: 0;
}
body.visualizer-open:not(.visualizer-controls) .visualizer-actions,
body.visualizer-open:not(.visualizer-controls) #miniPlayer {
  display: none;
}
body.visualizer-open:not(.visualizer-controls) #visualizer {
  cursor: none;
}