/* League Classic (/classic).
   NOTE: this is the compiled output of components/classic.scss, committed directly so the
   page styles correctly even on environments where the SCSS build step hasn't run for
   newly-added component files. If you change classic.scss, re-compile/mirror it here. */

/* Disclaimer callout - yellow outline with no fill, matching the guide-page
   "Not Updated For Current Season" notice (.new-warning in mf-redesign-main.scss,
   2px solid #ffc000 with a 14px radius). */
.classic-disclaimer {
	border: 2px solid #ffc000;
	border-radius: 14px;
	background: transparent;
	color: #b0bed6;
	padding: 12px 16px;
	/* extra bottom margin so the box doesn't crowd the filter form below it
	   when no tier list is published above */
	margin: 14px 0 24px;
	line-height: 1.5;
}

.classic-disclaimer strong {
	color: #ffc000;
}

.classic-disclaimer a {
	color: #ffc000;
	text-decoration: underline;
}

.classic-disclaimer a:hover {
	color: #ffffff;
}

/* Sort controls on /classic: "Top Rated" is the only option, so it reads as a static
   label rather than something you can click. Hides any sort-direction arrow drawn as a
   pseudo-element and removes the pointer cursor / click target, while keeping the
   existing active-pill background from input:checked + span. */
.classic-static-sort label,
.classic-static-sort input,
.classic-static-sort span {
	pointer-events: none;
	cursor: default;
}

.classic-static-sort label span:after,
.classic-static-sort label span:before {
	display: none !important;
}

/* S/A/B/C tier list widget */
.classic-tier-widget {
	margin: 14px 0;
	background: #1c2a45;
	border-radius: 4px;
	overflow: hidden;
}

.classic-tier-widget__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	background: #233148;
}

.classic-tier-widget__head h2 {
	margin: 0;
	font-size: 15px;
	color: #ffffff;
}

.classic-tier-widget__edit {
	color: #eeaa18;
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}

.classic-tier-widget__edit:hover {
	text-decoration: underline;
}

.classic-tier-widget__empty {
	padding: 14px;
	color: #8191AF;
	font-size: 13px;
}

.classic-tier-widget__row {
	display: flex;
	align-items: stretch;
	border-top: 1px solid #2c3547;
}

.classic-tier-widget__row__label {
	flex: 0 0 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 18px;
	color: #1a1a1a;
}

.classic-tier-widget__row__champs {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px;
	background: #1a283f;
}

.classic-tier-widget__row__empty {
	color: #8191AF;
	font-size: 12px;
	padding: 4px;
}

/* Tier colors reused from the TFT augment tier list. */
.classic-tier-widget__row--s .classic-tier-widget__row__label { background: #fd5450; }
.classic-tier-widget__row--a .classic-tier-widget__row__label { background: #f7ab73; }
.classic-tier-widget__row--b .classic-tier-widget__row__label { background: #f6c15a; }
.classic-tier-widget__row--c .classic-tier-widget__row__label { background: #7bea82; }

.classic-tier-widget__champ {
	flex: 0 0 46px;
	text-align: center;
}

.classic-tier-widget__champ img {
	width: 40px;
	height: 40px;
	border-radius: 3px;
	display: block;
	margin: 0 auto 2px;
}

.classic-tier-widget__champ span {
	display: block;
	font-size: 9px;
	line-height: 1.2;
	color: #b0bed6;
	word-break: break-word;
}

@media (max-width: 600px) {
	.classic-tier-widget__champ {
		flex: 0 0 40px;
	}

	.classic-tier-widget__champ img {
		width: 34px;
		height: 34px;
	}
}