$color1: #f4f4f4;
$color2: var(--bg-core-primary-darken);

.radio-group {
  margin: 0.5rem;
  position:relative;
  input[type="radio"] {
    position: absolute;
    opacity: 0;
    + .radio-label {
      &:before {
        content: "";
        background: $color1;
        border-radius: 100%;
        border: 2px solid $color2;
        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: $color2;
          box-shadow: inset 0 0 0 2px $color1;
        }
      }
    }
    &:focus {
      + .radio-label {
        &:before {
          outline: none;
          border-color: $color2;
        }
      }
    }
    &:disabled {
      + .radio-label {
        color: darken($color1, 25%);
        pointer-events: none;
        &:before {
          box-shadow: inset 0 0 0 2px $color1;
          border-color: darken($color1, 25%);
          background: darken($color1, 25%);
        }
      }
    }
    + .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;
}