.page.playlists {
  overflow: hidden;
}

.page .title {
  font-size: 1.5em;
}

.page .playlist-details {
  height: 100%;
  overflow-y: clip;
}

.page .playlist-details .content {
  height: 100%;
  overflow: auto;
}

.fake-item {
  display: flex;
  gap: 16px;
  flex-direction: column;
  padding: 14px;
}

.fake-item .playlist-art {
  width: 150px;
  height: 150px;
  background: var(--N100);
  border-radius: 4px;
}

.fake-item .content {
  gap: 8px;
  display: inherit;
  flex-direction: column;
}

.fake-item .name {
  width: 120px;
  height: 20px;
  background: var(--N100);
  border-radius: 4px;
}

.fake-item .song-amount {
  width: 70px;
  height: 16px;
  background: var(--N100);
  border-radius: 4px;
}

.playlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 178px);
  max-height: 100%;
  overflow-y: auto;
  padding-bottom: 200px;
  gap: 10px;
}

.category {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.category .label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.playlist-grid .item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px;
  cursor: pointer;
  border-radius: 9px;
}

.playlist-details .item {
  gap: 16px;
}

.playlist-grid .item:hover {
  background: var(--N050); /* TODO: Need a variable name for this  */
}

.playlist-art {
  width: 150px;
  height: 150px;
  padding: 0;
  overflow: hidden;
  background: var(--N025);
  display: flex;
  justify-content: center;
  align-items: center;
}

.playlist-details .playlist-art {
  width: 225px;
  height: 225px;
}

.playlist-details .playlist-art svg path {
  stroke: var(--N200);
}

.playlist-grid .item.create .playlist-art {
  border: none;
}

.playlist-art,
.playlist-art img {
  border-radius: 4px;
}

.playlist-grid .item .playlist-art svg path {
  stroke: var(--N200);
}

.playlist-grid .item .playlist-art img.full {
  height: 100%;
  width: auto;
  max-height: 150px;
}

.menu.playlist-options-dropdown {
  width: 137px;
  display: flex;
  flex-direction: column;
  right: 0;
  right: 0;
  top: 44px;
}

.menu.playlist-options-dropdown > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 8px;
  border-radius: 6px;
}

.menu.playlist-options-dropdown span {
  font-size: 9px;
}

.playlist-grid h6 {
  font-size: 10px;
  text-align: center;
}

.playlist-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.playlist-content .name {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item span.song-amount {
  font-size: 14px;
  color: var(--N300);
  font-weight: 400;
}

.playlist-details .playlist-content .name {
  font-size: 18px;
  font-weight: 800;
}

.item .playlist img {
  width: 100%;
  height: auto;
}

.playlist-info {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.playlist-info .name {
  font-size: 14px;
  font-weight: 500;
}

.playlist-drawer .back {
  display: flex;
  background: white;
  align-items: center;
}

.songs-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.song-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  height: 36px;
  position: relative;
  height: auto;
  padding-bottom: 60px;
}

.song-container .image-container {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  overflow: hidden;
}

.song-container .song-details {
  display: flex;
  flex-direction: column;
  margin-right: auto;
}

.song-container button {
  padding: 10px;
  background: white;
}

.song-container span {
  font-size: 13px;
  font-weight: 400;
}

.song-container img {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.song-container img.options {
  width: 16px;
  height: 16px;
}

.song-container .playlist-title {
  color: var(--N400);
}

.song-container .song-title {
  color: var(--N300);
}

.song-overlay {
  width: 36px;
  height: 36px;
  background: rgba(25, 25, 25, 0.5);
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  cursor: pointer;
}

.song-overlay:hover,
.song-overlay.active {
  opacity: 1;
}

.song-overlay img {
  width: 16px;
  height: 16px;
  filter: invert(100%) sepia(0%) saturate(7491%) hue-rotate(59deg) brightness(102%) contrast(98%);
}

.song-overlay.active img {
  filter: initial;
}

.now-playing {
  margin-left: auto;
}

#start-playlist img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(8%) hue-rotate(158deg)
    brightness(102%) contrast(102%);
}

#start-playlist.active {
  border: 1px solid var(--N100);
  background: white;
}

.playlist-details .controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  margin-bottom: 30px;
}

.playlist-details .controls .button-container {
  display: inherit;
  gap: 0;
}

.song-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.song-container .button-container {
  align-items: center;
}

.song-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
}

.song-bar.active .name {
  color: var(--color-pink-600);
}

.song-bar:hover {
  background: var(--color-gray-150);
}

.song-bar .content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.song-bar .song-art-mini {
  width: 70px;
  height: 70px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.song-bar .song-art-mini img {
  width: 20px;
  height: 20px;
}

.song-bar .song-art-mini img.full {
  width: auto;
  height: 100%;
}

.song-bar .details {
  display: flex;
  gap: 14px;
  align-items: center;
}

.song-bar .name {
  font-weight: 600;
  font-size: 16px;
}

.song-bar button.tertiary {
  background: transparent;
}

.song-bar .hover-play {
  width: 36px;
  height: 36px;
  background: white;
  border-radius: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  justify-content: center;
  align-items: center;
}

.song-bar .hover-play svg {
  width: 16px;
  height: 16px;
}

.hover-play.active,
.song-bar:hover .hover-play {
  display: flex;
  box-shadow: 0 4px 10px rgba(10, 13, 18, 0.1);
}

.song-bar .circle {
  background: transparent;
  width: 42px;
  height: 42px;
  overflow: hidden;
}

.song-bar .button-container {
  gap: 14px;
  align-items: center;
}

.song-bar .button-container .tertiary img {
  border-radius: 50%;
}

.playlist-details .controls .secondary svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 623px) {
  .playlist-grid .item {
    padding: 14px 10px;
  }

  .playlist-grid .item .playlist-art {
    min-width: 153px;
    min-height: 153px;
  }

  .song-bar {
    padding: 8px 0;
  }

  .song-bar .profile-container {
    display: none;
  }

  .song-art-mini {
    min-width: 70px;
    min-height: 70px;
  }
}