:root {
  --focus-color: #097efb;
  --focus-color-dark-bg: #3b99fc;
}
@media (prefers-color-scheme: dark) {
  :root {
    --focus-color: #3b99fc;
    --focus-color-dark-bg: #097efb;
  }
}
/* From the old stuff */
/* These are the styles for the ARIA example */
[role="checkbox"] {
  display: inline-block;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.25rem 0.5rem 0.25rem 0.25rem;
  border: 0.0625rem solid #444;
  background: #e0e0e0;
  background-image: linear-gradient(0deg, #ffffff, #e0e0e0);
  vertical-align: bottom;
}
.enable__is-dark-mode [role="checkbox"] {
  background: #121212;
  border-color: #ededed;
}
[role="checkbox"]:after {
  content: "";
}
[role="checkbox"][aria-checked="true"]:after,
[role="checkbox"][aria-checked="mixed"]:after {
  content: "✓";
  display: block;
  position: absolute;
  top: 0.375rem;
  left: 0.3125rem;
  width: 1.5rem;
  color: #060;
  font-size: 0.875em;
  line-height: 1em;
  text-align: center;
  text-shadow: 0 0 0.0714em #73994d;
  font-weight: bold;
  transform: scale(2.5) translateY(-0.0625rem) translateX(-0.125rem);
}
.enable__is-dark-mode [role="checkbox"][aria-checked="true"]:after,
.enable__is-dark-mode [role="checkbox"][aria-checked="mixed"]:after {
  color: #ddd;
}
[role="checkbox"][aria-checked="mixed"]:after {
  content: "-";
}
/*# sourceMappingURL=checkbox__aria.css.map */