$md-radio-checked-color: var(--color-primary);
$md-radio-border-color: var(--input-border-color);
$md-radio-size: 20px;
$md-radio-checked-size: 10px;
$md-radio-ripple-size: 15px;

.form-field--radio {
    position: relative;
    margin: 8px 0;

    label {
      cursor: pointer;

      &:before, &:after {
        content: "";
        position: absolute;
        left:0;
        top: 0;
        border-radius: 50%;
        transition: all .3s ease;
        transition-property: transform, border-color;
      }

      &:before {
        width: $md-radio-size;
        height: $md-radio-size;
        background: transparent;
        border: 2px solid $md-radio-border-color;
        cursor: pointer;
      }

      &:after {
          top: $md-radio-size / 2 - $md-radio-checked-size / 2;
          left: $md-radio-size / 2 - $md-radio-checked-size / 2;
          width:$md-radio-checked-size;
          height:$md-radio-checked-size;
          transform: scale(0);
          background:$md-radio-checked-color;
      }

    }

    input[type="radio"] {
        visibility: hidden;
        margin-right: 16px;

        &:checked + label:before {
            border-color: $md-radio-checked-color;
        }

        &:checked + label:after {
            transform: scale(1);
        }
    }
}