/* Pajarita rating widget — difficulty field (model/publication detail pages)
 *
 * Image paths are relative to dist/css/ (the compiled output location),
 * so ../../images/ resolves to web/themes/custom/odb/images/.
 *
 * IMPORTANT: .field--name-field-difficulty does NOT appear in the rendered DOM.
 * The fivestar field renders as a <form>; the differentiating class is
 * .fivestar-widget-static-difficulty (generated from the vote type name).
 *
 * Specificity target: basic.css uses
 *   .fivestar-basic div.fivestar-widget-static .star  → (0,3,0,1)
 * and
 *   .fivestar-basic div.fivestar-widget-static .star span.on  → (0,4,0,2)
 * Our selectors must match or exceed those values so source order
 * (theme CSS loads after module CSS) becomes the tiebreaker.
 */

/* ── Static (view-only) display ────────────────────────────────────── */

/* Stars + count label in one flex row */
.fivestar-static-form-item {
  display: flex;
  align-items: center;
}

/* Star row for difficulty (pajarita) widget */
div.fivestar-widget-static-difficulty {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Each star cell — CSS mask clips to pajarita shape; background = empty color.
 * Selector specificity (0,3,0,1) matches .fivestar-basic div.fivestar-widget-static .star
 * so source order (theme > module) breaks the tie. */
.fivestar-basic div.fivestar-widget-static-difficulty .star {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  overflow: visible;
  -webkit-mask: url(../../images/pajarita-solid.svg) no-repeat center / contain;
          mask: url(../../images/pajarita-solid.svg) no-repeat center / contain;
  background: var(--color-paper-300);
}

/* Inner span carries the filled portion (full width for on; partial width inline for half) */
.fivestar-basic div.fivestar-widget-static-difficulty .star span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

/* Specificity (0,4,0,2) beats basic.css (0,3,0,2) — we win without relying on source order */
.fivestar-basic div.fivestar-widget-static-difficulty .star span.on {
  background: var(--color-accent);
}

/* .off span hidden — the outer .star already shows the empty background */
.fivestar-basic div.fivestar-widget-static-difficulty .star span.off {
  display: none;
}

/* Compact "3.5 / 5" label */
.fivestar-summary {
  display: inline;
}

.fivestar-count {
  color: var(--fg-4);
  margin-left: 6px;
  font-size: 12px;
  white-space: nowrap;
}

/* ── Interactive (editable) difficulty widget — authenticated users ── */
/* Scoped to .model-details__difficulty (set on the <dd> in node--model--full.html.twig)
 * because fivestar.js creates div.fivestar-widget without a vote-type class,
 * making it impossible to distinguish difficulty from rating by CSS class alone. */

.model-details__difficulty .fivestar-basic div.fivestar-widget .star {
  background-image: none;
  overflow: visible;
}

.model-details__difficulty .fivestar-basic div.fivestar-widget .star a {
  -webkit-mask: url(../../images/pajarita-solid.svg) no-repeat center / contain;
          mask: url(../../images/pajarita-solid.svg) no-repeat center / contain;
  background: var(--color-paper-300);
}

.model-details__difficulty .fivestar-basic div.fivestar-widget .star.on a,
.model-details__difficulty .fivestar-basic div.fivestar-widget .star.hover a {
  background: var(--color-accent);
}

.model-details__difficulty .fivestar-basic div.fivestar-widget .cancel {
  background-image: none;
}