.fcr-switch {
  border-color: var(--fcr_ui_scene_input);
  border-radius: var(--fcr_cornerradius_round);
  position: relative;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  padding: 6px 6px 6px 8px;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s;
  transform-origin: top left;
  height: 24px;
  width: 44px;
}

.fcr-switch.fcr-switch--on {
  color: var(--fcr_ui_scene_white10);
  background: var(--fcr_ui_scene_ramp_brand6);
}

.fcr-switch.fcr-switch--off {
  background: var(--fcr_mobile_ui_scene_fill3);
  border-color: var(--fcr_ui_scene_line1);
  color: var(--fcr_ui_scene_icontext2);
}

.fcr-switch__slider {
  border-radius: var(--fcr_cornerradius_round);
  top: 1px;
  position: absolute;
  width: 20px;
  height: 20px;
  box-shadow: -1px 0px 2px rgba(40, 34, 111, 0.295629);
  transition: all 0.3s;
  background: var(--fcr_ui_scene_white10);
}

.fcr-switch--off .fcr-switch__slider {
  left: 1px;
}

.fcr-switch--on .fcr-switch__slider {
  left: calc(100% - 20px - 1px);
}

.fcr-switch__labels span {
  display: inline-block;
  width: 23px;
  opacity: 1;
}
.fcr-switch .fcr-switch__labels span:first-child {
  text-align: left;
}
.fcr-switch .fcr-switch__labels span:last-child {
  text-align: right;
}
.fcr-switch.fcr-switch--off .fcr-switch__labels span:first-child,
.fcr-switch.fcr-switch--on .fcr-switch__labels span:last-child {
  opacity: 0;
}