.radio{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(#000, .1);
  border-radius: 100%;
  transition: all .3s;
}
.inner{
  opacity: 1;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: #FFF;
}
.radio.checked{
  border: 1px solid #000;
  background-color: #000;
  .inner{
    opacity: 1;
  }
}