$toggle-width: 40px !default;
$toggle-height: 20px !default;
$toggle-offset: 3px !default;

$toggle-outer-default: #ddd !default;
$toggle-outer-active: $primary-color !default;
$toggle-inner-default: #fff !default;
$toggle-inner-active: #fff !default;

$toggle-transition: 200ms ease-out !default;

.toggle-bool-switches-container {

  text-align: left;

  .toggle-bool-switch {
    // reset style
    background-image: none;
    box-shadow: none;
    //

    cursor: pointer;

    position: relative;
    display: inline-flex;
    align-items: center;
    width: var(--toggle-width);
    height: var(--toggle-height);
    background-color: var(--toggle-outer-default);
    border-radius: 100vw;
    cursor: pointer;
    transition: var(--toggle-transition);

    &::before {
      // reset style
      height: auto;
      width: auto;
      background-image: none;
      //


      content: "";
      position: absolute;
      top: var(--toggle-offset);
      left: var(--toggle-offset);
      bottom: var(--toggle-offset);
      
      aspect-ratio: 1 / 1;
      
      background-color: var(--toggle-inner-default);
      border-radius: 50%;
      box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
      transition: var(--toggle-transition);
    }

    &.on {
      // reset style
      background-image: none;
      //
      background: $primary-color;

      &::before {
        // reset style
        left: var(--toggle-offset);
        //

        background-color: var(--toggle-inner-active);
        transform: translateX(
          calc(var(--toggle-width) - var(--toggle-height))
        );
      }
    }
  }
}