.ToggleBase {
  margin: 0;
  width: 3em;
  height: 1.6em;
  transition: var(--animationBase);
  outline: none;
  border-radius: 0;
  position: relative;
  display: inline-block;
}

.ToggleBase input {
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  z-index: var(--layerPageZIndex);
  cursor: pointer;
}

.ToggleBase input:not(:disabled):hover,
.ToggleBase input:not(:disabled):focus,
.ToggleBase input:checked {
  border-color: var(--colorBrand);
  background: var(--colorBrand);
}

.ToggleBase input:checked + .ToggleBase-body {
  background-color: var(--colorButtonBg);
}

.ToggleBase input:checked + .ToggleBase-body:after {
  background: hsl(var(--colorBrand-h), calc(var(--colorBrand-s) * 1%), calc(var(--colorBrand-l) * 0.64 * 1%));
  transform: translateX(1.4em);
}

.ToggleBase-body {
  display: inline-block;
  width: 100%;
  height: 100%;
  background: #e6e6e6;
  transition: var(--animationBase);
}

.ToggleBase-body:after {
  content: '';
  display: block;
  width: 1.2em;
  height: 1.2em;
  background-color: silver;
  transition: var(--animationBase);
  position: absolute;
  top: .2em;
  left: .2em;
}

.ToggleBase:disabled,
.ToggleBase:disabled + * {
  border-color: var(--colorTextSubtle);
  opacity: .4;
}

.ToggleBase.is-invalid {
  border-color: var(--colorErrorsDefault);
}

/*# sourceMappingURL=toggle.min.css.map */