.cosmetic-rarity {
  --rarity-color: var(--sx-color-text-secondary);
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  color: var(--rarity-color);
  font: 800 9px/1.2 var(--sx-font-display);
  text-transform: uppercase;
}

.cosmetic-rarity > i {
  display: inline-grid;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 2px;
  font: 900 8px/1 var(--sx-font-mono);
  font-style: normal;
}

[data-rarity="uncommon"] { --rarity-color: #73d99f; }
[data-rarity="rare"] { --rarity-color: #79f3ff; }
[data-rarity="epic"] { --rarity-color: #c18cff; }
[data-rarity="legendary"] { --rarity-color: #ffd166; }
[data-rarity="mythic"] { --rarity-color: #ff75ba; }
[data-rarity="divine"] { --rarity-color: #f4f8ff; }

[data-rarity="uncommon"] .cosmetic-rarity > i,
.cosmetic-rarity[data-rarity="uncommon"] > i,
[data-rarity="legendary"] .cosmetic-rarity > i,
.cosmetic-rarity[data-rarity="legendary"] > i,
[data-rarity="mythic"] .cosmetic-rarity > i,
.cosmetic-rarity[data-rarity="mythic"] > i,
[data-rarity="divine"] .cosmetic-rarity > i,
.cosmetic-rarity[data-rarity="divine"] > i {
  border-style: double;
  border-width: 3px;
}

.skin-copy {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 4px;
}

.skin-copy > b,
.skin-copy > small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin[data-rarity] {
  border-left: 2px solid var(--rarity-color);
}

.profile-frame-option .cosmetic-rarity {
  justify-content: center;
}

.profile-frame-option .cosmetic-rarity > i {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
  font-size: 7px;
}

@media (prefers-reduced-motion: reduce) {
  .cosmetic-rarity { transition: none; }
}

html[data-quality="low"] .cosmetic-rarity,
body.quality-low .cosmetic-rarity {
  text-shadow: none;
  box-shadow: none;
}