:root {
	--tier-bg-1: hsl(45, 100%, 47%);
	--tier-bg-2: hsl(280, 90%, 44%);
	--tier-bg-3: hsl(280, 65%, 52%);
	--tier-bg-4: hsl(212, 95%, 44%);
	--tier-bg-5: hsl(212, 80%, 51%);
	--tier-bg-6: hsl(145, 80%, 34%);
	--tier-bg-7: hsl(145, 60%, 41%);
	--tier-bg-8: hsl(220, 10%, 40%);
	--tier-bg-9: hsl(220, 8%, 49%);
	--tier-text-1: hsl(45, 100%, 12%);
	--tier-text-2: hsl(280, 100%, 94%);
	--tier-text-3: hsl(280, 100%, 95%);
	--tier-text-4: hsl(212, 100%, 93%);
	--tier-text-5: hsl(212, 100%, 95%);
	--tier-text-6: hsl(145, 85%, 92%);
	--tier-text-7: hsl(145, 75%, 94%);
	--tier-text-8: hsl(220, 15%, 92%);
	--tier-text-9: hsl(220, 15%, 95%);
}

.pill {
	font-size: var(--font-2xs);
	font-weight: var(--weight-bold);
	border-radius: var(--radius-selector);
	padding: 0 var(--s-1-5);
	height: var(--selector-size-sm);
	display: grid;
	place-items: center;
	min-width: 33px;
	text-align: center;
}

.tierX {
	--_polished-bg: var(--tier-bg-1);
	background-color: var(--tier-bg-1);
	color: var(--tier-text-1);
}

.tierSPlus {
	--_polished-bg: var(--tier-bg-2);
	background-color: var(--tier-bg-2);
	color: var(--tier-text-2);
}

.tierS {
	--_polished-bg: var(--tier-bg-3);
	background-color: var(--tier-bg-3);
	color: var(--tier-text-3);
}

.tierAPlus {
	background-color: var(--tier-bg-4);
	color: var(--tier-text-4);
}

.tierA {
	background-color: var(--tier-bg-5);
	color: var(--tier-text-5);
}

.tierBPlus {
	background-color: var(--tier-bg-6);
	color: var(--tier-text-6);
}

.tierB {
	background-color: var(--tier-bg-7);
	color: var(--tier-text-7);
}

.tierCPlus {
	background-color: var(--tier-bg-8);
	color: var(--tier-text-8);
}

.tierC {
	background-color: var(--tier-bg-9);
	color: var(--tier-text-9);
}

.polished {
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(
		160deg,
		hsl(from var(--_polished-bg) calc(h + 2) s calc(l + 14)),
		var(--_polished-bg) 50%,
		hsl(from var(--_polished-bg) calc(h - 3) s calc(l - 9))
	);

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			115deg,
			transparent 35%,
			hsl(0, 0%, 100%, 0.5) 50%,
			transparent 65%
		);
		transform: translateX(-100%);
		animation: shine-sweep 6s ease-in-out infinite;
	}
}

@keyframes shine-sweep {
	0% {
		transform: translateX(-100%);
	}

	12% {
		transform: translateX(100%);
	}

	100% {
		transform: translateX(100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.polished::after {
		animation: none;
		visibility: hidden;
	}
}