/**
 * @file
 * Five-star scale for curator-assigned ratings.
 *
 * The gold is Teach For All's #DB994F, the same colour as the footer rule.
 * Override it by redeclaring --tacl-star-on in your theme's custom.css.
 */

.tacl-stars {
  --tacl-star-size: 1.05em;
  --tacl-star-on: #DB994F;
  --tacl-star-off: #C9C9C9;
  display: inline-flex;
  align-items: center;
  gap: 0.1em;
  line-height: 1;
  /* Keeps the row of stars sitting on the text baseline. */
  vertical-align: -0.12em;
}

.tacl-stars__star {
  width: var(--tacl-star-size);
  height: var(--tacl-star-size);
  flex: 0 0 auto;
  overflow: visible;
}

.tacl-stars__star--on {
  fill: var(--tacl-star-on);
}

.tacl-stars__star--off {
  fill: none;
  stroke: var(--tacl-star-off);
  stroke-width: 1.75;
}

/* Carries the value for screen readers without showing it twice. */
.tacl-stars__sr {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
  word-wrap: normal;
}

/* Honour a reader's preference for higher contrast. */
@media (forced-colors: active) {
  .tacl-stars__star--on {
    fill: CanvasText;
  }

  .tacl-stars__star--off {
    stroke: GrayText;
  }
}