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

.radio-group {
    --width: 1.25rem;
    --height: var(--width);
    --inset: calc(var(--width) / 10);

    margin: 0.75rem 0;
    width: max-content;
    cursor: pointer;
    position:relative;
    display: flex;
    align-items: center;
    gap:.75rem;
    z-index: 1;

        &.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="radio"] {
            position: absolute;
            opacity: 0;
        }
}
  
.radio-fill {
  position: relative;
  display: inline-block;
  width: var(--width);
  height: var(--height);
  border-radius: 50%;
  background-color: transperent;
  border: 2px solid $radio-primary-color;
  transition: background-color 0.2s ease-in-out;
  }
  
.radio-input:checked ~ .radio-fill {
  background: var(--bg-core-primary-darken);
  box-shadow: inset 0 0 0 var(--inset) $radio-secondary-color;
  
}

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

.radio-input:disabled ~ .radio-fill {
  box-shadow: inset 0 0 0 var(--inset) $radio-secondary-color;
  border-color: $radio-disabled-color;
  background: $radio-disabled-color;
  pointer-events: none;
  }

  .radio-input:disabled ~ .radio-label {
    color: $radio-disabled-color;
  }



  
  .radio-fill::before {
    content: "";  
    display: inline-block;
    width: calc(var(--width) * 1.8);
    height: calc(var(--width) * 1.8);
    border-radius: 50%;
    background-color: transparent;
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    scale: .75;
    transform-origin: left top;
    transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25), transform 0.2s;
  } 
    
  .radio-fill:hover::before {
    background: var(--bg-core-primary-lighten);
    scale: 1;
    opacity: .5;
  }



// $checkbox-primary-color: var(--bg-core-primary-darken);
// $checkbox-secondary-color: #f4f4f4;
// $checkbox-disabled-color: darken($checkbox-secondary-color, 25%);

// .checkbox-group {
//   margin: 0.5rem;
//   position:relative;
  
//   input[type="checkbox"] {
//     position: absolute;
//     opacity: 0;

//     + .checkbox-label {
//       &:before {
//         content: "";
//         background: transparent;
//         border: 2px solid $checkbox-primary-color;
//         display: inline-block;
//         width: 1.25em;
//         height: 1.25em;
//         position: relative;
//         top: .15rem;
//         margin-right: .75em;
//         vertical-align: top;
//         cursor: pointer;
//         text-align: center;
//         z-index: 1;
//         transition: all 250ms ease;        
//       }
//     }
//     &:checked {
//       + .checkbox-label {
//         &:before {
//           background-color: $checkbox-primary-color; 
//           box-shadow: inset 0 0 0 2px $checkbox-secondary-color;

//         }
//       }
//     }
//     &:focus {
//       + .checkbox-label {
//         &:before {
//           outline: 1px solid $checkbox-primary-color;
//           border-color: $checkbox-primary-color;
//         }
//       }
//     }
//     &:disabled {
//       + .checkbox-label {
//         color: darken($checkbox-secondary-color, 25%);
//         pointer-events: none;
//         &:before {
//           box-shadow: inset 0 0 0 2px $checkbox-secondary-color;
//           border-color: $checkbox-disabled-color;
//           background: $checkbox-disabled-color;
//         }
//       }
//     }
//     + .checkbox-label {
//       &:empty {
//         &:before {
//           margin-right: 0;
//         }
//       }
//     }
//   }
// }

// .checkbox-label:after {
//   content: "";
//   display: inline-block;
//   width: 35px;
//   height: 35px;
//   border-radius: 50%;
//   background-color: transparent;
//   position: absolute;
//   left: -8px;
//   top: -6px;
//   scale: .75;
//   transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25);
// }

// .checkbox-label:hover:after {
//   background: var(--bg-core-primary-lighten);
//   scale: 1;
//   opacity: .5;
// }


// $radio-primary-color: var(--bg-core-primary-darken);
// $radio-secondary-color: #f4f4f4;
// $radio-disabled-color: darken($radio-secondary-color, 25%);

// .radio-group {
//   margin: 0.5rem;
//   position:relative;
  
//   input[type="radio"] {
//     position: absolute;
//     opacity: 0;

//     + .radio-label {
//       &:before {
//         content: "";
//         background: transparent;
//         border-radius: 50%;
//         border: 2px solid $radio-primary-color;
//         display: inline-block;
//         width: 1.25em;
//         height: 1.25em;
//         position: relative;
//         top: .15rem;
//         margin-right: .75em;
//         vertical-align: top;
//         cursor: pointer;
//         text-align: center;
//         z-index: 1;
//         transition: all 250ms ease;
//       }
//     }
//     &:checked {
//       + .radio-label {
//         &:before {
//           background-color: $radio-primary-color;
//           box-shadow: inset 0 0 0 2px $radio-secondary-color;
//         }
//       }
//     }
//     &:focus {
//       + .radio-label {
//         &:before {
//           outline: 1px solid $radio-primary-color;
//           border-color: $radio-primary-color;
//         }
//       }
//     }
//     &:disabled {
//       + .radio-label {
//         color: darken($radio-secondary-color, 25%);
//         pointer-events: none;
//         &:before {
//           box-shadow: inset 0 0 0 2px $radio-secondary-color;
//           border-color: $radio-disabled-color;
//           background: $radio-disabled-color;
//         }
//       }
//     }
//     + .radio-label {
//       &:empty {
//         &:before {
//           margin-right: 0;
//         }
//       }
//     }
//   }
// }

// .radio-label:after {
//   content: "";
//   display: inline-block;
//   width: 35px;
//   height: 35px;
//   border-radius: 50%;
//   background-color: transparent;
//   position: absolute;
//   left: -8px;
//   top: -6px;
//   scale: .75;
//   transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25);
// }

// .radio-label:hover:after {
//   background: var(--bg-core-primary-lighten);
//   scale: 1;
//   opacity: .5;
// }

