/* Hotspots - clickable regions overlaid on a background image / component */
.hotspots {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hotspots__prompt {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--foreground-primary);
}
.hotspots__stage {
  position: relative;
  width: 100%;
  border: var(--border-width-default) solid var(--foreground-quaternary);
  background: var(--background-secondary);
  overflow: hidden;
}
.hotspots__background {
  position: absolute;
  inset: 0;
}
.hotspots__background img,
.hotspots__background svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hotspots__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hotspots__hotspot {
  cursor: pointer;
  outline: none;
}
.hotspots__hotspot[aria-disabled='true'] {
  cursor: not-allowed;
}
.hotspots__shape {
  fill: color-mix(in srgb, var(--highlight-color) 18%, transparent);
  stroke: color-mix(in srgb, var(--highlight-color) 60%, transparent);
  stroke-width: 2;
  transition:
    fill var(--dur-fast) var(--ease-out),
    stroke var(--dur-fast) var(--ease-out);
}
.hotspots__hotspot:hover:not([aria-disabled='true']) .hotspots__shape {
  fill: color-mix(in srgb, var(--highlight-color) 30%, transparent);
}
.hotspots__hotspot:focus-visible .hotspots__shape {
  stroke: var(--focus-outline-color);
  stroke-width: 3;
}
.hotspots__hotspot[data-state='selected'] .hotspots__shape {
  fill: color-mix(in srgb, var(--highlight-color) 35%, transparent);
  stroke: var(--highlight-color);
}
.hotspots__hotspot[data-state='correct'] .hotspots__shape {
  fill: color-mix(in srgb, var(--success-color) 45%, transparent);
  stroke: var(--success-color);
}
.hotspots__hotspot[data-state='incorrect'] .hotspots__shape {
  fill: color-mix(in srgb, var(--danger-color) 45%, transparent);
  stroke: var(--danger-color);
}
.hotspots__status {
  min-height: var(--space-5);
  font-size: var(--fs-sm);
}
.hotspots__feedback {
  margin: 0;
}
.hotspots__feedback--correct {
  color: var(--success-color);
}
.hotspots__feedback--incorrect,
.hotspots__feedback--hint {
  color: var(--foreground-secondary);
}
.hotspots__sr-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .hotspots__shape {
    transition: none;
  }
}