.Toggle {
  $this: &;

  border-radius: 0.75rem;
  height: 1.5rem;
  // margin-right: 3rem;
  transition: background-color 0.25s;
  width: 3rem;

  > #{$this}-handle {
    border-radius: 50%;
    height: 1rem;
    left: 0.225rem;
    top: 0.225rem;
    transition: left 0.25s;
    width: 1rem;
  }

  &.checked {
    > #{$this}-handle {
      left: 1.725rem;
    }

    &[disabled],
    &.is-disabled {
      background-color: var(--colorPrimaryLight);
    }
  }

  &:focus,
  &.is-focus {
    @each $pro, $proval in map-deep-get($forms, 'focus') {
      #{$pro}: $proval;
    }
  }

  &[disabled]:not(.checked),
  &.is-disabled:not(.checked) {
    @each $pro, $proval in map-deep-get($forms, 'disabled') {
      #{$pro}: $proval;
    }
    > #{$this}-handle {
      background-color: map-deep-get($colors-render, 'background', 'lighter');
    }
  }
}