<div class="playing">
  <img src="https://picsum.photos/300/300?random=1" alt="Album cover">
  <div class="playing__meta">
    <div class="details">
      <div>Some song title</div>
      <div>Some Artist</div>
    </div>
    <div class="actions">
      <button>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
        </svg>
        <span class="sr-only">Like track</span>
      </button>
      <button popovertarget="context">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
          <path stroke-linecap="round" fill="none" stroke-width="2" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
        </svg>
        <span class="sr-only">Toggle menu</span>
      </button>
      <nav popover="auto" id="context">
        <ul>
          <li>Add to queue</li>
          <hr>
          <li>Go to song radio</li>
          <li>Go to artist</li>
          <li>Go to album</li>
          <li>Show credits</li>
          <hr>
          <li>Save to your Liked Songs</li>
          <li>
            <button popovertarget="playlist">
              <span>Add to playlist</span>
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" fill="none" stroke-width="2" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
              </svg>
            </button>
          </li>
          <hr>
          <li>
            <button popovertarget="share">
              <span>Share</span>
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" fill="none" stroke-width="2" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
              </svg>
            </button>
          </li>
        </ul>
      </nav>
      <div popover="auto" id="share">
        <ul>
          <li>Copy Song Link</li>
          <li>Embed track</li>
        </ul>
      </div>
      <div popover="auto" id="playlist">
        <ul>
          <li>
            <input type="search" placeholder="Find a playlist">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
              <path stroke-linecap="round" fill="none" stroke="var(--text-1)" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
            </svg>
          </li>
          <li>Create playlist</li>
          <hr>
          <li>5 Star</li>
          <li>Lofi</li>
          <li>Valentine's</li>
          <li>Rock</li>
          <li>Chill</li>
          <li>Liked</li>
          <li>Changing Room</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<select>
  <option value=center>Content Position</option>
  <option value=top>Top</option>
  <option value=right>Right</option>
  <option value=bottom>Bottom</option>
  <option value=left>Left</option>
  <option value=center>Center</option>
</select>

@layer demo {
  [popovertarget="share"] {
    anchor-name: --share;
  }
  [popovertarget="playlist"] {
    anchor-name: --playlist;
  }
  [popovertarget="context"] {
    anchor-name: --context;
  }
  :root:has(#context:open) [popovertarget="context"] svg {
    rotate: 180deg;
  }
  :root:has(#share:open) [popovertarget="share"] svg,
  :root:has(#playlist:open) [popovertarget="playlist"] svg {
    --rotate: 1;
  }
  #share {
    anchor-default: --share;
    position-fallback: --aligned;
  }

  #playlist {
    anchor-default: --playlist;
    position-fallback: --aligned;
  }

  #context {
    anchor-default: --context;
    position-fallback: --flip;
  }

  [popover] {
    inset: unset;
  }

  @position-fallback --aligned {
    @try {
      top: anchor(top);
      left: anchor(right);
    }
    @try {
      top: anchor(bottom);
      left: anchor(right);
    }
    @try {
      top: anchor(top);
      right: anchor(left);
    }
    @try {
      bottom: anchor(bottom);
      left: anchor(right);
    }
    @try {
      right: anchor(left);
      bottom: anchor(bottom);
    }
  }
  @position-fallback --flip {
    @try {
      bottom: anchor(top);
      left: anchor(left);
    }
    @try {
      right: anchor(right);
      bottom: anchor(top);
    }
    @try {
      top: anchor(bottom);
      left: anchor(left);
    }
    @try {
      top: anchor(bottom);
      right: anchor(right);
    }
  }
}

[popovertarget] svg {
  transition: rotate 0.2s, transform 0.2s;
}

li {
  white-space: nowrap;
}

[popover] ul {
  font-size: var(--font-size-1);
  color: var(--text-2);
}

[type="search"] {
  anchor-name: --search;
}

[type="search"] + svg {
  position: absolute;
  width: var(--size-4);
  left: anchor(--search left);
  top: anchor(--search center);
  translate: var(--size-2) 0%;
}

:is(button, input):focus-visible {
  background: var(--surface-2);
  outline-color: transparent;
  transition: none;
  outline-width: 0;
}

[popover] {
  opacity: var(--open, 0);
  scale: calc(0.9 + (var(--open, 0) * 0.1));
  transition: opacity 0.2s, scale 0.2s, top 0.2s, right 0.2s, left 0.2s,
    bottom 0.2s;
  box-shadow: var(--shadow-5);
}

[popover]:open {
  --open: 1;
}

li {
  position: relative;
}

li svg {
  width: 24px;
  position: absolute;
  right: var(--size-4);
  top: 50%;
  transition: transform 0.2s;
  transform: translate(0, -50%)
    rotate(calc((var(--rotate, 0) * 180deg) + 90deg));
}

.actions li:has(button, input) {
  padding: 0;
}

[type="search"] {
  border-radius: 0;
  padding: var(--size-4);
  padding-left: 2.5rem;
}

body:has([value="top"]:checked) {
  align-content: start;
}
body:has([value="right"]:checked) {
  justify-content: end;
}
body:has([value="bottom"]:checked) {
  align-content: end;
}
body:has([value="left"]:checked) {
  justify-content: left;
}
body:has([value="center"]:checked) {
  align-items: center;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: "Google Sans", sans-serif, system-ui;
  background: var(--surface-1);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.actions > button {
  width: 44px;
  aspect-ratio: 1;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-2);
}

.actions ul {
  list-style-type: none;
  padding: 0;
  display: grid;
}

ul button {
  width: 100%;
  text-align: left;
  position: relative;
  padding: var(--size-3);
}

ul button svg {
  height: var(--size-6);
}

.actions li {
  padding: var(--size-3);
}

.actions li:hover {
  background: var(--surface-3);
}

hr {
  border-top: 1px solid var(--text-2);
  margin: var(--size-0);
}

img {
  width: 100%;
  object-fit: cover;
}

.playing__meta {
  padding: var(--size-3);
  display: flex;
  justify-content: space-between;
  gap: var(--size-3);
  align-items: center;
}

.details {
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-9);
  color: var(--text-1);
  display: grid;
  gap: var(--size-1);
}

.details div:last-of-type {
  font-size: var(--font-size-0);
  font-weight: var(--font-weight-2);
  color: var(--text-2);
}

select {
  position: fixed;
  top: var(--size-2);
  right: var(--size-2);
  padding: var(--size-2);
  z-index: 2;
}

.actions {
  display: flex;
}

button {
  background: none;
}

button:hover {
  background: var(--surface-2);
}

.actions > button svg {
  width: 65%;
}

button svg {
  stroke: var(--text-2);
  fill: none;
}