.b-checkbox {
    flex-direction: column;
    display: flex;

    .checkbox-field {
<% if (config.get('scssMixins').includes('a11y-hide')) { -%>
        @include a11y-hide();
<% } else { -%>
        overflow: hidden;
        position: absolute;
        width: 1px;
        height: 1px;
        clip: rect(1px, 1px, 1px, 1px);
<% } -%>
    }

    .checkbox-label {
        overflow: visible;
        user-select: none;
        position: relative;
        line-height: 3rem;
        cursor: pointer;

        &::before,
        &::after {
            content: '';
            display: inline-block;
        }

        &::before {
            width: 2rem;
            height: 2rem;
            margin-right: 1rem;
            border: 1px solid $light-gray;
            border-radius: 4px;
            vertical-align: sub;
        }

        &::after {
<% if (config.get('features').includes('svgBackgrounds')) { -%>
            @include svg-background(checkbox-hook-gray);

            opacity: 0;
            position: absolute;
            top: 50%;
            left: 0;
            width: 2.4rem;
            height: 1.8rem;
            background-size: contain;
            transition: transform .2s, opacity .2s;
            transform: translateY(-100%);
<% } else { -%>
            content: '✓';
            opacity: 0;
            position: absolute;
            top: 50%;
            left: 2px;
            font-size: 20px;
            transition: transform .2s, opacity .2s;
            transform: translateY(-100%);
<% } -%>
        }
    }

    .checkbox-field:checked {
        + .checkbox-label::after {
            opacity: 1;
            transform: translateY(-50%);
        }
    }

    .checkbox-field:not(:disabled) {
        + .checkbox-label:hover::before {
            border-color: $medium-gray;
        }

        &:focus + .checkbox-label::before {
            border-color: $primary-color;
        }
    }

    .checkbox-field:disabled {
        + .checkbox-label::before {
            background-color: $light-gray;
        }
    }
}