/* Native range controls retain keyboard support and browser hit targets. */
.simulator-field input[type='range'],
.simulation-settings-drawer-body input[type='range'] {
  width: 100%;
  accent-color: var(--simulator-accent, var(--color-primary));
  cursor: pointer;
}

.simulator-field input[type='range']:focus-visible {
  outline: 2px solid var(--simulator-accent, var(--color-primary));
  outline-offset: 4px;
}

.simulator-field input[type='range'][aria-invalid='true'] {
  accent-color: #d94141;
}

@media (prefers-color-scheme: dark) {
  .simulator-field input[type='range'][aria-invalid='true'] {
    accent-color: #ff7b72;
  }
}