_m-checkbox-custom.scss

@use "../01-abstract/variables" as *;
@use "m-rtl" as *;
@use "m-sr-only" as *;

@use "sass:math";

/**
 * Checkbox custom
 *
 * @author Nicolas Langle
 *
 * @param $color
 * @param $size
 * @param $border-width
 *
 * Examples :
 *
 *      input[type="checkbox"] {
 *          @include checkbox-custom;
 *
 *          &:checked {
 *              @include checkbox-custom-checked;
 *          }
 *      }
 *
 */

@mixin checkbox-custom($color: $color-primary, $size: 18px, $border-width: 1px) {
    @include sr-only;

    + label {
        position: relative;
        display: block;
        padding-inline-start: $size + 20;
        cursor: pointer;

        &::before {
            position: absolute;
            top: 1px;
            left: 0;
            width: $size;
            height: $size;
            margin: 0;
            content: "";
            background-color: $color-light;
            border: $border-width solid $color;

            @include rtl {
                right: 0;
                left: auto;
            }
        }

        &::after {
            position: absolute;
            top: 7px;
            left: math.round(math.div($size, 2));
            width: math.round(math.div($size, 1.5));
            height: math.round(math.div($size, 2.5));
            content: "";
            border-color: $color;
            border-style: solid;
            border-width: 0 0 2px 2px;
            opacity: 0;
            transition: opacity .2s;
            transform: translate(-50%, -50%) rotate(-45deg);

            @include rtl {
                right: math.round(math.div($size, 2));
                left: auto;
                transform: translate(50%, -50%) rotate(-45deg);
            }
        }
    }
}

@mixin checkbox-custom-checked {
    + label {
        &::after {
            opacity: 1;
        }
    }
}