/* Layout shared by every theme. Colors, borders, fonts, and control shapes
   live in the theme files, themes/theme-<name>.css. */

/* Both columns are exactly the window's height. The menu and the player keep
   their size, and the space left goes to the playlist and the page content,
   which scroll on their own. */

html,
body,
#root {
  height: 100%;
}

.app-frame {
  height: 100%;
}

.app-column {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.app-column > .row {
  flex: none;
}

.app-column > .app-fill {
  flex: 1;
  min-height: 0;
}

.main-wrapper {
  padding: 0 !important;
  margin: 0 !important;
}

.main-content {
  height: 100%;
  overflow: auto;
}

.audio-content {
  height: 114px;
}

.menu-items {
  padding: 0 !important;
  margin: 0 !important;
}

.queue-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

.tight {
  width: 1%;
  white-space: nowrap;
}

/* Window title bar */

.winamp-titlebar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  margin: 2px 4px;
}

.winamp-titlebar span {
  padding: 0 6px;
}

.theme-select {
  position: absolute;
  top: 0;
  left: 0;
  height: 14px;
  padding: 0 2px;
  cursor: pointer;
}

.theme-select:focus,
.theme-select:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Buttons and selects */

.winamp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 26px;
  height: 20px;
  padding: 0 5px;
  text-decoration: none;
  cursor: pointer;
}

.winamp-button:disabled {
  cursor: default;
}

.winamp-light {
  display: inline-block;
  width: 5px;
  height: 5px;
}

.winamp-select {
  height: 20px;
  padding: 0 4px;
}

/* Main window (the player) */

.player {
  position: relative;
  height: 100%;
}

.player-body {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 230px;
  grid-template-rows: 42px 10px 22px;
  gap: 2px 10px;
  padding: 0 10px 10px;
}

.player-lcd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
}

.player-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.player-marquee {
  height: 20px;
  padding: 0 6px;
  overflow: hidden;
  white-space: nowrap;
}

.player-marquee-text {
  display: inline-block;
}

.player-marquee-scrolling {
  animation: player-marquee var(--marquee-duration, 6s) ease-in-out infinite alternate;
}

/* One way: hold at the start, slide until the end of the text shows, hold.
   `alternate` plays it back the other way. */
@keyframes player-marquee {
  0%,
  15% {
    transform: translateX(0);
  }
  85%,
  100% {
    transform: translateX(var(--marquee-shift, 0));
  }
}

.player-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 18px;
}

.player-album {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-length {
  padding: 0 4px;
}

.player-volume {
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-mute {
  min-width: 24px;
}

.player-transport {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
}

.player-transport .winamp-button {
  width: 30px;
  height: 20px;
}

.player-toggles {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

/* Seek and volume sliders */

.winamp-seek,
.winamp-volume {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
}

.winamp-seek {
  grid-column: 1 / -1;
  height: 10px;
}

.winamp-seek:disabled {
  cursor: default;
}

.winamp-seek:disabled::-webkit-slider-thumb {
  visibility: hidden;
}

.winamp-volume {
  flex: 1;
  height: 10px;
}

/* Equalizer window, between the playlist and the spectrum analyzer */

.equalizer {
  flex: none;
  padding-bottom: 6px;
}

.window-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 0;
}

.window-bar-title {
  flex: 1;
  margin: 0;
}

.equalizer-panel {
  padding-top: 4px;
}

.equalizer-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px 6px;
}

.equalizer-curve {
  flex: 1;
  min-width: 0;
  height: 20px;
}

.equalizer-header .winamp-select {
  max-width: 92px;
}

.equalizer-bands {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin: 0 6px;
  padding: 5px 4px 3px;
  transition: opacity 0.15s;
}

.equalizer-bands-off {
  opacity: 0.5;
}

.equalizer-preamp {
  padding-right: 4px;
}

.equalizer-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px 2px 17px 0;
  text-align: right;
  white-space: nowrap;
}

.equalizer-band {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.equalizer-slider {
  width: 10px;
  height: 100px;
  writing-mode: vertical-lr;
  direction: rtl;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
}

/* Playlist window (the queue) */

.playlist {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.playlist-closed {
  flex: none;
  padding-bottom: 4px;
}

.playlist .window-bar {
  margin-bottom: 2px;
}

.playlist-list {
  flex: 1;
  margin: 0 4px;
  overflow: auto;
}

.playlist-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.playlist-row {
  cursor: default;
  user-select: none;
}

.playlist-row td {
  padding: 1px 3px;
  white-space: nowrap;
}

.playlist-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.playlist-length {
  width: 3.4em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.playlist-remove {
  width: 1.4em;
  text-align: center;
}

.playlist-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 30px;
  padding: 0 6px;
}

.playlist-modes {
  display: flex;
  gap: 2px;
  margin-right: auto;
}

.playlist-mode {
  width: 28px;
}

.playlist-total {
  padding: 0 4px;
}

/* Library window: MP3s, Playlists, and Sources as buttons in a row */

.library {
  padding-bottom: 6px;
}

.library-nav {
  display: flex;
  gap: 3px;
  padding: 2px 5px 0;
}

.library-button {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  height: 30px;
  padding: 0 3px;
  cursor: pointer;
}

.library-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-count {
  padding: 0 3px;
}

/* Login window */

.login-body {
  padding: 10px 12px 12px;
}

.login-body .btn {
  width: 100%;
}

/* Library pages */

.breadcrumb {
  margin-bottom: 0.5rem;
}

.table a {
  text-decoration: none;
}

.table td,
.table th {
  padding-top: 3px;
  padding-bottom: 3px;
}

.btn-sm {
  padding: 1px 6px;
}

.input-group > .btn {
  height: auto;
}

/* Request spinner */

.wait {
  position: absolute;
  top: -11px;
  right: -8px;
  transform: scale(0.45);
}

.waiting {
  display: inline-block;
  position: relative;
  width: 36px;
  height: 36px;
  vertical-align: middle;
  z-index: 1000;
}

.waiting div {
  position: absolute;
  opacity: 0.8;
  border-radius: 50%;
  animation: waiting 1s cubic-bezier(0, 0, 0, 1) infinite;
}

.waiting div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes waiting {
  0% {
    top: 18px;
    left: 18px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  29.9% {
    top: 18px;
    left: 18px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  30% {
    top: 18px;
    left: 18px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 36px;
    height: 36px;
    opacity: 0;
  }
}

/* Spectrum analyzer, under the equalizer */

.visualizer {
  flex: none;
  padding-bottom: 4px;
}

.visualizer-canvas {
  display: block;
  width: calc(100% - 8px);
  margin: 4px 4px 0;
  height: 88px;
}

/* Playlist entry drag handles */

.drag-handle {
  padding: 0 4px;
  cursor: grab;
}

.drag-handle:active {
  cursor: grabbing;
}

/* Phones and narrow windows: one scrolling column of player, library
   buttons, page content, then the playlist, equalizer, and visualization
   windows, each of which collapses with its button. */

@media (max-width: 767.98px) {
  html,
  body,
  #root,
  .app-frame,
  .app-frame > .row {
    height: auto;
  }

  .app-frame > .row {
    flex-direction: column;
    flex-wrap: nowrap;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .app-column {
    display: contents;
  }

  .app-main {
    border: none !important;
  }

  /* With the columns flattened, the rows inside them would keep Bootstrap's
     negative side margins and reach past the screen. */
  .area-player,
  .area-library,
  .area-content,
  .area-windows,
  .main-content {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  /* Paths and long titles have no spaces to wrap at. */
  .table td,
  .table th,
  .breadcrumb-item {
    overflow-wrap: anywhere;
  }

  /* A table wider than the screen scrolls inside its own area. */
  .main-content > div {
    min-width: 0;
    overflow-x: auto;
  }

  .area-player {
    order: 1;
    position: sticky;
    top: 0;
    z-index: 1020;
    height: auto;
  }

  .area-library {
    order: 2;
  }

  .area-content {
    order: 3;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
  }

  .area-content > .main-content {
    flex: 1 0 auto;
  }

  .area-windows {
    order: 4;
  }

  .main-content {
    height: auto;
    overflow: visible;
    padding-bottom: 8px;
  }

  .queue-wrapper {
    height: auto;
  }

  .playlist-list {
    flex: none;
    max-height: 45vh;
  }

  .player-body {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 4px 8px;
    padding: 0 8px 12px;
  }

  .player-lcd {
    height: 42px;
    padding: 0 8px;
  }

  .player-volume {
    grid-column: 1 / -1;
  }

  .player-transport {
    justify-content: center;
  }

  .player-transport .winamp-button {
    flex: 1;
    max-width: 64px;
    height: 32px;
  }

  .library-button {
    height: 36px;
  }

  .col-album,
  .col-track {
    display: none;
  }
}