web-wallet/src/style/dusk-components/switch.css
.dusk-switch {
  --hover-scale: 1.1;

  box-sizing: content-box;
  background-color: var(--surface-color);
  border-color: var(--control-border-color);
  border-radius: var(--control-border-radius-size);
  border-style: solid;
  border-width: var(--control-border-size);
  width: 3em;
  height: 1.5em;
  padding: 0.25em;
}

.dusk-switch--on-surface {
  background-color: var(--on-primary-color);
}

.dusk-switch::after {
  content: "";
  display: inline-block;
  transition: transform 0.3s ease-in-out 0s;
  width: 1.5em;
  height: 1.5em;
  border-radius: var(--control-border-radius-size);
}

.dusk-switch[aria-checked="false"][aria-disabled="false"]:hover::after {
  transform: scale(var(--hover-scale));
}

.dusk-switch[aria-checked="true"]::after {
  background-color: var(--secondary-color);
  transform: translateX(100%);
}

.dusk-switch[aria-checked="true"][aria-disabled="false"]:hover::after {
  transform: translateX(100%) scale(var(--hover-scale));
}

.dusk-switch[aria-checked="false"]::after {
  background-color: var(--primary-color);
}

.dusk-switch[aria-disabled="true"] {
  opacity: 0.5;
}

.dusk-switch[aria-disabled="true"] {
  cursor: not-allowed;
}
