.toggle-switch {
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:none
}
.toggle-switch input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px
}
.slider {
  width:38px;
  height:22px;
  background:var(--line-strong);
  border-radius:15px;
  position:relative;
  transition:background .2s
}
.slider:before {
  content:'';
  position:absolute;
  width:16px;
  height:16px;
  left:3px;
  top:3px;
  border-radius:50%;
  background:var(--toggle-thumb);
  transition:transform .2s
}
input:checked+.slider {
  background:var(--accent)
}
input:checked+.slider:before {
  transform:translateX(16px)
}
.toggle-switch input:focus-visible+.slider {
  outline:2px solid var(--accent);
  outline-offset:2px
}