// RenderKit
// github.com/matteobertoldo/renderkit
// Licensed under MIT Open Source

////
/// @group checkbox & radio
////

/// Mixin for generate a `checkbox` shape input.
///
/// @param {Boolean} $center-align [false] - If `true` the `checkbox` shape it will be displayed half on the height of the text occupying the `label`.
/// @param {Keyword} $checkbox-size [24px] - The size in `px` for the `checkbox` shape.
/// @param {Color} $checkbox-mark-color [#8c8c8c] - The color of the `checkbox` mark.
/// @param {Keyword} $checkbox-mark-thick [3px] - The thickness of the "arrow" shape.
/// @param {Keyword} $checkbox-border-radius [5px] - The `border-radius` of the `checkbox` shape.
@mixin checkbox-shape($center-align: false, $checkbox-size: 24px, $checkbox-mark-color: #8c8c8c, $checkbox-mark-thick: 3px, $checkbox-border-radius: 5px) {
    $marker-size: ($checkbox-size / 2);
    $marker-size-half: ($marker-size / 2);

    &::before {
        border-radius: $checkbox-border-radius;
    }

    &::after {
        @include arrow(rem($marker-size-half), rem($marker-size), $checkbox-mark-color, $checkbox-mark-thick);
        @if ($center-align) {
            top: 50%;
        } @else {
            top: rem($checkbox-size - ($marker-size + $marker-size-half));
        }
        left: rem(($checkbox-size - $marker-size-half) / 2);
        @if ($center-align) {
            margin-top: -(rem($marker-size-half));
        }
        transform: scale(0) rotate(45deg) translate(0);
    }
}

/// Mixin for generate all the attributes needed to agree with `checkbox` shape.
///
/// @param {Boolean} $hover-border [false] - Enable or disable the ability to have a different `border` in hover.
/// @param {Color} $hover-border-color [#b2b2b2] - The color of the `border` of the `radio` shape in hover.
/// @param {Boolean} $checked-border [true] - Enable or disable the ability to have a different `border-color` when `input[type="checkbox"]` is `:checked`.
/// @param {Color} $checked-border-color [#b2b2b2] - The `border-color` of the checkbox shape when `input[type="checkbox"]` is `:checked`.
/// @param {Color} $focus-border-color [#b2b2b2] - The `border-color` of the checkbox shape when `input[type="checkbox"]` is in `:focus` but not `:checked`.
@mixin checkbox-attr($hover-border: false, $hover-border-color: #b2b2b2, $checked-border: true, $checked-border-color: #b2b2b2, $focus-border-color: #b2b2b2) {
    input[type="checkbox"][disabled] + & {
        opacity: $global-input-disabled-opacity;
        cursor: $global-input-disabled-cursor;
    }

    @if ($hover-border) {
        input[type="checkbox"]:not([disabled]) + &:hover {
            &::before {
                border-color: $hover-border-color;
            }
        }
    }

    input[type="checkbox"]:checked + & {
        @if ($checked-border) {
            &::before {
                border-color: $checked-border-color;
            }
        }

        &::after {
            transform: scale(1) rotate(45deg) translate(0);
        }
    }

    input[type="checkbox"]:focus:not(:checked) + & {
        &::before {
            border-color: $focus-border-color;
        }
    }

    @if ($custom-checkbox-radio-outline-detect) {
        @if ($custom-checkbox-radio-what-input-outline-detect) {
            [data-whatinput="keyboard"] input[type="checkbox"]:focus + & {
                &::before {
                    outline: -webkit-focus-ring-color auto 5px;
                    outline-offset: -2px;
                 }
            }
        } @else {
            input[type="checkbox"]:focus + & {
                &::before {
                    outline: -webkit-focus-ring-color auto 5px;
                    outline-offset: -2px;
                }
             }
        }
    }
}

/// Mixin for generate all validation attributes needed to agree with `checkbox` shape.
///
/// @param {String} $error-class [error] - The validation class failed.
/// @param {Color} $error-border-color [#c04649] - The `border-color` when `input[type="checkbox"]` is in validation failed.
/// @param {Color} $error-background-color [#f2c0c1] - The `background-color` when `input[type="checkbox"]` is in validation failed.
@mixin checkbox-validation($error-class: 'error', $error-border-color: #c04649, $error-background-color: #f2c0c1) {
    input[type="checkbox"].#{$error-class}:not([disabled]) + & {
        &::before {
            border-color: $error-border-color;
            background-color: $error-background-color;
        }
    }

    input[type="checkbox"].#{$error-class}:focus:not(:checked) + & {
        &::before {
            border-color: $error-border-color;
        }
    }
}