<input type="radio" name="radio" id="frm-pc-form-radio-list-1" class="m-form-radio">
<label class="m-form-radio__label" for="frm-pc-form-radio-list-1">Radio list 01</label>
<input type="radio" name="radio" id="frm-pc-form-radio-list-2" class="m-form-radio">
<label class="m-form-radio__label" for="frm-pc-form-radio-list-2">Radio list 02</label>
<input type="radio" name="radio" id="frm-pc-form-radio-list-3" class="m-form-radio">
<label class="m-form-radio__label" for="frm-pc-form-radio-list-3">Radio list 03</label>.m-form-radio {
@extend .sr-only;
$self: &;
+ #{$self}__label {
cursor: pointer;
display: block;
margin-bottom: space(1);
margin-top: space(1);
position: relative;
user-select: none;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
@media(min-width: breakpoint-min(sm)) {
&--inline {
display: inline-block;
margin: 0;
margin-right: em(10px);
}
}
&:before {
background: color('black');
background-clip: content-box;
border: 1px solid color('gray');
border-radius: 50%;
box-shadow: inset em(0 0 0 100%) color('white');
content: '';
display: inline-block;
font-size: em(125%);
height: em(100%);
margin-right: em(50%);
padding: 1px;
transition: $base-transition;
vertical-align: sub;
width: em(100%);
}
}
&[disabled="disabled"] {
+ #{$self}__label {
cursor: default;
}
}
&:checked {
+ #{$self}__label {
&:before {
box-shadow: inset em(0 0 0 30%) color('white');
}
}
}
&.focus-visible {
&:focus {
+ #{$self}__label {
&:before {
outline: 1px dotted color('black');
outline: auto 5px -webkit-focus-ring-color; // sass-lint:disable-line no-duplicate-properties no-vendor-prefixes
}
}
}
}
}