.o-switch {
  --switch-radius: var(--o-control_size-s);

  --switch-color: var(--o-color-info4);

  --switch-bg-color: var(--o-color-control1-light);
  --switch-bg-color-hover: var(--o-color-control2-light);
  --switch-bg-color-active: var(--o-color-control3-light);
  --switch-bg-color-disabled: var(--o-color-control4-light);

  --switch-bg-color-checked: var(--o-color-primary1);
  --switch-bg-color-checked-hover: var(--o-color-primary2);
  --switch-bg-color-checked-active: var(--o-color-primary3);
  --switch-bg-color-checked-disabled: var(--o-color-primary4);

  --switch-handler-bg-color: var(--o-color-white);
  --switch-handler-bg-color-disabled: rgb(var(--o-white), 0.6);
  --switch-handler-bg-color-checked-disabled: rgb(var(--o-white), 0.4);

  --switch-icon-loading-color: var(--o-color-primary1);

  --switch-icon-size: var(--o-icon_size-xs);
}

.o-switch-checked {
  --switch-color: var(--o-color-info1-inverse);
}

.o-switch.o-switch-custom {
  --switch-handler-color: var(--o-color-info1-inverse);

  --switch-handler-bg-color: var(--o-color-primary1);

  --switch-bg-color-checked: var(--switch-bg-color);
}

.o-switch-medium {
  --switch-min-width: 40px;

  --switch-size: var(--o-control_size-s);

  --switch-text-size: var(--o-font_size-tip2);
  --switch-text-height: var(--o-line_height-tip2);

  --switch-handler-size: var(--o-control_size-xs);
  --switch-handler-offset: 4px;

  --switch-label-padding: 6px;
}

.o-switch-small {
  --switch-min-width: 28px;

  --switch-size: var(--o-control_size-xs);

  --switch-text-size: var(--o-font_size-tip2);
  --switch-text-height: var(--o-line_height-tip2);

  --switch-handler-size: calc(var(--o-control_size-2xs) - 4px);
  --switch-handler-offset: 4px;

  --switch-label-padding: 4px;
}

.o-switch-round-pill {
  --switch-radius: var(--o-control_size-l);
}