.radio-button {
line-height: 44px; input[type=radio] { display: none; } input[type=radio]:checked + label:before { background-color: $base-color; border-color: $base-color; background-image: asset-data-url('svg/check.svg'); background-position: center; background-repeat: no-repeat; background-size: 50%; } label { cursor: pointer; margin-right: 1em; padding-left: 1.75em; position: relative; &:before { content: ''; position: absolute; width: 1em; height: 1em; background-color: white; left: 0; top: 0; border-radius: 2px; } &:hover { &:before { border-color: $base-color; } } }
}
.checkbox-button {
line-height: 44px; input[type=checkbox] { display: none; } input[type=checkbox]:checked + label:before { background-color: $base-color; border-color: $base-color; background-image: asset-data-url('svg/check.svg'); background-position: center; background-repeat: no-repeat; background-size: 50%; } label { cursor: pointer; margin-right: 1em; padding-left: 1.75em; position: relative; &:before { content: ''; position: absolute; width: 1em; height: 1em; background-color: white; left: 0; top: 0; border-radius: 2px; } &:hover { &:before { border-color: $base-color; } } }
}