/* TOGGLE */

.toggle-switch,
.toggle-switch .toggle-knob {
  transition: all 0.1s ease-in;
}

.toggle-switch {
  height: 1.2em;
  width: 2em;
  display: inline-block;
  background-color: var(--shard-exp);
  border-radius: 2em;
  cursor: pointer;
  box-shadow: inset 1px 1px 9px -3px rgb(4 4 4 / 8%),
    1px 2px 6px -2px rgb(0 0 0 / 1%);
  border: solid 1px transparent;
}

.toggle-switch:hover {
  animation: wobble 0.4s ease 0s 1 normal none;
}

.toggle-switch .toggle-knob {
  width: 0.9em;
  height: 0.9em;
  display: flex;
  font-family: var(--ui-font);
  background-color: var(--toggle-knob);
  color: var(--BR2);
  border: solid 1px rgba(126, 126, 126, 0.07);
  box-shadow: 0 1px 3px rgb(106 106 106 / 26%), 0 5px 1px rgb(106 106 106 / 13%);
  border-radius: 1.5em;
  margin: 1px 0.9em 1px 1px;
  align-items: center;
  justify-content: center;
}

.toggle-switch.active {
  background-color: var(--BR2);
  border: solid 1px transparent;
}
.toggle-switch.active .toggle-knob {
  margin-left: 0.9em;
  margin-right: 1px;
}

.submenu .toggle-switch {
  height: 0.85em;
  width: 1.5em;
}

.submenu .toggle-switch .toggle-knob {
  width: 0.6em;
  height: 0.6em;
}

.submenu .toggle-switch.active .toggle-knob {
  margin-left: 0.7em;
  margin-right: 1px;
}
