/* Copyright (C) 2016 NooBaa */

checkbox {
    @size: 18px;
    display: inline-block;
    height: @size;
    line-height: 40px;
    vertical-align: middle;

    label {
        position: relative;
        display: block;
        white-space: nowrap;
        line-height: @size;
        height: @size;
        cursor: default;
    }

    .checkbox-label {
        color: rgb(var(--color17));
        font-weight: @font-light;
        margin-left: 8px;
        cursor: @cursor-pointer;
    }

    .checkbox-box {
        display: inline-block;
        cursor: @cursor-pointer;
        min-height: @size;
        max-height: @size;
        min-width: @size;
        max-width: @size;

        > .outer-rect {
            height: @size;
            width: @size;
            stroke: rgb(var(--color17));
            fill: none;
        }

        > .inner-path {
            stroke-linecap: round;
            stroke-width: 2;
            stroke: rgb(var(--color20));
            fill: none;
            d: path('M4 10 l3 3 l7 -8');
            stroke-dasharray: 16;
            stroke-dashoffset: 16;
        }
    }

    input {
        .hide();

        &:checked  ~ .checkbox-box > .inner-path {
            stroke-dashoffset: 0;
            transition: stroke-dashoffset 150ms linear;
        }

        &:disabled {
            opacity: 0;

            ~ .checkbox-box {
                cursor: default;

                > .outer-rect, > .inner-path {
                    stroke: rgb(var(--color09));
                }
            }

            ~ .checkbox-label {
                opacity: .3;
                color: rgb(var(--color17));
                cursor: default;
            }
        }

        &:focus, &:active:not(:disabled) {
            + .checkbox-box > .outer-rect {
                stroke: rgb(var(--color20));
            }
        }
    }
}
