/*
    音乐播放器
*/
.has-player { margin-bottom: 5em }

.has-player footer .action {
  bottom: 6rem;
  bottom: max(6rem, calc(constant(safe-area-inset-bottom) + 5rem)); /* 兼容 iOS < 11.2 */
  bottom: max(6rem, calc(env(safe-area-inset-bottom) + 5rem)); /* 兼容 iOS >= 11.2 */
}

player {
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  color: #fff;
  color: var(--text-light);
  padding: 1em;
  /* 兼容 iOS < 11.2 */
  padding-bottom: max(1rem, constant(safe-area-inset-bottom));
  /* 兼容 iOS >= 11.2 */
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  position: fixed;
  background: #3c3c3c;
  display: flex;
  align-items: center;
  transform: translateY(100%);
  backface-visibility: hidden;
  transition: opacity .3s, transform .3s;
}
.has-player player { transform: translateY(0) }

.player-left, .player-right {
  flex: 0 0 25%;
}

.player-left {
  overflow: hidden;
  font-weight: lighter;
}

.player-left .player-info { margin-left: 4em }

.player-left .title, .player-left .artist {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.player-left .artist {
  opacity: .6;
  font-size: .85em;
  margin-top: .2em;
}

player .player-cover {
  width: 3em;
  height: 3em;
  float: left;
  transition: margin .3s, width .3s, height .3s;
}
player .player-cover.active .cover-img { animation-play-state: running }
player .player-cover.loading .cover-img { animation: player-loading 1s infinite linear alternate }

@keyframes player-loading {
  from {
    opacity: .3;
  }

  to {
    opacity: 1;
  }
}

player .cover-img {
  border-radius: 66%;
  padding-bottom: 100%;
  background: #555 center/contain;
  transition: background-image .3s;
  animation: rotate 15s infinite linear paused;
}

.player-center {
  padding: 0 1em;
  flex: 1 1 50%;
  max-width: 50%;
  font-weight: lighter;
}

.player-center .player-lyric {
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.player-bar {
  height: .2em;
  margin-top: 1em;
  background: #666;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  border-radius: 1em;
}

.player-bar .played, .player-bar .loaded {
  width: 0;
  height: 100%;
  position: absolute;
}

.player-bar .played {
  max-width: 100%;
  background-color: var(--secondly);
}

.player-bar .loaded { background-color: #999 }

.player-bar .played::before {
  top: -.4em;
  right: -.5em;
  width: 1em;
  height: 1em;
  content: "";
  display: block;
  cursor: pointer;
  cursor: grab;
  position: absolute;
  border-radius: 1em;
  background-color: var(--secondly);
}

.player-right { text-align: right }

.player-btn {
  height: 3em;
  cursor: pointer;
  line-height: 3em;
  text-align: center;
  border-radius: 66%;
  display: inline-block;
  vertical-align: middle;
}

.player-btn::before {
  font-size: 1.25em;
  font-family: "remixicon";
}
.player-btn:active { transform: scale(.9) }

.player-btn.toggle {
  width: 3em;
  margin: 0 1em;
  background: var(--secondly);
}
.player-btn.toggle::before { content: "\f00A"}
.player-btn.toggle.pause::before { content: "\efd7"}
.player-btn.prev::before { content: "\f13f"}
.player-btn.next::before { content: "\f143" }

/* - 移动设备放大模式 */
player.full {
  padding: 2em 1em;
  align-items: inherit;
  flex-direction: column;
}

player.full .player-cover {
  float: none;
  width: 10em;
  height: 10em;
  width: min(30vh, 60vh);
  height: min(30vh, 60vh);
  margin: 0 auto;
}

player.full .player-info {
  margin: 1.5em 0;
  text-align: center;
}

player.full .player-info .title { font-size: 1.2em }

player.full .player-center {
  padding: 0;
  flex: 0 0 100%;
  max-width: 100%;
  margin: 0 auto;
  margin-bottom: 2em;
  width: min(30vh, 60vh);
}

player.full .player-right {
  flex: 0 0 100%;
  font-size: 1.3em;
  text-align: center;
}

@media screen and (max-width: 768px) {
  player:not(.full) .player-left { flex: 1 0 50% }

  player:not(.full) .player-right { flex: 0 0 9em }

  player:not(.full) .player-center { display: none }
}