@import url(../../../js/plyr/plyr.css);



.music-player-bg{
    display: grid;
    /* grid-template-columns: repeat(2 , 1fr); */
    grid-template-columns: repeat(1 , 1fr);
    gap: 15px;
    overflow: hidden;
    
    /* position: relative; */
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 37.5rem;
}




/* 照片----------------------- */
.music-player {
  /* max-width: 420px; */
  width: 100%;
  /* padding: 15px; */
  border-radius: 24px;
  /* background: linear-gradient(135deg, #161616, #2b1b3f); */
  color: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  position: relative;
  min-height: 92px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid #2d2d2d !important;
  border-radius: 1rem !important;
  /* background-color: var(--dark_color) !important; */
  background-color: #404040;

  
}

.music-cover {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 100px;
  width: 100%;
  max-width: 3.75rem;
  min-width: 3.125rem;
  display: block;
  overflow: hidden;
}

.music-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  float: none;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: 0.3s ease all;
}


/* 資訊區塊------------------------------ */
.music-info{
    display: flex;
    /* align-items: center; */
    gap: 8px;
    flex-direction: column;

    width: 100%;
    /*white-space: nowrap;
    width: calc(100% - 4.25rem); */
}

.song-name-wrap{
    width: 100%;
    max-width: clamp(12.5rem, 9.3rem + 5.17vw, 15.5rem);
    overflow: hidden;
    position: relative;
}

/* 節目名稱---------- */
.song-name {
  font-size: clamp(0.875rem, 0.742rem + 0.22vw, 1rem);
  font-weight: 700;
  /* margin-bottom: 6px; */

    width: max-content;
    white-space: nowrap;
    padding-right: 32px;

  /* animation: marquee 8s ease-in-out infinite alternate; */
}

/*啟動動畫*/
.song-name.scroll{
    animation: marquee 8s linear infinite alternate;
}



/*================*/
/*----- 動畫 -----*/
/*================*/

@keyframes marquee{

    0%{
        transform: translateX(0);
    }

    100%{
        transform: translateX(var(--marquee-distance));
    }

}



/* 藝人名稱----- */
.artist-name {
  font-size: clamp(0.625rem, 0.492rem + 0.22vw, 0.75rem);
  color: rgba(255,255,255,.65);
  /* margin-bottom: 18px; */
}

.playlist {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: none;
}

.playlist button {
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: #fff;
  text-align: left;
  cursor: pointer;
  margin-bottom: 8px;
}

.playlist button.active,
.playlist button:hover {
  background: rgba(255,255,255,.22);
}



.music-player-box{
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    z-index: 3;
    overflow: hidden;
    /* margin: 15px 0; */
    width: 20rem;
    height: 100%;
    padding-left: 15px;
}



.plyr{
    position: absolute;
    top: 0;
    right: 0;
    
    width: 100%;
    height: 100%;
    min-height: inherit;
    max-height: unset;
    /* width: calc(100% - 215px); */
    width: calc(100% - 21.875rem);
    overflow: hidden;

    transform: translateX(-15%);
}


.plyr__controls{
}

.plyr__control.plyr__control--overlaid{
}


.plyr__controls {
    /* padding: 15px 15px 15px 270px !important; */
    /* padding: 15px !important; */
    height: 100%;
    min-height: inherit;
    /* border: 1px solid #2d2d2d !important; */
    /* border-radius: 1rem !important; */
    background: transparent !important;
}


.plyr__controls__item.plyr__menu ,
.plyr__controls__item.plyr__volume{
    display: none;
}

  .plyr__control svg {
    fill: var(--third_color);
  }
  .plyr--audio .plyr__controls {
    color: var(--third_color);
  }



/* 關閉按鈕-------- */

.closure_btn_area{
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: 100%;
  min-height: inherit;
  max-height: unset;
  overflow: hidden;
}

button.closure_btn {
    background-color: unset;
    border: unset;
    color: #fff;
    font-size: clamp(0.938rem, -0.063rem + 1.61vw, 1.875rem); /* 15 30 */
    padding: clamp(0.625rem, 0.292rem + 0.54vw, 0.938rem); /* 10 15 */
    cursor: pointer;
}

/* 預設隱藏 */
.music-player{
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: .4s;
}

/* 開啟 */
.music-player.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* 關閉 */
.music-player.hide{
    display: none;
}


@media (max-width: 540px){

  .music-player-box{
    margin-top: 15px;
  }

  .music-player_content{
    display: flex;
    flex-direction: column;
  }

  .music-player-box{
    position: unset;
    width: 90%;
  }

  .plyr {
    position: unset;
    transform: translateX(0);
    width: 90%;
  }
.song-name-wrap{
    max-width:unset;
}

}


@media (max-width: 420px){

}