* {
  box-sizing: border-box;
}
.baidu-switch {
  display: inline-flex;
  align-items: center;
  width: 68.841rpx;
  height: 41.667rpx;
  line-height: 41.667rpx;
  border-radius: var(--v-spacing-xl, 72.464rpx);
  vertical-align: middle;
  border: 1px solid #bfbfbf;
  background-color: #ededed;
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.baidu-switch .after {
  content: "";
  width: var(--font-size-md, 32.609rpx);
  height: var(--font-size-md, 32.609rpx);
  box-sizing: border-box;
  border-radius: var(--font-size-md, 32.609rpx);
  border: 1px solid transparent;
  background-color: var(--color-white, #fff);
  position: absolute;
  left: 4.831rpx;
  cursor: pointer;
  transition: left 0.2s ease-in-out, width 0.2s ease-in-out;
}
.baidu-switch:active .after {
  width: var(--font-size-lg, 39.855rpx);
}
.baidu-switch .before {
  content: "";
  display: none;
  width: var(--font-size-sm, 28.986rpx);
  height: var(--font-size-sm, 28.986rpx);
  border-radius: 50%;
  box-sizing: border-box;
  background-color: transparent;
  position: absolute;
  left: 7.246rpx;
  z-index: 1;
  border: 1px solid #2d8cf0;
  border-color: transparent transparent transparent #2d8cf0;
  animation: switch-loading 1s linear;
  animation-iteration-count: infinite;
}
.baidu-switch:focus {
  box-shadow: 0 0 0 1.208rpx rgba(45,140,240,0.2);
  outline: 0;
}
.baidu-switch:focus:hover {
  box-shadow: none;
}
.baidu-switch-loading {
  opacity: 0.4;
}
.baidu-switch-loading .before {
  display: block;
}
.baidu-switch-inner {
  color: var(--color-white, #fff);
  font-size: 12.077rpx;
  position: absolute;
  right: 4.831rpx;
}
.baidu-switch-checked {
  border-color: #38f;
  background-color: #38f;
}
.baidu-switch-checked .baidu-switch-inner {
  left: 4.831rpx;
}
.baidu-switch-checked .after {
  left: 30.193rpx;
}
.baidu-switch-checked .before {
  left: var(--font-size-md, 32.609rpx);
}
.baidu-switch-checked:active .after {
  left: 24.155rpx;
}
.baidu-switch-disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.baidu-switch-disabled .after {
  background: var(--color-white, #fff);
  cursor: not-allowed;
}
.baidu-switch-disabled .baidu-switch-inner {
  color: var(--color-white, #fff);
}
.baidu-switch-disabled.baidu-switch-checked {
  border-color: #2d8cf0;
  background-color: #2d8cf0;
  opacity: 0.4;
}
.baidu-switch-disabled.baidu-switch-checked .after {
  background: var(--color-white, #fff);
}
.baidu-switch-disabled.baidu-switch-checked .baidu-switch-inner {
  color: var(--color-white, #fff);
}
@-moz-keyframes switch-loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes switch-loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes switch-loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes switch-loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}