$color1: #f4f4f4; $color2: #12cf7f; .radio { input[type="radio"] { position: absolute; opacity: 0; + .radio-label { &:before { content: ""; background: $color1; border-radius: 100%; border: 1px solid darken($color1, 25%); display: inline-block; width: 1.7em; height: 1.7em; position: relative; vertical-align: top; margin-left: 0.5em; cursor: pointer; text-align: center; transition: all 250ms ease; } } &:checked { + .radio-label { &:before { background-color: $color2; box-shadow: inset 0 0 0 4px $color1; } } } &:focus { + .radio-label { &:before { outline: none; border-color: $color2; } } } &:disabled { + .radio-label { &:before { box-shadow: inset 0 0 0 4px $color1; border-color: darken($color1, 25%); background: darken($color1, 25%); } } } + .radio-label { &:empty { &:before { margin-right: 0; } } } } }