Simple styling radio scss

simple-styling-radios.scss

.radio
{
    position: absolute;
    left: -9999px;
    
    & + label
    {
        position: relative;
        display: inline-block;
        padding: 2px 30px;
        cursor: pointer;

        &:before,
        &:after
        {
            position: absolute;
            top: 0;
            content: '';
            transition: all .2s;
            border: 1px solid #000;
            border-radius: 50%;
        }
        
        &:before
        {
            left: 3px;
            width: 12px;
            height: 12px;
            margin-top: 3px;
        }
        
        &:after
        {
            left: 0;
            width: 18px;
            height: 18px;
        }
        
    }
    
    &:checked
    {
        
        & + label:before
        {
            background-color: #000;
        }
        
    }
    
    &:disabled
    {
        
        & + label
        {
            color: #CCC;
          
          &:before,
          &:after
          {
            border: 1px solid #CCC;
          }
          
        }                
    }
}