@use "sass:map";
@use "../core/_index.scss" as *;
@use "../core/functions/index.scss" as *;
@use "./_variables.scss" as *;
@use "@progress/kendo-theme-core/scss/components/checkbox/_layout.scss" as *;

@mixin kendo-checkbox--layout() {

    @include kendo-checkbox--layout-base();

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

            #{k-when-default($kendo-checkbox-default-size, $size)}
            &.k-checkbox-#{$size} {
                --kendo-checkbox-indicator-size: #{$_indicator-size};
                --kendo-checkbox-indeterminate-size: #{$_indeterminate-size};
            }
        }
    }

    .k-checkbox::before {
        @if $kendo-checkbox-indicator-type == "pseudo" {
            content: "";
            width: var( --kendo-checkbox-indicator-size, 1em );
            height: var( --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;
            inset-block-start: 50%;
            inset-inline-start: 50%;
        }
        @if $kendo-checkbox-indicator-type == "glyph" {
            font-size: $kendo-checkbox-glyph-size;
        }
        @if $kendo-checkbox-indicator-type == "image" {
            mask-size: var( --kendo-checkbox-indicator-size, 100% );
            mask-position: center;
            mask-repeat: no-repeat;
        }
    }


    // Fluent-specific hover state for checked checkboxes only
    .k-checkbox:checked:hover,
    .k-checkbox.k-checked.k-hover {
        @if $kendo-checkbox-indicator-type == "image" {
            &::before {
                background-color: currentColor;
                mask-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);
            }
        }
    }


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


    // Fluent-specific checked state (pseudo type only)
    .k-checkbox:checked,
    .k-checkbox.k-checked {
        @if $kendo-checkbox-indicator-type == "pseudo" {
            &::before {
                transform: translate(-50%, -50%) scale(1);
            }
        }
    }


    // Fluent-specific indeterminate state
    .k-checkbox:indeterminate,
    .k-checkbox.k-indeterminate {
        @if $kendo-checkbox-indicator-type == "image" {
            &::before {
                mask-size: var( --kendo-checkbox-indeterminate-size, 100% );
            }
        }
        @if $kendo-checkbox-indicator-type == "pseudo" {
            &::before {
                width: var( --kendo-checkbox-indeterminate-size, 1em );
                height: var( --kendo-checkbox-indeterminate-size, 1em );
                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: $kendo-checkbox-hover-indeterminate-image;
            }
        }
    }


    // Fluent-specific disabled state
    .k-checkbox:checked:disabled,
    .k-checkbox.k-checked.k-disabled {
        @if $kendo-checkbox-indicator-type == "image" {
            &::before {
                background-color: currentColor;
                mask-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: $kendo-checkbox-disabled-indeterminate-image;
            }
        }
    }

    // Checkbox list
    .k-checkbox-list.k-list-vertical {
        gap: k-spacing(2);
    }
    .k-checkbox-item,
    .k-checkbox-list-item {
        gap: k-spacing(1);
    }

    // Fluent-specific ripple focus override
    .k-ripple-container {
        .k-checkbox:focus,
        .k-checkbox.k-focus {
            outline: none !important; // stylelint-disable-line declaration-no-important
        }
    }
}