body { height: 100vh; }

ons-list-item.list-item {
  cursor: pointer;
  padding: 0rem .75rem;
}

.list-item:hover {
  background-color: #807d7d40;
}

ons-dialog .dialog-container{ min-height: 0; }
ons-dialog .dialog {
  min-height: 0;
  border: 1px solid #6a6a6a6a;
  border-radius: 2px;
}


.library-view { z-index: 100; }

.toolbar-button.hide-control-bar-button {
  width: 2.5rem;
  position: fixed;
  right: 0;
  bottom: 0;
  padding: 0rem .5rem .5rem 0rem;
}

ons-toolbar-button.hide-album-modal-button {
  width: 2.5rem;
  position: fixed;
  right: 0;
  bottom: 0;
  padding: 0 .5rem .5rem 0;
  z-index: 2000;
}

.fixed-buttons {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: row;
}

.show-control-bar-button {
  width: 2.5rem;
}

.segments {
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 2rem;
}
label {
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  font-size: 0.5rem;
  font-family: sans-serif;
  margin-top: -8px;
}


.disc-icon { opacity: .2; }

.loading-message {
  width: 300px;
  margin: auto auto;
  margin-top: 200px;
  text-align: center;
}

.dialog {
  width: 80%;
  min-height: 100px;
}

/**
 * Buttons
 */

ons-button { background-color: transparent !important; } 

ons-toolbar-button, button {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.album-grid-css .button--large--cta { padding: 0; }

button { min-width: 40px !important; }

.player-selector ons-toolbar-button,
.genre-selector ons-toolbar-button {
  padding: .5rem 1rem;
  border: 1px solid rgb(0, 118, 255); 
  border-radius: 3px;
  font-weight: 300;
}

button.search-clear-button {
  z-index: 90;
  background: transparent;
  width: 2rem;
  cursor: pointer;
  border: none;
  margin-left: -2.5rem;
}

button.order-select,
button.theme-select { width: 70px; }

ons-toolbar-button.player-control-button {
  flex-grow: 1;
  margin-bottom: 0px;
  padding: 2px 15px 2px 15px;
}

ons-toolbar {
  height: 0px !important;
  position: fixed !important;
  bottom: 0px !important;
}

ons-toolbar.toolbar-hidden { display: none; }
ons-toolbar.toolbar-showing { display: inline-block; }

.btn-icon {
  width: 3rem;
  stroke: #0076FF;
  cursor: pointer;
}
.btn-icon.randomize-icon {
  width: 2rem;
}
.btn-icon.download {
  height: 2rem;
} 

.demo-info {
  position: absolute;
  top: 20px;
  right: 50px;
  width: auto;
  z-index: 600;
  background: #efff6abf;
  padding: 1rem;
  font-family: monospace;
}
.title-codec-duration {
  margin-bottom: .5rem;
  flex-wrap: wrap;
}

/* Albums */

.album-tracklist {
  font-size: 10px;
  display: flex;
  flex-direction: column;
  z-index: 100;
  margin: 1em 2em 1em 2em;
  padding-bottom: 70px;
}

.album-tracklist .track-details {
  margin-left: 1rem;
  margin-bottom: 1rem;
  margin-right: 1rem;
}

.tracklist-artist { font-weight: 800; }

.album-info {
  display: flex;
  margin: 0.5rem;
  justify-content: space-between;
}

.album-info .text-info {
  flex-basis: 80%;
  padding:.25rem;
}

.mini-album-cover { display: flex; }
.mini-album-cover img {
  width: auto;
  height: 8rem;
}

.album-modal .dialog {
  width: 90%;
  max-width: 700px;
  height: 80vh;
}

.album-image-modal {
  height: 100vh;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.album-no-artwork { position: relative; }

/* Album Grid */

.main-album-grid { width: 100%; }
.album-grid-css {
  display: grid;
  gap: 16px;
  padding: 16px;
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  grid-template-columns: repeat(5, 1fr);
  box-sizing: border-box;
  position: relative;
}

.album-grid-0 {
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
}
.album-grid-1 {
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.album-grid-2 {
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.album-grid-3 {
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.album-grid-4 {
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
}
.album-grid-5 {
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
}
.album-grid-6 {
  grid-template-columns: repeat(7, 1fr);
  gap: 1rem;
}
.album-grid-7 {
  grid-template-columns: repeat(8, 1fr);
  gap: 1rem;
}
.album-grid-8 {
  grid-template-columns: repeat(9, 1fr);
  gap: 1rem;
}
.album-grid-8 .album-text-info {
  font-size: .5rem;
}
.album-grid-9 {
  grid-template-columns: repeat(10, 1fr);
  gap: 1rem;
}
.album-grid-0 .album-text-info,
.album-grid-1 .album-text-info {
  font-size: 4rem;
  line-height: 4.25rem;
}
.album-grid-2 .album-text-info {
  font-size: 1.5rem;
  line-height: 1.75rem;
}

.album-grid-3 .album-text-info,
.album-grid-4 .album-text-info,
.album-grid-5 .album-text-info {
  font-size: .75rem;
  line-height: 1rem;
}
.album-grid-6 .album-text-info,
.album-grid-7 .album-text-info,
.album-grid-8 .album-text-info,
.album-grid-9 .album-text-info {
  font-size: .5rem;
  line-height: 1rem;
}

.album-text-info {
  position: absolute;
  top: 0;
  font-size: 1rem;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-wrap: initial;
  line-height: 1.5rem;
}

.album-background-image {
  overflow: hidden;
  height: 100vh;
}

/* Control Bar */

.control-bar {
  visibility: visible;
  display: flex;
  position: fixed;
  z-index: 300;
  opacity: 0.95;
  bottom: 0;
  width: 100%;
  box-shadow: -1px -5px 16px #888888;
  padding: 1rem;
  background-color: white;
}

.control-bar-content { margin-right: 4rem; }

.global-controls {
  display: flex;
  column-gap: 2rem;
  row-gap: 1rem;
  flex-wrap: wrap;
}

.player-controls {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.now-playing-container {
  width: 80%;
  margin-bottom: 1rem;
}

.now-playing {
  display: flex;
  margin: 0 auto;
  padding: 0px 6px 0px 6px;
  gap: 1rem;
  font-size: .8rem;
}

.now-playing-album-title { font-weight: bold; }

.now-playing > img {
  float: right;
  margin-bottom: 10px;
  max-width: 25%;
  margin-right: 4px;
}

.now-playing .info {
  width: 100%;
  display: flex;
}

.now-playing-meta {
  white-space: normal;
  gap: 4px;
  flex-grow: 1;
  min-height: 5rem;
}
.now-playing-meta,
.control-buttons {
  display: flex;
  flex-direction: column;
}
.album-size-slider {
  width: 50%;
  margin: 0 auto;
}

.alpha-shuffle,
.theme-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.base-lms-controls {
  display: flex;
  padding: 0px 10px 0px 10px;
  max-width: 400px;
}

input.search-input {
  height: 2.5rem;
  font-size: 1.25rem;
}
.search-clear {
  background-color: #dcdcdc;
  border-radius: 5px;
}

.player-control-bar {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.player-selector {
  font-size: 40px !important;
  display: flex;
  text-align: center;
  flex-direction: row;
  align-self: center;
  white-space: normal;
}

.search-bar {
  position: relative;
  display: flex;
}

.track-time {
  padding: 10px 0px 10px 0px;
  width: 80%;
}

.now-playing-album-cover {
  min-width: 100px;
  max-width: 100%;
  position: relative;
  width: 12rem;
}

/* Track cards */

.card { color: black; }

.codec {
  color: grey;
  padding: 0 10px 0 10px;
  font-size: 8px;
  font-weight: 800;
  background: #f3ecec;
  border-radius: 3px;
  margin-left: 10px;
  width: auto;
  height: 12px;
}

.info-i {
  display: flex;
  text-transform: none;
  background-color: lightgray;
  width: 25px;
  height: 25px;
  border-radius: 15px;
  font-weight: 700;
  font-family: ui-serif;
  text-align: center;
  align-items: center;
  cursor: pointer;
}

.i {
  display: flex;
  text-align: center;
  width: 100%;
  padding-left: 50%;
  position: relative;
  left: -3px;
}

.duration { word-break: normal; }

.track-buttons {
  display: flex;
  align-items: center;
}

.track-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.track-container .track-info {
  display: flex;
  flex-basis: 80%;
  flex-direction: column;
}

.track-info-controls {
  display: flex;
  align-items: center;
}
.tracklist-album {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  width: 100px;
}
.track-info .track-title {
  font-size: 1.4em;
  text-transform: none;
  margin-right: .5rem;
}

.album .album-image {
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  max-width: 100%;
  object-fit: cover;
}

.slider-volume {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  justify-content: center;
}
.slider-volume ons-range { width: 100%; }
.track-range .timings {
  display: flex;
  justify-content: space-between;
}
.loading-text { font-size: 5em; }

.tracklist-album-title { font-style: italic; }
ons-range.track-time { width: 100%; }

.button--large--cta {
  background-color: transparent !important;
  border-radius: 0px;
}

.button--large--cta:active {
  background-color: transparent !important;
  opacity: 0.8 !important;
}

/* Range Sliders */

.grid-size input,
.slider-volume input,
.track-time input {
  opacity: 0.5;
}
.grid-size ons-range {
  width: 200px;
}

.grid-size {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: sticky;
  z-index: 100;
  width: 200px;
}

.disc-number {
  font-size: 18px;
  margin-bottom: 15px;
}
.disc-number-text {
  margin-left: 10px;
}

.track-info {
  overflow-wrap: anywhere;
  max-width: 100%;
}

/*
  Light Theme
*/

.light-theme .page__background {
  background-color: #d9d9d9 !important;
}

body.light-theme {
  background-color: #d9d9d9;
}

/* 
   Dark Theme 
*/

body.dark-theme {
  background-color: black;
}
.dark-theme .dialog-container {
  background-color: black;
  
}
.dark-theme.album-modal .dialog-container {
  background-color: black;
  color: white;
}

.dark-theme button.search-clear-button {
  color: white;
}  
.dark-theme.control-bar {
  box-shadow: -1px -6px 20px 0px #0b0530;
  background-color: black;
  border-top: 1px solid #93858559;
}
.dark-theme .album-info {
  color: #a39191;
}
.dark-theme .card {
  background-color: black;
  border: 1px solid #404040;
  color: rgb(179, 177, 177);
}

.dark-theme .dialog {
  box-shadow: 0px 0px 20px 3px #0b0530;
}
.dark-theme .dialog .list-item {
  background-color: black;
  color: white;
}
.dark-theme .album-text-info {
  color: white;
}
.dark-theme .list-item:hover {
  background-color: #a39191;
}
.dark-theme .search-bar input {
  background-color: #272727;
  color: white;
}
.dark-theme .page__background {
  background-color: black;
}
.dark-theme .toolbar {
  color: #a39191;;
}

@media (max-width: 800px) {
  .now-playing-container { width: 95%; }
  .player-controls { margin-top: 1rem; }
  .control-bar-content { flex-direction: column; }
  .album-modal .dialog { width: 90%;}
  .album-image { background-position: top !important; }
}

@media (max-width: 450px) {
  .grid-size { display: none; }
  .global-controls,
  .player-control-bar { justify-content: center;}
  .global-controls {
    margin-bottom: 2.5rem;
    flex-direction: column;
    align-items: center;
  }
  .now-playing-album-cover { width: 6rem; }
  .now-playing-meta {
    width: auto;
    margin-right: 1rem;
  }
  .control-bar { padding: 1rem 0 0 0; }
  .control-bar-content {
    width: 100%;
    margin-right: 0;
  }
  .alpha-shuffle { justify-content: space-around;}
  .search-bar {
    justify-content: center;
    align-self: center;
  }
  .album-grid-0 .album-text-info,
  .album-grid-1 .album-text-info {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
  .album-grid-2 .album-text-info {
    font-size: 1rem;
    line-height: 1.25rem;
  }
  .album-grid-3 .album-text-info,
  .album-grid-4 .album-text-info,
  .album-grid-5 .album-text-info {
    font-size: .4rem;
    line-height: .5rem;
  }
  .album-grid-6 .album-text-info,
  .album-grid-7 .album-text-info,
  .album-grid-8 .album-text-info,
  .album-grid-9 .album-text-info {
    font-size: .25rem;
    line-height: .4rem;
  }
}