.ve-switch {
  --ve-track-width: calc(40 / 22 * var(--ve-height));
  --ve-thumb-size: calc(18 / 22 * var(--ve-height));
  --ve-offset: calc(8 / 40 * var(--ve-track-width));
}
.ve-switch .ve-selection-control__wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ve-track-width);
  height: var(--ve-height);
}
.ve-switch .ve-selection-control__input {
  position: absolute;
  width: var(--ve-height);
  height: var(--ve-height);
  border-radius: 50%;
  transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform;
  transform: translateX(calc(-1 * var(--ve-offset)));
}
.ve-switch.ve-selection-control--dirty .ve-selection-control__input {
  transform: translateX(var(--ve-offset));
}
.ve-switch__track {
  position: relative;
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-width: var(--ve-track-width);
  color: rgba(var(--ve-theme-on-surface), 0.2);
  background-color: currentColor;
  border-radius: 12px;
  opacity: var(--ve-medium-emphasis-opacity);
}
.ve-switch__thumb {
  position: absolute;
  height: var(--ve-thumb-size);
  width: var(--ve-thumb-size);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  transition: 0.15s transform cubic-bezier(0.4, 0, 0.2, 1);
  background-color: #FFF;
}