@use "./_variables.scss" as *;

@mixin kendo-map--layout() {

    // Layout
    .k-map {
        height: var( --kendo-map-height, #{$kendo-map-height} );
        box-sizing: border-box;
        border-width: var( --kendo-map-border-width, #{$kendo-map-border-width} );
        border-style: solid;
        font-size: var( --kendo-map-font-size, #{$kendo-map-font-size} );
        line-height: var( --kendo-map-line-height, #{$kendo-map-line-height} );
        font-family: var( --kendo-map-font-family, #{$kendo-map-font-family} );

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }


        // Scroll
        .km-scroll-wrapper {
            width: 100%;
            height: 100%;
            user-select: none;
            position: absolute;
        }
        .km-scroll-container { height: 100%; }
        .k-touch-scrollbar { display: none; }

        // Layers
        .k-layer {
            position: absolute;
            left: 0;
            top: 0;
        }

        // Marker
        .k-marker {
            transform: translate(-50%, -100%);
            cursor: pointer;
            position: absolute;
            overflow: visible;
        }


        // Attribution
        .k-attribution {
            padding-inline: var( --kendo-map-attribution-padding-x, #{$kendo-map-attribution-padding-x} );
            padding-block: var( --kendo-map-attribution-padding-y, #{$kendo-map-attribution-padding-y} );
            border-width: 0;
            font-size: var( --kendo-map-attribution-font-size, #{$kendo-map-attribution-font-size} );
            z-index: 1000;
        }
    }


    // Controls
    .k-map-controls {
        position: absolute;
        display: flex;
        align-items: center;
    }


    // Navigator
    .k-navigator {
        margin-inline: var( --kendo-map-navigator-margin-x, #{$kendo-map-navigator-margin-x} );
        margin-block: var( --kendo-map-navigator-margin-y, #{$kendo-map-navigator-margin-y} );
        width: var( --kendo-map-navigator-width, #{$kendo-map-navigator-width} );
        height: var( --kendo-map-navigator-width, #{$kendo-map-navigator-width} );
        border-width: var( --kendo-map-navigator-border-width, #{$kendo-map-navigator-border-width} );
        border-style: solid;
        box-sizing: border-box;
        border-radius: 50%;
        position: relative;

        // Buttons
        .k-button {
            padding: 0;
            width: auto;
            height: auto;
            line-height: 1;
            box-shadow: none;
            position: absolute;

            .k-icon {
                min-width: 0;
                min-height: 0;
            }
        }
        .k-navigator-n,
        .k-navigator-up {
            transform: translateX(-50%);
            top: var( --kendo-map-navigator-padding, #{$kendo-map-navigator-padding} );
            left: 50%;
        }
        .k-navigator-e,
        .k-navigator-right {
            transform: translateY(-50%);
            right: var( --kendo-map-navigator-padding, #{$kendo-map-navigator-padding} );
            top: 50%;
        }
        .k-navigator-s,
        .k-navigator-down {
            transform: translateX(-50%);
            bottom: var( --kendo-map-navigator-padding, #{$kendo-map-navigator-padding} );
            left: 50%;
        }
        .k-navigator-w,
        .k-navigator-left {
            transform: translateY(-50%);
            left: var( --kendo-map-navigator-padding, #{$kendo-map-navigator-padding} );
            top: 50%;
        }
    }


    // Zoom control
    .k-zoom-control {
        margin-inline-start: var( --kendo-map-zoom-control-margin, #{$kendo-map-zoom-control-margin} );
        border: 0;
        background: none;
        display: flex;
    }

    .k-pdf-export {
        .k-navigator,
        .k-zoom-control {
            display: none;
        }
    }

}