.library-head {
  gap: 12px;
}

.library-playlist-accordion {
  position: relative;
  margin-left: auto;
}

.library-playlist-accordion > summary {
  display: grid;
  place-items: center;
  width: 132px;
  height: 50px;
  border: 1px solid #ffe14b;
  border-radius: 6px;
  color: #241900;
  background: linear-gradient(180deg, #fff28a, #f0c41d 48%, #b77b00);
  box-shadow: inset 0 2px #fffbbd, inset 0 -5px 8px #71440099, 0 4px 0 #5c3900, 0 0 15px #ffd72f66;
  font: 900 11px Orbitron, sans-serif;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.library-playlist-accordion > summary::-webkit-details-marker {
  display: none;
}

.library-playlist-accordion[open] > summary {
  border-color: #ffb229;
  color: #1a0900;
  background: linear-gradient(180deg, #ffc15a, #ff7a00 52%, #a83300);
  box-shadow: inset 0 2px #ffe2a2, inset 0 -5px 8px #6c1800aa, 0 2px 0 #5a1700, 0 0 20px #ff7900aa;
  transform: translateY(2px);
}

.playlist-accordion-panel {
  position: absolute;
  z-index: 35;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  width: 230px;
  gap: 7px;
  padding: 10px;
  border: 1px solid #ff8a20;
  border-radius: 8px;
  background: linear-gradient(145deg, #20232d, #080a0e);
  box-shadow: 0 16px 35px #000, 0 0 18px #ff760055;
}

.playlist-accordion-panel select,
.playlist-accordion-panel button {
  width: 100%;
  min-height: 37px;
  padding: 8px 10px;
  border: 1px solid #434b5a;
  border-radius: 5px;
  color: #fff;
  background: linear-gradient(180deg, #2c323c, #101318);
  text-align: left;
  cursor: pointer;
}

.playlist-accordion-panel button:hover,
.playlist-accordion-panel select:hover {
  border-color: #ff8a20;
  box-shadow: 0 0 12px #ff790066;
}

@media (max-width: 1050px) {
  .library-playlist-accordion > summary {
    width: 108px;
    height: 44px;
  }
}