/* ABSOLUTELY COMMON AND RELIES ON VANILLA OR FLAVOR */

/* checkbox */
/* https://qiita.com/McbeEringi/items/dcbf35c9aa02aeefaad0 */

input.toggly {
  /* --toggly-height: ?; */
  /* border-radius: ?; */
  appearance: none;
  margin: 0;
  width: calc(var(--toggly-height) * 1.8);
  height: var(--toggly-height);
  vertical-align: calc(var(--toggly-height) * -0.1);
}
input.toggly::before {
  /* border-radius: ?; */
  content: "";
  display: block;
  position: relative;
  top: 0.21em;
  left: 0.21em;
  width: calc(var(--toggly-height) - 0.42em);
  height: calc(var(--toggly-height) - 0.42em);
  /* fashion */
  background: var(--c1);
  transition: 0.1s;
}

/* checkbox hover */

input:hover.toggly::before {
  transform: translateX(calc(var(--toggly-height) * 0.1));
}

/* checkbox checked */

input:checked.toggly::before {
  /* outline-color: ?; */
  transform: translateX(calc(var(--toggly-height) * (1.8 / 2 - 0.1))); /* a half of width - outline-offset */
}

/* checkbox checked hover */

input:checked:hover.toggly::before {
  /* outline-color: ?; */
  transform: translateX(calc(var(--toggly-height) * (1.8 / 2 - 0.1 - 0.1)));
}