.mi-promo-button {
  display: inline-flex;
  align-items: center;
}

.mi-promo-button > span {
  color: #000;
  margin-right: 10px;
}

.mi-promo-button .mi-promo-switch {
  --switchbox-size: 40px;
  --switchbox-bd-color: #4e4e4e;
  --switchbox-bd-width: 1px;
  --switchbox-bg-color: #fff;
  --switchbox-bg-color-active: #3978c5;
  --switch-bg-color: #777;
  --switch-bg-color-active: #fff;
  --switch-scale: 90;
  --switch-bd-width: 0px;
  --switch-bd-color: #000;
  --switch-bd-color-active: #ffffff;
  background-color: var(--switchbox-bg-color);
  width: var(--switchbox-size);
  height: calc(var(--switchbox-size) / 2);
  float: left;
  border-radius: calc(var(--switchbox-size) / 2);
  border: solid var(--switchbox-bd-width) var(--switchbox-bd-color);
  position: relative;
  box-sizing: content-box;
}

.mi-promo-button .mi-promo-switch:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50%;
  height: 100%;
  background-color: var(--switch-bg-color);
  border: var(--switch-bd-width) solid var(--switch-bd-color);
  border-radius: 100%;
  transition: 0.2s ease;
  transform: scale(calc(var(--switch-scale) / 100));
}

.mi-promo-button.mi-active .mi-promo-switch {
  background-color: var(--switchbox-bg-color-active);
  transition: 0.4s 0.1s;
}

.mi-promo-button.mi-active .mi-promo-switch:after {
  left: 50%;
  background-color: var(--switch-bg-color-active);
  border-color: var(--switch-bd-color-active);
}