@use "../globals/" as *;
@use "../util/" as *;

$toggle-primary-color: var(--bg-core-primary-darken);
$toggle-secondary-color: #ddd;
$toggle-disabled-color: darken($toggle-secondary-color, 25%);

.toggle-group {
    --width: 42px;
    --height: calc(var(--width) / 2);
    --border-radius: calc(var(--height) / 2);
   
    margin: 0.75rem 0;
    width: max-content;
    cursor: pointer;
    position:relative;
    display: flex;
    align-items: center;
    gap:.75rem;

        &.reversed{
            justify-content: space-between;
            width: 100%;

                & :nth-child(1) {order:2;}
                & :nth-child(2) {order:1;}
        }

        &.column{
            flex-direction: column;
            gap:.25rem;
            width: 100%;
        }

        input[type="checkbox"] {
            position: absolute;
            opacity: 0;
        }
}
  
  .toggle-fill {
    position: relative;
    width: var(--width);
    height: var(--height);
    border-radius: var(--border-radius);
    background: $toggle-secondary-color;
    //margin-right: .75rem;
    transition: background 0.2s ease-in-out;
  }
  
  .toggle-input:checked ~ .toggle-fill {
    background: var(--bg-core-primary-darken);
  }

  .toggle-input:focus-within ~ .toggle-fill {
    outline: 1px solid $toggle-primary-color;
}

  .toggle-input:disabled ~ .toggle-fill {
    background: $toggle-disabled-color;
    pointer-events: none;
  }
  
  .toggle-input:disabled ~ .toggle-label {
    color: $toggle-disabled-color;
  }

  .toggle-fill::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    height: calc(var(--height) - 4px);
    width: calc(var(--height) - 4px);
    background: #ffffff;
    border-radius: var(--border-radius);
    transition: transform 0.2s;
  }
  
  .toggle-input:checked ~ .toggle-fill::after {
    transform: translateX(var(--height));
  }
  
  .toggle-fill::before {
    content: "";  
    display: inline-block;
    width: calc(var(--height) * 1.8);
    height: calc(var(--height) * 1.8);
    border-radius: 50%;
    background-color: transparent;
    position: absolute;
    left: calc(30% - var(--height));
    top: calc(60% - var(--height));
    scale: .75;
    transform-origin: center;
    transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25), transform 0.2s;
  } 
    
  .toggle-fill:hover::before {
    background: var(--bg-core-primary-lighten);
    scale: 1;
    opacity: .5;
  }

  .toggle-input:checked ~ .toggle-fill::before {
    transform: translateX(var(--height));
  }