.toggle_checkbox{
  --uiToggleSize: var(--toggleSize, 20px);
  --uiToggleIndent: var(--toggleIndent, .4em);
  --uiToggleBorderWidth: var(--toggleBorderWidth, 2px);
  --uiToggleColor: var(--toggleColor, #000);
  --uiToggleDisabledColor: var(--toggleDisabledColor, #868e96);
  --uiToggleArrowWidth: var(--toggleArrowWidth, 2px);
  --uiToggleArrowColor: var(--toggleArrowColor, #17a673);
  display: inline-block;
  position: relative;
}
.toggle__input{
  position: absolute;
  left: -99999px;
}
.toggle__label{
  display: inline-flex;
  cursor: pointer;
  min-height: var(--uiToggleSize);
  padding-left: 34px;
}
.toggle__label:before, .toggle__label:after{
  content: "";
  box-sizing: border-box;  
  width: 0.5em;
  height: 0.5em;
  font-size: var(--uiToggleSize);
  position: absolute;
  left: 0;
  top: 0;
}
.toggle__label:before{
  border: var(--uiToggleBorderWidth) solid var(--uiToggleColor);
  z-index: 2;
}
.toggle__input:disabled ~ .toggle__label:before{
  border-color: var(--uiToggleDisabledColor);
}
.toggle__input:focus ~ .toggle__label:before{
  box-shadow: 0 0 0 2px var(--uiToggleBgColor), 0 0 0px 4px var(--uiToggleColor);
}
.toggle__input:not(:disabled):checked:focus ~ .toggle__label:after{
  box-shadow: 0 0 0 2px var(--uiToggleBgColor), 0 0 0px 4px var(--uiToggleColor);
}
.toggle__input:not(:disabled):checked ~ .toggle__label:after{
  opacity: 1;
}
.toggle__text{

  margin-bottom: auto;
}
.toggle__text:before{
  content: "";
  box-sizing: border-box;
  width: 1.4rem;
  height: 1.7rem;
  font-size: 40px;
  border-left-width: 0;
  border-bottom-width: 0;
  border-left-style: solid;
  border-bottom-style: solid;
  border-color: var(--uiToggleArrowColor);
  position: absolute;
  top: .3em;
  left: .0289em;
  z-index: 3;
  transform-origin: left top;
  transform: rotate(-40deg) skew(10deg);
}
.toggle__input:not(:disabled):checked ~ .toggle__label .toggle__text:before{
  width: .4em;
  height: .25em;
  margin-left: 1px;
  border-left-width: var(--uiToggleArrowWidth);
  border-bottom-width: var(--uiToggleArrowWidth);
  will-change: width, height;
  transition: width .1s ease-out .2s, height .2s ease-out;
}
.toggle__label:before, .toggle__label:after{
  border-radius: 2px;
}
.toggle__input:not(:disabled) ~ .toggle__label:before,
.toggle__input:not(:disabled) ~ .toggle__label:after{
  opacity: 1;
  transform-origin: center center;
  will-change: transform;
  transition: transform .2s ease-out;
}
.toggle__text:before{
  opacity: 0;
}
.toggle__input:not(:disabled):checked ~ .toggle__label .toggle__text:before{
  opacity: 1;
  transition: opacity .1s ease-out .3s, width .1s ease-out .5s, height .2s ease-out .3s;
}
.toggle_checkbox{
  --toggleColor: #17a673;
  --toggleBgColor: #9b59b6;
  --toggleSize: 50px;
}