/* Reading-progress toggle */

.lp-progress-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 1.2em 0;
  padding: 0.35em 0.7em;
  border: 1px solid var(--md-default-fg-color--lightest, #ddd);
  border-radius: 0.4em;
  font-size: 0.8em;
  font-weight: 500;
  color: var(--md-default-fg-color--light);
  background: var(--md-code-bg-color, transparent);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.lp-progress-toggle:hover {
  border-color: var(--md-accent-fg-color, #3f51b5);
  color: var(--md-accent-fg-color, #3f51b5);
}

.lp-progress-toggle input {
  margin: 0;
  accent-color: var(--md-accent-fg-color, #3f51b5);
}

.lp-progress-toggle input:checked + span {
  color: var(--md-accent-fg-color, #3f51b5);
  font-weight: 600;
}

#lp-progress-list h2 {
  margin-top: 1.6em;
  font-size: 1.1em;
  text-transform: capitalize;
}

#lp-progress-list ul {
  margin-top: 0.5em;
}

#lp-progress-clear {
  margin-top: 2em;
  padding: 0.5em 1em;
  border: 1px solid var(--md-default-fg-color--lightest, #ddd);
  border-radius: 0.4em;
  background: transparent;
  color: var(--md-default-fg-color--light);
  font-size: 0.85em;
  cursor: pointer;
}

#lp-progress-clear:hover {
  border-color: #c0392b;
  color: #c0392b;
}