/* Своя визуализация плеера */

.audioPlayer_progress {
  position: relative;
  width: 20vh;
  height: 20vh;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1vh 2vh rgba(0, 0, 0, 0.3);
  background: rgb(71 71 71);
  z-index: 2;
}

.audioPlayer_menu
{
  position: relative;
  width: 18vh;
  height: 18vh;
  background-color: white;
  /* border: 0.5vh solid rgb(0, 0, 0); */
  border-radius: 50%;
  box-shadow: 0 0.3vh 0.6vh rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.audioPlayer_button {
  position: relative;
  width: 10vh;
  height: 10vh;
  background-color: white;
  /* border: 0.5vh solid rgb(0, 0, 0); */
  border-radius: 50%;
  box-shadow: 0 0.3vh 0.6vh rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 2;
  left: 4vh;
}

.audioPlayer_button:hover {
  transform: scale(0.95); /* Эффект нажатия */
  box-shadow: 0 0.3vh 0.6vh rgba(0, 0, 0, 0.4); /* Увеличиваем тень для эффекта глубины */
}


/* Стили для кнопки Play (когда аудио не играет) */
.audioPlayer_button::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-40%, -50%);
  width: 0;
  height: 0;
  border-left: 2.8vh solid black; /* Треугольник Play */
  border-top: 1.8vh solid transparent;
  border-bottom: 1.8vh solid transparent;
}


/* Стили для кнопки Pause (когда аудио играет) */
.audioPlayer_button.playing::before {
  content: '';
  position: absolute;
  width: 1vh;
  height: 3vh;
  background-color: black;
  left: 50%;
  top: 50%;
  transform: translate(-120%, -50%);
  border: none;
}

.audioPlayer_button.playing::after {
  content: '';
  position: absolute;
  width: 1vh;
  height: 3vh;
  background-color: black;
  left: 50%;
  top: 50%;
  transform: translate(20%, -50%);
}

.playlist-icon {
  /* display: none; */
  position: relative;
  margin: 0.5vh;
  width: 3vh; /* Размер иконки, подстраивайте под вашу иконку */
  height: 3vh;
  /* margin-left: 10px; */
  background-image: url('/static/icons/playlist_icon.svg'); /* Замените на путь к вашей иконке */
  background-size: cover;
  cursor: pointer;
  top: 0vh;
  left: 7vh;
  z-index: 2;
}

.repeat-icon {
  /* display: none; */
  margin: 0.75vh;
  position: relative;
  width: 2.5vh; /* Размер иконки, подстраивайте под вашу иконку */
  height: 2.5vh;
  /* margin-left: 10px; */
  background-image: url('/static/icons/repeat_icon.svg'); /* Замените на путь к вашей иконке */
  background-size: cover;
  cursor: pointer;
  bottom: 7vh;
  left: 0vh;
  z-index: 2;
}

.repeat-icon.active {
  filter: invert(20%) sepia(92%) saturate(7465%) hue-rotate(240deg) brightness(98%) contrast(134%);
}

.nextsong-icon {
  /* display: none; */
  margin: 0.75vh;
  position: relative;
  width: 2.5vh; /* Размер иконки, подстраивайте под вашу иконку */
  height: 2.5vh;
  /* margin-left: 10px; */
  background-image: url('/static/icons/nextsong_icon.svg'); /* Замените на путь к вашей иконке */
  background-size: cover;
  cursor: pointer;
  bottom: 10.25vh;
  left: 14vh;
  z-index: 2;
}

.nextsong-icon.active {
  filter: invert(20%) sepia(92%) saturate(7465%) hue-rotate(240deg) brightness(98%) contrast(134%);
}

/* Всплывающий список песен */

.songListContainer
{
  display: none;
}

#playList {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.5vh;
    list-style: none;
    padding: 0;
    width: 16vh;
    height: 7.3vh;
    max-height: 10vh;
    overflow-y: auto;
    border: 0.5vh solid #FFD700;
    background-color: rgba(0, 0, 0, 1);
    text-align: left;
    z-index: 3;
    direction: rtl; 
}


#playList.active, #playListSongs.active {
  display: block;
}

#playList ul, #playListSongs ul {
  direction: ltr; /* Возвращаем направление текста влево-направо */
  text-align: left; /* Выравнивание текста по левому краю */
  padding-right: 10px; /* Убираем дополнительное пространство с правой стороны, если оно появилось */
}

#playList li, #playListSongs li {
  text-align: left; /* Дополнительное выравнивание по левому краю для элементов списка */
  padding: 0.5vh;
  cursor: pointer;
  color:#FFD700;
  transition: background-color 0.3s;
  direction: ltr; /* Возвращаем нормальное направление текста для элементов списка */
}


#playList li:hover, #playListSongs li:hover {
  background-color: #313149;
}

#playList li:active, #playListSongs li:active {
  background-color: #0a1014;
}

#playListSongs {
  position: absolute;
  top: 115%;
  left: 0;
  transform: translateX(-50%);
  margin-top: 0.5vh;
  list-style: none;
  padding: 0;
  width: 40vh;
  height: 10vh;
  max-height: 10vh;
  overflow-y: auto;
  color: #FFD700;
  border: 0.5vh solid #FFD700;
  background-color: rgba(0, 0, 0, 1);
  text-align: left;
  z-index: 1;
  direction: rtl; 
}

/* Добавляем стили для активных элементов */
#playList li.active-playlist, #playListSongs li.active-song {
  background-color: #5754f8; 
}

#playListSongs::-webkit-scrollbar, #playList::-webkit-scrollbar
{
    height: 1vh;
    width: 1vh;
}

#playListSongs::-webkit-scrollbar-track, #playList::-webkit-scrollbar-track
{
    background:#ccc;
    border-radius: 5vh; 
}

#playListSongs::-webkit-scrollbar-thumb, #playList::-webkit-scrollbar-thumb
{
    background:#666;
    border-radius: 5vh; 
}


input.volume-slider
{
  position: absolute;
  width: 8vh; 
  height: 0.3vh;
  transform: translate(5vh, -6.5vh)
}


/* Стиль для ползунка звука */
/* https://toughengineer.github.io/demo/slider-styler/slider-styler.html */

input[type=range].volume-slider 
{
height: 2vh;
-webkit-appearance: none;
background: none;
}
/*progress support*/
input[type=range].volume-slider.slider-progress {
--range: calc(var(--max) - var(--min));
--ratio: calc((var(--value) - var(--min)) / var(--range));
--sx: calc(0.5 * 1vh + var(--ratio) * (100% - 1vh));
}
input[type=range].volume-slider:focus {
outline: none;
}
/*webkit*/
input[type=range].volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 1.5vh;
height: 1.5vh;
border-radius: 1vh;
background: #D9D9D9;
border: none;
box-shadow: 0 0 0.3vh black;
margin-top: -0.55vh;
}
input[type=range].volume-slider::-webkit-slider-runnable-track {
height: 0.7vh;
border: 0.1vh solid #b2b2b2;
border-radius: 0.5vh;
background: #00000080;
box-shadow: none;
}
input[type=range].volume-slider::-webkit-slider-thumb:hover {
background: #FFFFFF;
}
input[type=range].volume-slider::-webkit-slider-thumb:active {
background: #FFFFFF;
}
input[type=range].volume-slider.slider-progress::-webkit-slider-runnable-track {
background: linear-gradient(#D9D9D9,#D9D9D9) 0/var(--sx) 100% no-repeat, #00000080;
}
/*mozilla*/
input[type=range].volume-slider::-moz-range-thumb {
  width: 1.5vh;
  height: 1.5vh;
  border-radius: 1vh;
  background: #D9D9D9;
  border: none;
  box-shadow: 0 0 0.3vh black;
}
input[type=range].volume-slider::-moz-range-track {
height: max(calc(0.5vh - 1vh - 1vh),0vh);
border: 0.1vh solid #b2b2b2;
border-radius: 0.5vh;
background: #00000080;
box-shadow: none;
}
input[type=range].volume-slider::-moz-range-thumb:hover {
background: #FFFFFF;
}
input[type=range].volume-slider::-moz-range-thumb:active {
background: #FFFFFF;
}
input[type=range].volume-slider.slider-progress::-moz-range-track {
background: linear-gradient(#D9D9D9,#D9D9D9) 0/var(--sx) 100% no-repeat, #00000080;
}
/*ms*/
input[type=range].volume-slider::-ms-fill-upper {
background: transparent;
border-color: transparent;
}
input[type=range].volume-slider::-ms-fill-lower {
background: transparent;
border-color: transparent;
}
input[type=range].volume-slider::-ms-thumb {
width: 1.5vh;
height: 1.5vh;
border-radius: 1vh;
background: #D9D9D9;
border: none;
box-shadow: 0 0 0.3vh black;
margin-top: 0;
box-sizing: border-box;
}
input[type=range].volume-slider::-ms-track {
height: 0.7vh;
border-radius: 0.5vh;
background: #00000080;
border: 0.1vh solid #b2b2b2;
box-shadow: none;
box-sizing: border-box;
}
input[type=range].volume-slider::-ms-thumb:hover {
background: #FFFFFF;
}
input[type=range].volume-slider::-ms-thumb:active {
background: #FFFFFF;
}
input[type=range].volume-slider.slider-progress::-ms-fill-lower {
height: max(calc(0.5vh - 1vh - 1vh),0vh);
border-radius: 0.5vh 0 0 0.5vh;
margin: -0.1vh 0 -0.1vh -0.1vh;
background: #D9D9D9;
border: 0.1vh solid #b2b2b2;
border-right-width: 0;
}


@media (max-width: 768px) {
  #playListSongs{
  position: absolute;
  top: 115%;
  left: 0;
  transform: translateX(-50%);
  margin-top: 0.5vh;
  list-style: none;
  padding: 0;
  width: 40vh;
  height: 10vh;
  max-height: 10vh;
  overflow-y: auto;
  color: #FFD700;
  border: 0.5vh solid #FFD700;
  background-color: rgba(0, 0, 0, 1);
  text-align: left;
  z-index: 1;
  direction: rtl; 
}

  #playList {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.5vh;
    list-style: none;
    padding: 0;
    width: 16vh;
    height: 7.3vh;
    max-height: 10vh;
    overflow-y: auto;
    border: 0.5vh solid #FFD700;
    background-color: rgba(0, 0, 0, 1);
    text-align: left;
    z-index: 3;
    direction: rtl; 
  }
}