/* @docs */
$checkbox-active-background-color: $primary !default;
$checkbox-background-color: $primary !default;
$checkbox-border-color: $primary !default;
$checkbox-border-radius: $base-border-radius !default;
$checkbox-border-width: 2px !default;
$checkbox-checked-box-shadow-length: 0 0 0.5em !default;
$checkbox-checked-box-shadow-opacity: 0.8 !default;
$checkbox-checkmark-color: $primary-invert !default;
$checkbox-disabled-opacity: $base-disabled-opacity !default;
$checkbox-label-padding: 0 0 0 0.5em !default;
$checkbox-margin-sibiling: 0.5em !default;
$checkbox-size: 1rem !default;
$checkbox-line-height: 1.5 !default;
/* @docs */

@function svg_checkmark($color) {
    $start: '<svg width="100%" height="100%" viewBox="0 0 234 225" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">';
    $content: '<g transform="matrix(4.16667,0,0,4.16667,0,0)"><g transform="matrix(3.13817,0,0,3.13817,-69.2796,-49.5156)"><path style="fill:#{$color}" d="M22.504,26.219L28.637,32.386L39.494,18.284L37.348,16.379L28,27.725L24.46,24.196L22.504,26.219Z"></path></g></g>';
    $end: '</svg>';
    @return svg-encode('#{$start}#{$content}#{$end}');
}

@function svg_indeterminate($color) {
    $start: '<svg width="100%" height="100%" viewBox="0 0 417 417" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">';
    $content: '<g transform="matrix(4.16667,0,0,4.16667,0,0)"><g transform="matrix(6.96176,0,0,20.5682,-118.661,-806.753)"><path style="fill:#{$color}" d="M31.265,41.654C31.265,41.324 30.474,41.057 29.5,41.057L18.953,41.057C17.979,41.057 17.188,41.324 17.188,41.654C17.188,41.984 17.979,42.252 18.953,42.252L29.5,42.252C30.474,42.252 31.265,41.984 31.265,41.654Z"/></g></g>';
    $end: '</svg>';
    @return svg-encode('#{$start}#{$content}#{$end}');
}

.o-chk {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    @include unselectable;
    @include avariable('line-height', 'checkbox-line-height', $checkbox-line-height);
    @include avariable('margin-right', 'checkbox-margin-sibiling', $checkbox-margin-sibiling);

    &__check {
        @include avariable('width', 'checkbox-size', $checkbox-size);
        @include avariable('height', 'checkbox-size', $checkbox-size);
        outline: none;
        margin: 0;
        vertical-align: top;
        background-position: center;
        background-size: contain;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        flex-shrink: 0;
        cursor: pointer;
        background-repeat: no-repeat;
        @include avariable('background-color', 'checkbox-background-color', $checkbox-background-color);
        @include avariable('border-radius', 'checkbox-border-radius', $checkbox-border-radius);
        @include avariable('border-width', 'checkbox-border-width', $checkbox-border-width);
        @include avariable('border-color', 'checkbox-border-color', $checkbox-border-color);
        border-style: solid;
        transition-property: background;
        @include avariable('transition-duration', 'transition-duration', $speed-slow);
        @include avariable('transition-timing-function', 'transition-timing', $easing);

        &--checked {
            @include avariable(
                'background-color',
                'checkbox-active-background-color',
                $checkbox-active-background-color
            );
            @include avariable('border-color', 'checkbox-active-background-color', $checkbox-active-background-color);
            background-image: url(svg_checkmark(variable('checkbox-checkmark-color', $checkbox-checkmark-color)));
        }
        &--indeterminate {
            @include avariable(
                'background-color',
                'checkbox-active-background-color',
                $checkbox-active-background-color
            );
            @include avariable('border-color', 'checkbox-active-background-color', $checkbox-active-background-color);
            background-image: url(svg_indeterminate(variable('checkbox-checkmark-color', $checkbox-checkmark-color)));
        }
    }
    &__label {
        @include avariable('padding', 'checkbox-label-padding', $checkbox-label-padding);
    }
    &--disabled {
        @include avariable('opacity', 'checkbox-disabled-opacity', $checkbox-disabled-opacity);
    }
    @each $name, $value in $sizes {
        &--#{$name} {
            @include avariable('font-size', ('checkbox-font-size-' + #{$name}), $value);
        }
    }
    @each $name, $pair in $colors {
        $color: nth($pair, 1);
        $color-invert: nth($pair, 2);
        &--#{$name} {
            .o-chk__check {
                @include avariable('border-color', ('variant-' + #{$name}), $color);
                @include avariable('background-color', ('variant-' + #{$name}), $color);
            }
            .o-chk__check--checked {
                background-image: url(svg_checkmark(variable(('variant-invert-' + #{$name}), $color-invert)));
            }
            .o-chk__check--indeterminate {
                background-image: url(svg_indeterminate(variable(('variant-invert-' + #{$name}), $color-invert)));
            }
        }
    }
}