$ar-checkbox-bg-color: $color-grey !default;
$ar-checkbox-bg-active-color: $color-gray-dark !default;
$ar-checkbox-handle-color: $color-white !default;
$ar-checkbox-border-color: $color-blue !default;
$ar-checkbox-size: 18px !default;

label.ar-checkbox {
    position: relative;
    display: flex;
    min-width: $ar-checkbox-size;
    flex-grow: 0;
    flex-shrink: 0;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    user-select: none;

    * {
        pointer-events: none;
    }

    input {
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
    }

    > span:last-child {
        position: relative;
        width: $ar-checkbox-size;
        height: $ar-checkbox-size;
        top: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid $ar-checkbox-border-color;
        border-radius: 2px;

        > svg {
            opacity: 0;
            fill: $ar-checkbox-bg-active-color;
        }
    }

    > span:first-child {
        flex-grow: 1;
    }

    &.ar-checkbox-label-left {
        > span:first-child {
            margin-right: 10px;
            text-align: left;
        }
    }

    &.ar-checkbox-label-right {
        flex-direction: row-reverse;

        > span:first-child {
            margin-left: 10px;
            text-align: right;
        }
    }

    input:focus + span:last-child {
        box-shadow: 0 0 1px 2px rgba($ar-checkbox-bg-active-color, 0.25);
    }

    input:checked + span:last-child {
        svg {
            opacity: 1;
            fill: $ar-checkbox-bg-active-color;
        }
    }

    input:disabled + span:last-child {
        opacity: 0.5;
        cursor: default;
    }

    @each $clr-name, $clr-codes in $buttons {
        &-#{$clr-name} {
            input:focus + span:last-child {
                box-shadow: 0 0 1px 2px rgba(nth($clr-codes, 1), 0.25);
            }

            input + span:last-child {
                border-color: nth($clr-codes, 1);
            }
        }
    }

    &:hover {
        input:focus + span:last-child {
            box-shadow: none;
        }
    }
}