.listItem {
	display: block;
	width: 100%;
	height: 50px;
	user-select: none;
	display: flex;
	margin: 0 0 8px;
}

.pill {
	width: 4px;
	height: 100%;
	display: flex;
	align-items: center;
}

.pill span {
	height: 0;
	width: 0;
	border-radius: 0 4px 4px 0;
	transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.pillHover {
	height: 20px !important;
	width: 100% !important;
	background-color: white;
}

.pillSelected {
	height: 40px !important;
	width: 100% !important;
	background-color: white;
}

.icon {
	border-radius: 100%;
	width: 100%;
	transition: border-radius 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.wrapper {
	margin-left: 7px;
	transition: 0.3s;
	cursor: pointer;
	height: 50px;
	width: 50px;
}

.wrapper:active {
	position: relative;
	transform: translateY(1px);
}

.wrapper:hover > *,
.selected > * {
	border-radius: 40%;
}

.wrapper:hover .acronym,
.selected .acronym {
	color: #fff;
	background-color: var(--brand-experiment);
}

.home .icon {
	background-color: var(--background-primary);
}

.acronym {
	font-weight: 500;
	font-family: var(--font-primary);
	font-size: 18px;
	line-height: 1.2em;
	white-space: nowrap;
	overflow: hidden;
	transition:
		background-color 0.15s ease-out,
		color 0.15s ease-out,
		border-radius 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
	background-color: var(--background-primary);
	color: var(--text-normal);
	display: flex;
	width: 100%;
	height: 100%;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	border-radius: 100%;
	transition: border-radius 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
