@use "sass:map";
@use "../core/_index.scss" as *;
@use "./_variables.scss" as *;

@mixin kendo-checkbox--layout() {

    // Checkbox
    .k-checkbox {
        margin: 0;
        padding: 0;
        width: var( --INTERNAL--kendo-checkbox-width, 1em );
        height: var( --INTERNAL--kendo-checkbox-height, 1em );
        line-height: initial;
        border-width: var( --kendo-checkbox-border-width, #{$kendo-checkbox-border-width} );
        border-style: solid;
        outline: 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        display: inline-block;
        flex: none;
        vertical-align: middle;
        position: relative;
        cursor: pointer;
        -webkit-appearance: none;
    }


    // Checkbox indicator
    .k-checkbox::before {
        @if $kendo-checkbox-indicator-type == "pseudo" {
            content: "";
            width: var( --INTERNAL--kendo-checkbox-indicator-size, 1em );
            height: var( --INTERNAL--kendo-checkbox-indicator-size, 1em );
            border-width: 0;
            border-radius: var( --kendo-checkbox-indicator-border-radius );
            background-color: currentColor;
            overflow: hidden;
            transform: scale(0) translate(-50%, -50%);
            position: absolute;
            top: 50%;
            left: 50%;
        }

        @if $kendo-checkbox-indicator-type == "glyph" {
            content: $kendo-checkbox-checked-glyph;
            width: 1em;
            height: 1em;
            font-family: var( --kendo-checkbox-glyph-font-family, #{ $kendo-checkbox-glyph-font-family } );
            font-size: var( --INTERNAL--kendo-checkbox-glyph-size, 1em );
            line-height: 1;
            transform: translate(-50%, -50%) scale(0);
            overflow: hidden;
            position: absolute;
            top: 50%;
            left: 50%;
        }

        @if $kendo-checkbox-indicator-type == "image" {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            mask-size: var( --INTERNAL--kendo-checkbox-indicator-size, 100% );
            mask-position: center;
            mask-repeat: no-repeat;
        }
    }


    // Hover state
    .k-checkbox:hover,
    .k-checkbox.k-hover {
        @if $kendo-checkbox-indicator-type == "image" {
            &::before {
                background-color: currentColor;
                mask-image: var( --kendo-checkbox-hover-image, #{ $kendo-checkbox-hover-image } );
            }
        }

        @if $kendo-checkbox-indicator-type == "pseudo" {
            &::before {
                transform: translate(-50%, -50%) scale(1);
            }
        }

        @if $kendo-checkbox-indicator-type == "glyph" {
            &::before {
                transform: translate(-50%, -50%) scale(1);
            }
        }
    }


    // Focus state
    .k-checkbox:focus,
    .k-checkbox.k-focus {
        outline-offset: $kendo-checkbox-focus-outline-offset;
    }


    // Checked state
    .k-checkbox:checked,
    .k-checkbox.k-checked {
        @if $kendo-checkbox-indicator-type == "image" {
            &::before {
                background-color: currentColor;
                mask-image: var( --kendo-checkbox-checked-image, #{ $kendo-checkbox-checked-image } );
            }
        }

        @if $kendo-checkbox-indicator-type == "pseudo" {
            &::before {
                transform: translate(-50%, -50%) scale(1);
            }
        }

        @if $kendo-checkbox-indicator-type == "glyph" {
            &::before {
                transform: translate(-50%, -50%) scale(1);
            }
        }
    }


    // Indeterminate state
    .k-checkbox:indeterminate,
    .k-checkbox.k-indeterminate {
        @if $kendo-checkbox-indicator-type == "image" {
            &::before {
                background-color: currentColor;
                mask-image: var( --kendo-checkbox-indeterminate-image, #{ $kendo-checkbox-indeterminate-image } );
                mask-size: var( --INTERNAL--kendo-checkbox-indeterminate-size, 100% );
            }
        }

        @if $kendo-checkbox-indicator-type == "pseudo" {
            &::before {
                width: var( --INTERNAL--kendo-checkbox-indeterminate-size, 1em );
                height: var( --INTERNAL--kendo-checkbox-indeterminate-size, 1em );
                transform: translate(-50%, -50%) scale(1);
            }
        }

        @if $kendo-checkbox-indicator-type == "glyph" {
            &::before {
                transform: translate(-50%, -50%) scale(1);
            }
        }
    }
    .k-checkbox:indeterminate:hover,
    .k-checkbox.k-indeterminate.k-hover {
        @if $kendo-checkbox-indicator-type == "image" {
            &::before {
                background-color: currentColor;
                mask-image: var( --kendo-checkbox-hover-indeterminate-image, #{ $kendo-checkbox-hover-indeterminate-image } );
            }

        }
    }


    // Disabled state
    .k-checkbox:checked:disabled,
    .k-checkbox.k-checked.k-disabled {
        @if $kendo-checkbox-indicator-type == "image" {
            &::before {
                background-color: currentColor;
                mask-image: var( --kendo-checkbox-disabled-checked-image, #{ $kendo-checkbox-disabled-checked-image } );
            }
        }
    }
    .k-checkbox:indeterminate:disabled,
    .k-checkbox.k-indeterminate.k-disabled {
        @if $kendo-checkbox-indicator-type == "image" {
            &::before {
                background-color: currentColor;
                mask-image: var( --kendo-checkbox-disabled-indeterminate-image, #{ $kendo-checkbox-disabled-indeterminate-image } );
            }
        }
    }


    // Checkbox wrap
    .k-checkbox-wrap {
        flex: none;
        display: inline-flex;
        flex-flow: row nowrap;
        gap: 0;
        align-items: center;
        align-self: flex-start;
        vertical-align: middle;
        position: relative;

        &::before {
            content: "\200b";
            width: 0px;
            overflow: hidden;
            flex: none;
            display: inline-block;
            vertical-align: top;
        }
    }


    // Checkbox label
    .k-checkbox-label {
        margin: 0;
        padding: 0;
        display: inline-flex;
        align-items: flex-start;
        gap: var( --kendo-checkbox-label-margin-x, #{ $kendo-checkbox-label-margin-x } );
        vertical-align: middle;
        position: relative;
        cursor: pointer;

        .k-ripple {
            // Hide ripple temporarily
            visibility: hidden !important; // stylelint-disable-line declaration-no-important
        }
    }
    .k-checkbox + .k-label,
    .k-checkbox-wrap + .k-label,
    .k-checkbox + .k-checkbox-label,
    .k-checkbox-wrap + .k-checkbox-label {
        display: inline;
        margin-inline-start: var( --kendo-checkbox-label-margin-x, #{ $kendo-checkbox-label-margin-x } );
    }


    // Empty label
    .k-checkbox-label:empty {
        display: none !important; // stylelint-disable-line declaration-no-important
    }
    .k-checkbox-label.k-no-text {
        min-width: 1px;
    }


    // Checkbox list
    .k-checkbox-list {
        margin: 0;
        padding: 0;
        display: flex;
        flex-flow: column nowrap;
        gap: 0;
        list-style: none;
    }
    .k-checkbox-item,
    .k-checkbox-list-item {
        padding-inline: var( --kendo-checkbox-list-item-padding-x, #{ $kendo-checkbox-list-item-padding-x } );
        padding-block: var( --kendo-checkbox-list-item-padding-y, #{ $kendo-checkbox-list-item-padding-y } );
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        align-content: center;
        gap: k-spacing(2);

        .k-checkbox-label {
            margin: 0;
        }
    }
    .k-checkbox-list-horizontal,
    .k-checkbox-list.k-list-horizontal {
        display: flex;
        flex-flow: row wrap;
        gap: var( --kendo-checkbox-list-spacing, #{ $kendo-checkbox-list-spacing });
    }


    // Ripple
    .k-ripple-container {
        .k-checkbox::after {
            content: "";
            width: var( --INTERNAL--kendo-ripple-size-width, 300% );
            height: var( --INTERNAL--kendo-ripple-size-height, 300% );
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            border-radius: 100%;
            z-index: -1;
            transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);
            transform: translate(-50%, -50%) scale(0);
            transform-origin: center center;
        }

        .k-checkbox:focus,
        .k-checkbox.k-focus {
            box-shadow: none !important; // stylelint-disable-line declaration-no-important
            outline: none !important; // stylelint-disable-line declaration-no-important
        }

        .k-checkbox:disabled::after,
        .k-checkbox.k-disabled::after {
            display: none;
        }
    }


    // Checkbox size
    @each $size, $size-props in $kendo-checkbox-sizes {
        $_size: map.get( $size-props, size );
        $_glyph-size: map.get( $size-props, glyph-size );
        $_indicator-size: map.get( $size-props, indicator-size );
        $_indeterminate-size: map.get( $size-props, indeterminate-size );
        $_ripple-size: map.get( $size-props, ripple-size );

        .k-checkbox-#{$size} {
            --INTERNAL--kendo-checkbox-width: #{$_size};
            --INTERNAL--kendo-checkbox-height: #{$_size};
            --INTERNAL--kendo-checkbox-glyph-size: #{$_glyph-size};
            --INTERNAL--kendo-checkbox-indicator-size: #{$_indicator-size};
            --INTERNAL--kendo-checkbox-indeterminate-size: #{$_indeterminate-size};
        }

        .k-ripple-container {
            .k-checkbox-#{size}::after {
                --INTERNAL--kendo-ripple-size-width: #{ $_ripple-size };
                --INTERNAL--kendo-ripple-size-height: #{ $_ripple-size };
            }
        }
    }

}