@use "sass:color";
@use "../variables" as *;
// Retro Rating Stars
.retro-rating {
  display: flex;
  align-items: center;
  gap: 4px;
}
.retro-rating-star {
  font-size: var(--retro-font-size-3xl);
  // An unfilled star still has to be readable -- it is what communicates the
  // scale. This was --retro-border-dark, a *border* token, which lands at
  // #151515 on the #3a3a3a dark card: 1.6:1. --retro-text-muted is the token
  // that carries a contrast guarantee against the surface.
  color: var(--retro-text-muted);
  cursor: pointer;
  transition: color 0.2s, text-shadow 0.2s, border 0.2s;
  text-shadow: 1px 1px 0 var(--retro-border-light);
  user-select: none;
  border: 2px solid var(--retro-border-dark);
  border-radius: var(--retro-border-radius);
  background: var(--retro-bg);
  padding: 2px 2px 0 2px;
  margin-inline-end: 2px;
  box-sizing: border-box;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.retro-rating-star.selected,
.retro-rating-star.active {
  color: var(--retro-warning-text);
  background: rgba(var(--retro-warning-rgb), 0.2);
  border-color: var(--retro-warning);
  text-shadow: 0 2px 8px var(--retro-border-light);
}
.retro-rating-star:hover,
.retro-rating-star:hover ~ .retro-rating-star {
  color: var(--retro-warning-text);
  background: rgba(var(--retro-warning-rgb), 0.2);
  border-color: var(--retro-warning);
}