.songControls {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.songControls__trigger {
  background: transparent;
  border: 0 none;
  color: var(--white);
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  anchor-name: --song-controls;
  &:hover {
    cursor: pointer;
    color: var(--pink);
  }
}

.songControls__icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask: url('/static/icons/ellipsis-vertical.svg') no-repeat center;
  mask-size: contain;
  -webkit-mask: url('/static/icons/ellipsis-vertical.svg') no-repeat center;
  -webkit-mask-size: contain;
  transition: background-color .1s ease-in-out;
  &:hover {
    background-color: var(--pink);
  }
}

.songControls__popover {
  &:popover-open {
    top: anchor(--song-controls bottom);
    right: anchor(--song-controls right);
  }
}