.bui-switch {
  --bg-color: var(--bui-switch-bg-color, #ccc);
  --padding: var(--bui-switch-padding, 0);
  --border-radius: var(--bui-switch-border-radius, 15px);
  --small-width: var(--bui-switch-small-width, 24px);
  --small-height: var(--bui-switch-small-height, 16px);
  --small-font-size: var(--bui-switch-small-font-size, 9px);
  --controller-small-width: var(--bui-switch-controller-small-width, 12px);
  --controller-small-height: var(--bui-switch-controller-small-height, 12px);
  --medium-width: var(--bui-switch-medium-width, 44px);
  --medium-height: var(--bui-switch-medium-height, 22px);
  --controller-medium-width: var(--bui-switch-controller-medium-width, 18px);
  --controller-medium-height: var(--bui-switch-controller-medium-height, 18px);
  --large-width: var(--bui-switch-large-width, 51px);
  --large-height: var(--bui-switch-large-height, 30px);
  --controller-large-width: var(--bui-switch-controller-large-width, 24px);
  --controller-large-height: var(--bui-switch-controller-large-height, 24px);
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  padding: var(--padding);
  vertical-align: middle;
  border-radius: var(--border-radius);
  background-color: var(--bg-color);
  transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
  font-family: var(--bui-font-family);
}
.bui-switch::after {
  position: absolute;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background-color: #fff;
  content: " ";
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  transition: left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
  animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
  animation-duration: 0.3s;
}
.bui-switch:focus {
  outline: none;
}
.bui-switch-small {
  width: var(--small-width);
  height: var(--small-height);
}
.bui-switch-small .bui-switch-inner {
  left: calc(100% - 10px);
  font-size: var(--font-size-smal);
}
.bui-switch-small::after {
  width: var(--controller-small-width);
  height: var(--controller-small-height);
  left: 2px;
  top: 2px;
}
.bui-switch-small.bui-switch-checked::after {
  left: calc(100% - 14px);
}
.bui-switch-small.bui-switch-checked .bui-switch-inner {
  left: 2px;
}
.bui-switch-medium {
  width: var(--medium-width);
  height: var(--medium-height);
}
.bui-switch-medium::after {
  width: var(--controller-medium-width);
  height: var(--controller-medium-height);
}
.bui-switch-medium.bui-switch-checked::after {
  left: calc(100% - 20px);
}
.bui-switch-medium.bui-switch-checked .bui-switch-inner {
  left: var(--bui-spacing-sm);
}
.bui-switch-large {
  width: var(--large-width);
  height: var(--large-height);
}
.bui-switch-large .bui-switch-inner {
  left: calc(100% - 22px);
}
.bui-switch-large::after {
  width: var(--controller-large-width);
  height: var(--controller-large-height);
  left: 3px;
  top: 3px;
}
.bui-switch-large.bui-switch-checked::after {
  left: calc(100% - 27px);
}
.bui-switch-large.bui-switch-checked .bui-switch-inner {
  left: var(--bui-spacing-sm);
}
.bui-switch-primary.bui-switch-checked {
  background-color: var(--bui-color-primary);
}
.bui-switch-info.bui-switch-checked {
  background-color: var(--bui-color-info);
}
.bui-switch-success.bui-switch-checked {
  background-color: var(--bui-color-success);
}
.bui-switch-warning.bui-switch-checked {
  background-color: var(--bui-color-warning);
}
.bui-switch-danger.bui-switch-checked {
  background-color: var(--bui-color-danger);
}
.bui-switch-inner {
  position: absolute;
  left: calc(100% - 20px);
  color: var(--bui-color-white);
  font-size: var(--bui-text-size-3);
  height: 100%;
  display: flex;
  align-items: center;
}
.bui-switch-inner .bui-svg-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.bui-switch-disabled {
  pointer-events: none;
  opacity: 0.5;
}
.bui-switch-disabled::after {
  animation-name: none;
  cursor: not-allowed;
}
.bui-switch-input {
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  z-index: 1;
  cursor: pointer;
}