@use "sass:math";
@use "./_variables.scss" as *;
@use "../core/z-index/index.scss" as *;
@use "@progress/kendo-theme-core/scss/components/slider/_layout.scss" as *;


@mixin kendo-slider--layout() {

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

    .k-slider {
        .k-tick {
            margin: 0;

            &::after {
                $tick-offset: calc( #{$kendo-slider-tick-size} / -2 );

                content: "";
                position: absolute;
                z-index: k-z-index("base", 1);
                height: $kendo-slider-tick-size;
                width: $kendo-slider-tick-size;
                top: 50%;
                left: 50%;
                margin: $tick-offset 0 0 $tick-offset;
                border-radius: 50%;
            }
        }

        .k-draghandle {
            z-index: k-z-index("base", 2);
        }
    }

    .k-slider-horizontal {

        .k-slider-track-wrap {
            padding-inline: $kendo-slider-tick-size;
        }

        .k-tick {
            &.k-first::after {
                left: 0;
            }
            &.k-last::after {
                left: auto;
                right: 0;
            }
        }
    }

    .k-slider-vertical {

        .k-slider-track-wrap {
            padding-block: $kendo-slider-tick-size;
        }

        .k-tick {
            &.k-last::after {
                inset-block-start: 0;
            }
            &.k-first::after {
                inset-block-start: auto;
                inset-block-end: 0;
            }
        }
    }

}