@import "theme.scss";
.playbar {
  width: 100%;
  height: $playbar-size;
  background-color: $play-bar-background-color;
  opacity: 0.9;
  position: fixed;
  bottom: 0;
  .invisible-media-progress {
    width: 100%;
    height: 0.875rem;
    background-color: transparent;
    position: absolute;
    transform: translateY(-50%);
    padding-top: 0.4375rem;
    .media-progress {
      width: 100%;
      height: 0.1875rem;
      background-color: $controls-click-color;
      .media-progress-solid {
        position: relative;
        height: 0.1875rem;
        background: linear-gradient(90deg, $play-grad-start, $play-grad-end);
      }
    }
    .media-progress-solid::before {
      content: "";
      position: absolute;
      height: 0.1875rem;
      width: 100%;
      background: linear-gradient(90deg, $play-grad-start, $play-grad-end);
      z-index: -1;
      filter: blur(0.1875rem);
    }
  }
  .playbar-left-group {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0.625rem;
    .media-info-img {
      width: 3.125rem;
    }
    .media-info-text {
      text-align: left;
      margin-left: 0.625rem;
    }
    .like-dislike {
      margin-left: 1.25rem;
    }
  }
  .playcontrols {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .playduration {
    position: absolute;
    right: 0.625rem;
    top: 0.8125rem;
  }
  .queue-toggle {
    position: absolute;
    bottom: 0.8125rem;
    top: 0.8125rem;
    right: 5.625rem;
  }
  button {
    .hmirror {
      transform: scale(-1, 1);
    }
    .controlbtn {
      color: $text-controls-color;
    }
    .controlbtn:hover {
      color: $controls-hover-color;
    }
    .controlbtn:active {
      color: $controls-click-color;
    }
    background-color: transparent;
    border: none;
  }
}