/* app/assets/stylesheets/components/tier_tags.css
 *
 * Tier-Group tag styling. Used in the standings table, the Group-to-Rank
 * Mapping modal, and the Tier Movements matrix. The palette is keyed on
 * tier.rank_order (gold/silver/bronze/slate/steel/mauve/taupe) with sub-groups
 * getting `-pale` modifiers.
 *
 * Each color uses CSS variables from config/variables.css so the palette is
 * easy to extend.
 */

.tier-tag {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 10px;
  font-size: inherit;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
  background: var(--bg-2);
  color: var(--ink);
}

/* Solid tier colors (sub-group rank_order = 1) */
.tier-tag--gold   { background: var(--gold);   color: #1f1500; border-color: var(--gold-dark); }
.tier-tag--silver { background: var(--silver); color: #1f2429; border-color: var(--silver-dark); }
.tier-tag--bronze { background: var(--bronze); color: #1f1004; border-color: var(--bronze-dark); }
.tier-tag--slate  { background: var(--slate);  color: #fff; }
.tier-tag--steel  { background: var(--steel);  color: #fff; }
.tier-tag--mauve  { background: var(--mauve);  color: #fff; }
.tier-tag--taupe  { background: var(--taupe);  color: #fff; }

/* Pale tier colors (sub-group rank_order > 1) */
.tier-tag--gold-pale   { background: var(--gold-light);   color: #4a3500; }
.tier-tag--silver-pale { background: var(--silver-light); color: #1f2a35; }
.tier-tag--bronze-pale { background: var(--bronze-light); color: #4a2904; }
.tier-tag--slate-pale  { background: var(--slate-light);  color: #1f242a; }
.tier-tag--steel-pale  { background: var(--steel-light);  color: #1a2235; }
.tier-tag--mauve-pale  { background: var(--mauve-light);  color: #2c2148; }
.tier-tag--taupe-pale  { background: var(--taupe-light);  color: #2c2520; }

/* Resulting-Group state colors used in the Tier Movements matrix. */
.tier-tag--stay      { background: transparent; color: var(--ink); border-color: var(--ink-4); }
.tier-tag--lateral   { background: var(--silver-light); color: #1f2a35;     border-color: var(--silver-dark); }
.tier-tag--promoted  { background: rgba(39, 174, 96, 0.15); color: var(--green); border-color: var(--green); }
.tier-tag--relegated { background: rgba(235, 87, 87, 0.15); color: var(--red);   border-color: var(--red); }
.tier-tag--unmapped  { background: rgba(235, 87, 87, 0.30); color: #fff;          border-color: var(--red); }

.tier-tag--unassigned {
  background: var(--bg-2);
  color: var(--ink-3);
  border-color: var(--ink-4);
  font-style: italic;
}