$checkbox-active-background-color: $color-cerulean !default;
$checkbox-checkmark-color: $color-white !default;
$radius: 2px;

.b-checkbox {
    &.checkbox {
        outline: none;
        display: inline-flex;
        align-items: center;
        & + .checkbox {
            margin-left: 0.5em;
        }
        input[type=checkbox] {
            display: none;
            + .check {
                font-weight: 400;
                content: '';
                display: flex;
                align-items: center;
                justify-content: center;
                width: $checkbox-size;
                min-width: $checkbox-size;
                height: $checkbox-size;
                overflow: hidden;
                margin-right: $checkbox-margin-right;
                border: $checkbox-border;
                background: $checkbox-background;
                border-radius: $checkbox-border-radius;
                text-align: center;
                cursor: pointer;
                @extend .sh-icon;
                @extend .sh-icon-check;
                @include transition(0.2s ease-in-out);
                vertical-align: top;
                &:before {
                    font-size: $checkbox-font-size;
                    line-height: $checkbox-font-size;
                    color: #fff;
                    background: transparent;
                }
            }
            &:checked + .check {
                background: $color-cerulean;
                border-color: $color-cerulean;
            }
        }
        .control-label {
            padding-left: 0.5em;
        }
        &[disabled] {
            opacity: 0.5;
        }
        &:hover {
            input[type=checkbox] + .check {
                border-color: $checkbox-active-background-color;
            }
        }
        //&:focus {
        //    input[type=checkbox] + .check {
        //        box-shadow: 0 0 0.5em rgba($grey, 0.8);
        //    }
        //    input[type=checkbox]:checked + .check {
        //        box-shadow: 0 0 0.5em rgba($checkbox-active-background-color, 0.8);
        //        @each $name, $pair in $colors {
        //            $color: nth($pair, 1);
        //            &.is-#{$name} {
        //                //box-shadow: 0 0 0.5em rgba($color, 0.8);
        //            }
        //        }
        //    }
        //}
        //&.is-small {
        //    @include control-small;
        //}
        //&.is-medium{
        //    @include control-medium;
        //}
        //&.is-large {
        //    @include control-large;
        //}
    }
}