.xpSubtitle {
	display: flex;
	align-items: center;
	gap: 2px;
}

.xpIcon {
	width: 14px;
	height: 14px;
}

.tierBadge {
	flex-shrink: 0;
}

.upcomingDivider {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-1) var(--s-2);
	font-size: var(--font-3xs);
	color: var(--color-text-high);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.badgeRow {
	display: flex;
	align-items: center;
	gap: var(--s-1);
	margin-left: auto;
	flex-shrink: 0;
}

.saveIconButton {
	display: grid;
	place-items: center;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-text-high);
	padding: 0;
	height: var(--selector-size-sm);
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-selector);
}

.saveIconButton:hover {
	color: var(--color-text);
	background-color: var(--color-bg-higher);
}

.upcomingDivider::before,
.upcomingDivider::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--color-border);
}