dvn-switch {
  --margin: var(--spacing-unit) calc(1.5 * var(--spacing-unit));
  --switch-cursor: pointer;
  --switch-border-radius: var(--corner-radius);
  --switch-controller-border-radius: calc(var(--corner-radius) - 2px);
  display: inline-block;
  height: var(--switch-height);
  width: var(--switch-width);
  background: var(--base-color-lightest);
  border-radius: var(--switch-border-radius);
  padding: var(--switch-padding);
  cursor: var(--switch-cursor);
  transition: background-color 0.3s, box-shadow 0.3s;
  /* Tint */
  /* Shape */
  /* Scale */
}
dvn-switch.disabled {
  --switch-cursor: unset;
  background: var(--color-neutral-lightest);
}
dvn-switch.disabled .switch-controller {
  background-color: var(--color-disabled);
}
dvn-switch .switch-controller {
  transition: margin-left 0.3s, background-color 0.3s;
  background-color: var(--base-color);
  width: var(--switch-controller-size);
  height: var(--switch-controller-size);
  border-radius: var(--switch-controller-border-radius);
  margin-left: var(--switch-controller-size);
}
dvn-switch .switch-controller.to-checked {
  animation: to-checked-animation 0.3s 0s both;
}
dvn-switch .switch-controller.to-unchecked {
  animation: to-unchecked-animation 0.3s 0s both;
}
dvn-switch:hover:not(.disabled) .switch-controller {
  background-color: var(--base-color-light);
}
dvn-switch:focus {
  outline: none;
}
dvn-switch:focus:not(.disabled) {
  box-shadow: 0 1px 10px var(--base-color-light);
}
dvn-switch:focus:not(.disabled) .switch-controller {
  background-color: var(--base-color-light);
}
dvn-switch.passive {
  --base-color: var(--color-neutral);
  --base-color-light: var(--color-neutral-light);
  --base-color-lightest: var(--color-neutral-lightest);
}
dvn-switch.passive:focus:not(.disabled) {
  outline: none;
}
dvn-switch.passive .switch-controller {
  margin-left: 0;
}
dvn-switch.neutral {
  --base-color: var(--color-neutral);
  --base-color-light: var(--color-neutral-light);
  --base-color-lightest: var(--color-neutral-lightest);
}
dvn-switch.primary:not(.passive) {
  --base-color: var(--color-primary);
  --base-color-light: var(--color-primary-light);
  --base-color-lightest: var(--color-primary-lightest);
}
dvn-switch.secondary:not(.passive) {
  --base-color: var(--color-secondary);
  --base-color-light: var(--color-secondary-light);
  --base-color-lightest: var(--color-secondary-lightest);
}
dvn-switch.warning:not(.passive) {
  --base-color: var(--color-warning);
  --base-color-light: var(--color-warning-light);
  --base-color-lightest: var(--color-warning-lightest);
}
dvn-switch.danger:not(.passive) {
  --base-color: var(--color-danger);
  --base-color-light: var(--color-danger-light);
  --base-color-lightest: var(--color-danger-lightest);
}
dvn-switch.rounded {
  --switch-border-radius: var(--switch-height);
  --switch-controller-border-radius: var(--switch-height);
}
dvn-switch.rectange {
  --switch-border-radius: var(--switch-height);
}
dvn-switch.small {
  --font-size: var(--font-size-small);
  --switch-height: 24px;
  --switch-width: 44px;
  --switch-controller-size: 20px;
  --switch-padding: 2px;
}
dvn-switch.medium {
  --font-size: var(--font-size-medium);
  --switch-height: 32px;
  --switch-width: 56px;
  --switch-controller-size: 24px;
  --switch-padding: 4px;
}
dvn-switch.large {
  --font-size: var(--font-size-large);
  --switch-height: 40px;
  --switch-width: 68px;
  --switch-controller-size: 28px;
  --switch-padding: 6px;
}
dvn-switch.leaned {
  --margin: 0;
}

@keyframes to-checked-animation {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: var(--switch-controller-size);
  }
}
@keyframes to-unchecked-animation {
  0% {
    margin-left: var(--switch-controller-size);
  }
  100% {
    margin-left: 0;
  }
}