@use "sass:map";
@use "./variables.scss" as *;
@use "../../functions/index.scss" as *;
@use "../../z-index/index.scss" as *;
@use "../input/_variables.scss" as *;

@mixin kendo-signature--layout-base() {

    .k-signature {
        width: $kendo-signature-width;
        min-height: $kendo-signature-height;
        position: relative;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        &.k-signature-maximized {
            width: $kendo-signature-maximized-width;
            height: $kendo-signature-maximized-height;

            > .k-signature-line {
                border-block-end-width: $kendo-signature-maximized-line-width;
            }
        }

        // Sizes
        @each $size, $size-props in $kendo-signature-sizes {
            $_padding-x: map.get($size-props, padding-x);
            $_padding-y: map.get($size-props, padding-y);
            $_line-size: map.get($size-props, line-size);
            $_line-offset: map.get($size-props, line-offset);

            #{k-when-default($kendo-input-default-size, $size)}
            &.k-signature-#{$size} {
                padding-inline: $_padding-x;
                padding-block: $_padding-y;

                .k-signature-line {
                    width: $_line-size;
                }
            }
        }

        #{k-when-default($kendo-input-default-size, "lg")}
        &.k-signature-lg {
            min-height: $kendo-signature-lg-min-height;
        }

    }

    .k-signature-actions {
        display: flex;
        width: min-content;
        margin-inline-start: auto;
        gap: $kendo-signature-actions-gap;
        z-index: k-z-index("base", 2);
    }

    .k-signature-canvas {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        width: 100%;
        height: 100%;
        display: block;
        z-index: k-z-index("base", 1);
        outline: none;
    }

    .k-signature-line {
        position: absolute;
        inset-block-end: $kendo-signature-line-bottom-offset;
        z-index: k-z-index("base", 2);
        pointer-events: none;
        border-block-end-width: $kendo-signature-line-width;
        border-block-end-style: $kendo-signature-line-style;
    }

}