.bs-toggle {
    $self: &;
    $toggle-spacing: 0.05em;
    align-items: center;
    display: flex;
    > * {
      cursor: pointer;
      margin: 0 5px;
    }
    &__label {
      user-select: none;
      #{$self}--is-disabled & {
        cursor: not-allowed;
      }
    }
    &__input {
      display: none;
      &:checked {
        & + #{$self}__content {
          &:after {
            left: calc(50% + #{$toggle-spacing});
          }
        }
      }
    }
    &__content {
      background: $grey-lighten-6;
      border-radius: 2.5em;
      box-sizing: border-box;
      height: .9em;
      outline: 0;
      overflow: hidden;
      padding: $toggle-spacing;
      transition: background-color .4s ease;
      width: 1.8em;
      will-change: background-color;
      &:after {
        background: white;
        border-radius: 50%;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, .05);
        content: '';
        display: block;
        height: 100%;
        left: 0;
        position: relative;
        transition: left .2s ease;
        width: calc(50% - #{$toggle-spacing});
        will-change: left;
  
      }
      #{$self}--is-disabled & {
        cursor: not-allowed;
        background: $grey-background;
      }

      &:focus {
        outline: 2px solid rgba(204, 204, 204, 0.3);
      }

      &__active {
        &:focus {
              outline: 2px solid rgba(59, 153, 252, 0.3);
        }
      }
  
      
    }
}
  
