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

@mixin kendo-signature--layout() {

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

        &.k-signature-maximized {
            width: var( --kendo-signature-maximized-width, #{$kendo-signature-maximized-width} );
            height: var( --kendo-signature-maximized-height, #{$kendo-signature-maximized-height} );

            > .k-signature-line {
                border-bottom-width: var( --kendo-signature-maximized-line-width, #{$kendo-signature-maximized-line-width} );
            }
        }

        &:disabled,
        &[disabled],
        &.k-disabled {
            opacity: var( --kendo-signature-disabled-opacity, #{$kendo-signature-disabled-opacity} );
        }
    }

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

    .k-signature-canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        z-index: 1;
    }

    .k-signature-line {
        position: absolute;
        bottom: var( --kendo-signature-line-bottom-offset, #{$kendo-signature-line-bottom-offset} );
        z-index: 2;
        pointer-events: none;
        border-bottom-width: var( --kendo-signature-line-width, #{$kendo-signature-line-width} );
        border-bottom-style: var( --kendo-signature-line-style, #{$kendo-signature-line-style} );
    }

    // 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-signature-#{$size} {
            padding-inline: $_padding-x;
            padding-block: $_padding-y;

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

    .k-signature-lg {
        min-height: var( --kendo-signature-lg-min-height, #{$kendo-signature-lg-min-height} );
    }

}