:root {
  --visage-toggle-switch-background-color-on: var(--visage-color-selected);
  --visage-toggle-switch-background-color-off: #6b7276;
  --visage-toggle-switch-font-size: var(--visage-text-size-6);
  --visage-toggle-switch-icon-filter: var(--visage-icon-filter-white)
}
.toggle-switch {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  display: inline-block;
  height: 24px;
  padding-left: 56px;
  font-size: var(--visage-toggle-switch-font-size);
  font-weight: bold;
  text-align: left;
  background: transparent;
  background-image: linear-gradient(to right, var(--visage-toggle-switch-background-color-off) 0, var(--visage-toggle-switch-background-color-off) 1px, var(--visage-toggle-switch-background-color-off) 38px, transparent 38px);
  border: none;
  border-radius: 12px;
  vertical-align: top;
  cursor: pointer;
  transition: background-image 0.2s
}
.toggle-switch::before {
  content: " ";
  display: inline-block;
  position: absolute;
  z-index: 4;
  top: 2px;
  left: 2px;
  height: 20px;
  width: 20px;
  background: #fff;
  border-radius: 12px;
  transition: left 0.2s
}
.toggle-switch::after {
  content: " ";
  display: block;
  width: 20px;
  height: 20px;
  position: relative;
  background-size: auto auto;
  background-position: center;
  background-repeat: no-repeat;
  filter: var(--visage-icon-filter-dark-grey);
  position: absolute;
  top: 2px;
  left: 3px;
  z-index: 2;
  background-image: var(--visage-icon-url-check);
  filter: var(--visage-toggle-switch-icon-filter)
}
.toggle-switch:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #5cbeff
}
.toggle-switch .toggle-switch-text-off,
.toggle-switch .toggle-switch-text-on {
  display: block
}
.toggle-switch .toggle-switch-text-off::before,
.toggle-switch .toggle-switch-text-on::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 24px;
  display: block;
  height: 24px;
  width: 24px;
  background: var(--visage-toggle-switch-background-color-off);
  border-radius: 12px
}
.toggle-switch .toggle-switch-text-on {
  height: 0;
  overflow: hidden
}
.toggle-switch[aria-checked=true] {
  background-image: linear-gradient(to right, var(--visage-toggle-switch-background-color-on) 0, var(--visage-toggle-switch-background-color-on) 1px, var(--visage-toggle-switch-background-color-on) 38px, transparent 38px);
  transition: background-image 0.2s
}
.toggle-switch[aria-checked=true] .toggle-switch-text-on {
  height: auto;
  overflow: visible
}
.toggle-switch[aria-checked=true] .toggle-switch-text-on::before {
  background-color: var(--visage-toggle-switch-background-color-on);
  z-index: 3
}
.toggle-switch[aria-checked=true] .toggle-switch-text-off {
  height: 0;
  overflow: hidden
}
.toggle-switch[aria-checked=true]::before {
  left: 26px;
  transition: left 0.2s
}