<input type="checkbox" name="check1" id="frm-pc-form-check1" checked class="m-form-checkbox">
<label class="m-form-checkbox__label" for="frm-pc-form-check1">Checkbox label</label>

<hr>

<input type="checkbox" name="check2" id="frm-pc-form-check2" disabled class="m-form-checkbox">
<label class="m-form-checkbox__label" for="frm-pc-form-check2">Disable checkbox</label>

<hr>

<input type="checkbox" name="check3[]" id="frm-pc-form-check3-list-1" class="m-form-checkbox">
<label class="m-form-checkbox__label" for="frm-pc-form-check3-list-1">Checkbox list 01</label>
<input type="checkbox" name="check3[]" id="frm-pc-form-check3-list-2" class="m-form-checkbox">
<label class="m-form-checkbox__label" for="frm-pc-form-check3-list-2">Checkbox list 02</label>
<input type="checkbox" name="check3[]" id="frm-pc-form-check3-list-3" class="m-form-checkbox">
<label class="m-form-checkbox__label" for="frm-pc-form-check3-list-3">Checkbox list 03</label>

@import "scss/mixins/icon";

.m-form-checkbox {

    @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 {

            border: 1px solid color('gray');
            content: ' ';
            display: inline-block;
            height: em(20px);
            line-height: em(20px);
            margin-right: em(10px);
            overflow: hidden;
            text-align: center;
            vertical-align: text-bottom;
            width: em(20px);

        }

    }

    &[disabled="disabled"] {

        + #{$self}__label {

            cursor: default;

        }

    }

    &:checked {

        + #{$self}__label {

            &:before {

                background: url('svg/icomoon/SVG/ic12-check.svg') no-repeat center;

            }

        }

    }

    &.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

                }

            }

        }

    }

}