@import "./css-less-variables/common-import.less"; input[type="radio"] { position: absolute; border: 0; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; &:checked + label:before { padding: 0; background-clip: content-box; background-color: @color-white; border: 5px solid @wos-brand; transition: all 280ms ease; height: 9px; width: 9px; } &:hover { + label:before { border: 1px solid @wos-brand; } } &:focus { + label:before { border: 2px solid @wos-brand; } } &:active { + label:before { background-color: @wos-brand; border: 5px solid @wos-brand; transition: all 280ms ease; height: 9px; width: 9px; } } &:checked:hover { + label:before { border: 5px solid @wos-brand; } } &:checked:focus { + label:before { border: 5px solid @wos-brand; } } &:disabled + label:before { background-color: #FAFAFC; color: #B2B2B8; } &:disabled + label { color: #B2B2B8; cursor: default; pointer-events: none; } } .wos-radio-button { ~ label { position: relative; display: inline-block; transition: color 280ms ease; margin: 0 5px 5px 0; padding-left: 25px; cursor: pointer; font-weight: normal; user-select: none; &:hover { color: #4B505A; } } ~ label:before { position: absolute; left: 0; top: -1px; border: 1px solid @wos-gray-b; border-radius: 50%; height: 18px; width: 18px; transition: border 280ms ease; background-color: @color-white; content: " "; } }