$color3: #f4f4f4;
$color4: var(--bg-core-primary-darken);

.checkbox-group {
  margin: 0.5rem;
  position:relative;
  input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    + .checkbox-label {
      &:before {
        content: "";
        background: transparent;
        border-radius: 0%;
        border: 2px solid $color4;
        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: $color4; 
          box-shadow: inset 0 0 0 2px $color3;

        }
      }
    }
    // &:checked {
    //     + .checkbox-label {
    //       &:after {
    //         background: $color3;
    //         z-index: 1;
    //         opacity: 1;
    //         scale: 0.25;
    //         clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  
    //       }
    //     }
    //   }
    &:focus {
      + .checkbox-label {
        &:before {
          outline: none;
          border-color: $color4;
        }
      }
    }
    &:disabled {
      + .checkbox-label {
        color: darken($color3, 25%);
        pointer-events: none;
        &:before {
          box-shadow: inset 0 0 0 2px $color3;
          border-color: darken($color3, 25%);
          background: darken($color3, 25%);
        }
      }
    }
    + .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;
}