@import "../../styles/color";
@import "../../styles/sizes";
@import "../../styles/flex";


.one-ui-checkbox {
    $root: &;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
    cursor: pointer;

    @include setMargin();
    @include setFlex();

    input {
        margin: 1px 0 0 0;
        width: .1px;
        height: .1px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
    }
    .one-ui-description{
        transform: translate3d(0,-2px,0);
    }

    &__element {
        display: flex;
        background-color: color(grey, 2, .5);
        border-radius: 3px;
        pointer-events: none;
        cursor: pointer;
        transition: background-color .2s ease;
        align-items: center;
        justify-content: center;
        overflow: hidden;

        &:before{
            content: '';
            position: absolute;
            left:0;
            top:0;
            background-color: color(key);
            transition: all .2s ease;
            transform: scale3d(0, 0, 0);
            opacity: 0;
            transform-origin: center center;
        }

        .one-ui-icon {
            transition: transform .2s ease;
            transform: scale3d(0, 0, 0);
        }

        &--checked {

            &:before{
                background-color: color(key);
                opacity: 1;
                transform: scale3d(1, 1, 1);
            }

            .one-ui-icon {
                transform: scale3d(1, 1, 1);
            }
        }
    }

    &--size {
        $checkbox-sizes: (sm: 16, md: 24, lg: 32);

        @each $key, $size in $checkbox-sizes{
            &-#{$key}{
                #{$root}__element{
                    width: #{$size}px;
                    height: #{$size}px;
                    &:before{
                        width: #{$size}px;
                        height: #{$size}px;
                        border-radius: #{$size}px;
                    }
                    &--checked:before {
                        border-radius: 3px;
                    }
                }
            }
        }
        //&-sm {
        //    width: 16px;
        //    height: 16px;
        //}
        //
        //&-md {
        //    width: 24px;
        //    height: 24px;
        //}
        //
        //&-lg {
        //    width: 32px;
        //    height: 32px;
        //}
    }

    &--label {
        #{$root}__element {
            margin-right: 16px;
        }
    }
}