:root {
  --visage-toggle-switch-height: 20px;
  --visage-toggle-switch-height-mini: 16px;
  --visage-toggle-switch-height-super: 28px;
  --visage-toggle-switch-width: 36px;
  --visage-toggle-switch-width-mini: 28px;
  --visage-toggle-switch-width-super: 50px;
  --visage-toggle-switch-handle-gutter: 2px;
  --visage-toggle-switch-background-color-on: var(--visage-color-black);
  --visage-toggle-switch-background-color-off: #666666;
  --visage-toggle-switch-font-size: var(--visage-text-size-5);
  --visage-toggle-switch-transition-duration: .2s
}
.toggle-switch {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  display: inline-block;
  min-height: 44px;
  padding: 0 calc( var(--visage-toggle-switch-width) + 16px - 2px) 0 0;
  margin-right: 14px;
  font-size: var(--visage-toggle-switch-font-size);
  font-weight: normal;
  text-align: left;
  background: transparent;
  border: none;
  vertical-align: baseline;
  cursor: pointer
}
.toggle-switch::before {
  content: " ";
  display: inline-block;
  position: absolute;
  z-index: 4;
  bottom: calc(50% - (var(--visage-toggle-switch-height) / 2) + var(--visage-toggle-switch-handle-gutter));
  right: calc(var(--visage-toggle-switch-width) - var(--visage-toggle-switch-height) + var(--visage-toggle-switch-handle-gutter));
  height: calc(var(--visage-toggle-switch-height) - var(--visage-toggle-switch-handle-gutter) - var(--visage-toggle-switch-handle-gutter));
  width: calc(var(--visage-toggle-switch-height) - var(--visage-toggle-switch-handle-gutter) - var(--visage-toggle-switch-handle-gutter));
  background: #fff;
  border-radius: 50%;
  transition: right var(--visage-toggle-switch-transition-duration)
}
.toggle-switch::after {
  content: " ";
  position: absolute;
  bottom: calc(50% - (var(--visage-toggle-switch-height) / 2));
  right: 0;
  display: inline-block;
  width: var(--visage-toggle-switch-width);
  height: var(--visage-toggle-switch-height);
  background: var(--visage-toggle-switch-background-color-off);
  border-radius: calc(var(--visage-toggle-switch-height) / 2);
  transition: background var(--visage-toggle-switch-transition-duration)
}
.toggle-switch:hover::after {
  opacity: var(--visage-toggle-switch-opacity-hover, 0.6)
}
.toggle-switch:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #000
}
.toggle-switch:disabled {
  cursor: default
}
.toggle-switch:disabled::after,
.toggle-switch:disabled:hover::after {
  background: #dfdfdf;
  opacity: 1
}
.toggle-switch .toggle-switch-text-off,
.toggle-switch .toggle-switch-text-on {
  display: block;
  text-align: left
}
.toggle-switch .toggle-switch-text-on {
  height: 0;
  overflow: hidden
}
.toggle-switch[aria-checked=true]::before {
  right: var(--visage-toggle-switch-handle-gutter);
  transition: right var(--visage-toggle-switch-transition-duration)
}
.toggle-switch[aria-checked=true]::after {
  background: var(--visage-toggle-switch-background-color-on);
  transition: background var(--visage-toggle-switch-transition-duration)
}
.toggle-switch[aria-checked=true] .toggle-switch-text-on {
  height: auto;
  overflow: visible
}
.toggle-switch[aria-checked=true] .toggle-switch-text-on::before {
  z-index: 3
}
.toggle-switch[aria-checked=true] .toggle-switch-text-off {
  height: 0;
  overflow: hidden
}
.toggle-switch-mini {
  --visage-toggle-switch-height: var(--visage-toggle-switch-height-mini);
  --visage-toggle-switch-width: var(--visage-toggle-switch-width-mini)
}
.toggle-switch-super {
  --visage-toggle-switch-height: var(--visage-toggle-switch-height-super);
  --visage-toggle-switch-width: var(--visage-toggle-switch-width-super)
}
.toggle-switch-hide-text {
  padding-right: var(--visage-toggle-switch-width)
}
.toggle-switch-hide-text .toggle-switch-text-off,
.toggle-switch-hide-text .toggle-switch-text-on,
.toggle-switch-hide-text[aria-checked=true] .toggle-switch-text-on {
  width: 1px;
  opacity: 0.01
}