.queue-item {
	position: relative;
	display: flex;
	flex-direction: row;
	padding: 0.5rem 1.5rem;
	margin: 0 -1.5rem;
	color: var(--white);
	align-items: center;
  border: 1px solid transparent; /* Prevent shift when hovered. */
}
		
.queue-item__position {
	margin-right: 1.5rem;
	font-size: 2rem;
	min-width: 2.25rem;
}
		
.queue-item__info {
	display: flex;
	flex-direction: column;
	margin-right: 1.5rem;
}

.queue-item__remove-form {
  display: inline;
  margin-left: auto;
}

.queue-item__remove-button {
	margin-left: auto;
	font-size: 2rem;
	border: 0;
	color: var(--white);
	background: transparent;
	transform: scale(100%);
	transition: color .1s ease-in-out, transform .1s ease-in-out;
}
		
.queue-item__remove-button:hover {
	cursor: pointer;
	transform: scale(120%);
	color: var(--accent);
}
		
.queue-item__remove-button:active {
	color: var(--grey02);
}
		
.queue-item--sortable.queue-item--host:hover {
	cursor: grab;
	border: 1px solid var(--grey03);
}
		
.queue-item--sortable.queue-item--host:hover .queue-item__position::before {
	position: absolute;
	left: 0;
	content: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="%23F7F8F7"><circle cx="8" cy="5" r="1"/><circle cx="8" cy="12" r="1"/><circle cx="8" cy="19" r="1"/><circle cx="16" cy="5" r="1"/><circle cx="16" cy="12" r="1"/><circle cx="16" cy="19" r="1"/></g></svg>');
	display: inline-block;
	width: 24px;
	height: 24px;
	vertical-align: middle;
	margin-right: 5px;
}
		
.queue-item--ghost {
	opacity: .7;
	background-color: var(--pink);
}