.checkbox {
    input[type='checkbox']{
        position:absolute;
        opacity: 0;
        z-index: -9999;

        & + label{
            position: relative;
            margin:0;
            // Aligns text and checkbox in middle of main axis
            display: flex;
            align-items: center;

            // Min height is required to make sure that when checkbox is without text the label box is sized to fit the checkbox
            min-height: $checkbox-size;

            .indicator{
                display: block;
                position: absolute;
                transition: all 0.2s ease-in;
                width: $checkbox-size;
                height: $checkbox-size;
                background-color: #fff;
                border: 1px solid $input-border-color;
                border-radius: $checkbox-border-radius;
                cursor: pointer;


                &::before{
                    transition: transform #{$checkbox-tick-transition};
                    content: '';
                    transform: scale(0);
                }

                &:hover{
                    background-color: change_color($checkbox-color, $lightness: 90%);
                    border-color: change_color($checkbox-color, $lightness: 85%);
                }
            }

            .label-text{
                margin-left: calc(#{$checkbox-size} + 0.35rem);
            }
        }

        // Checked checkbox styles
        &:checked + label .indicator{
            background-color: $checkbox-color;
            border-color: change_color($checkbox-color, $lightness: 85%);

            // Center tick
            display: flex;
            justify-content: center;
            align-items: center;

            &::before {
                display: block;
                width: $checkbox-size/2;
                height: $checkbox-size/1.25;
                content: '';
                position: relative;
                //left: $checkbox-size/4;
                border: #{$checkbox-size*0.2} solid #fff;
                border-right: 0;
                border-top: 0;
                transform: translateY(-1px) scaleX(-1) scale(0.65) rotate(-45deg) ;
            }
        }

        // Clicking on checkbox styles
        &:active + label .indicator{
            background-color: change_color($checkbox-color, $lightness:80%);
            &::before{
                border-color: $gray-100;
            }
        }

        // Focus styles
        &:focus + label .indicator{
            outline:none;
            box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.25), 0px 0px 0px 3px change_color($checkbox-color, $lightness:80%);
        }


        // Disabled checkbox styles
        &:disabled + label .indicator{
            background-color: $gray-400 !important;

            // Remove effects of focus,hover and active
            box-shadow: none !important;
            // Border must persist because of box-sizing: border-box
            border-color: $gray-400 !important;

            &::before {
                border-color: $gray-200 !important;;
            }
        }


    }
}