.switch {
  position: relative;
  margin-top: 7px;
  display: inline-flex;
  min-width: 44px;
  aspect-ratio: 2;
  height: auto;
  transition: background-color 0.4s;
  border-radius: 1.786rem;
  align-items: center;
  justify-content: space-between;
  background-color: var(--switch-off-color);
  cursor: pointer;
  overflow: hidden;
}
/*&.-checked {
    background-color: ~'var(--switch-on-color)';

    .switch-handle {
      transform: translate3D(calc(~"100%" + 6px), 0, 0);
    }
  }*/
.switch:has(.switch-option:last-child input:checked) {
  background-color: var(--switch-on-color);
}
.switch:has(.switch-option:last-child input:checked) .switch-handle {
  transform: translate3D(calc(100% + 6px), 0, 0);
}
.switch:has(.switch-option:first-child input:checked) {
  background-color: var(--switch-off-color);
}
.switch:has(.switch-option:first-child input:checked) .switch-handle {
  transform: translate3D(0, 0, 0);
}
.switch.-disabled,
.switch.-readonly {
  cursor: not-allowed;
  opacity: 0.6;
}
.switch .switch-option {
  color: white;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.switch .switch-option .jalios-icon {
  color: #fff;
  display: flex;
  margin: 0;
}
.switch .switch-option .jalios-icon:before {
  font-size: 0.75rem;
  line-height: 0;
}
.switch .switch-option label {
  margin-bottom: 0;
}
.switch-handle {
  border-radius: 99999px;
  position: absolute;
  width: calc(50% - 6px);
  height: calc(100% - 6px);
  top: 3px;
  left: 3px;
  background-color: #ffffff;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.26, 1);
  transform: translate3D(0, 0, 0);
}
[dir="rtl"] .switch-handle {
  transform: translate3D(calc(100% + 6px), 0, 0);
}
[dir="rtl"] .switch:has(.switch-option:last-child input:checked) {
  background-color: var(--switch-on-color);
}
[dir="rtl"] .switch:has(.switch-option:last-child input:checked) .switch-handle {
  transform: translate3D(0, 0, 0);
}
[dir="rtl"] .switch:has(.switch-option:first-child input:checked) {
  background-color: var(--switch-off-color);
}
[dir="rtl"] .switch:has(.switch-option:first-child input:checked) .switch-handle {
  transform: translate3D(calc(100% + 6px), 0, 0);
}
[dir="rtl"] .switch.-checked .switch-handle {
  left: 3px;
  transform: translate3D(0, 0, 0);
}
/*# sourceMappingURL=jalios-form-input-switch.css.map */